前端框架bootstrap-圖標菜單按鈕組件

image.png

小圖標組件

image.png

http://v3.bootcss.com/components/#glyphicons(借鑒別人文章)

需要注意,可能在頁面中使用圖標時,設置好代碼可圖標卻顯示不出來,若遇到此問題,需要注意以下問題,便可解決:
image.png

css、fonts、js都要在項目中另起文件夾(fonts和css必須是同級,都是在官網上下載的3.0版bootstrap包含的),保證它們都是在同級的,然后html如下:

例子

可以使用<i>或<span>標簽來配合使用:

image.png

例子


例子

效果圖


效果圖

按鈕的設置


image.png

例子

例子

效果圖


效果圖

下拉菜單組件

image.png

例子


例子
效果圖

菜單項居右對齊,標題,分割線,禁用項


image.png
說明:

divider設置分割線,一般是自己獨立一行li,若把divider設置在li中的產品這行,則就會覆蓋產品二字

例子


例子

效果圖


效果圖

例子


例子

效果圖


效果圖

三、按鈕組組件

image.png

例子


例子

效果圖


效果圖

按鈕組大小,下拉菜單


image.png
image.png

例子


例子

效果圖


效果圖

按鈕組排列順序


image.png

例子


例子

效果圖


效果圖

四、按鈕式下拉菜單

image.png
image.png

例子


例子

效果圖


效果圖

分裂式按鈕下拉菜單


image.png

例子


例子

效果圖


效果圖

本文作者lilyping
越努力,越幸運
原文鏈接:http://www.lxweimin.com/u/3908e601f4ec
微信公眾號:BestLilyPing
github:https://github.com/lilyping
Demos源碼地址:https://github.com/lilyping

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容