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