添加Bootstrap组件

字体图标

需要引入字体图标,首先引入文件

说明网址:http://www.runoob.com/bootstrap/bootstrap-glyphicons.html

图标类不能直接与其他组件相结合,在同一个元素上也不能与其他类一起使用。需要嵌入标签,并且标签的类名必须是glyphicon

定义元素
引入图标资源
效果图

导航标签页

首先引入文件

说明网址:http://www.runoob.com/bootstrap/bootstrap-glyphicons.html

导航组件可以对列表进行修饰,生成漂亮的导航元素。

添加Bootstrap组件_第1张图片


添加Bootstrap组件_第2张图片

给ul再添加nav-tabs


添加Bootstrap组件_第3张图片
菜单项会以标签页的形式,显示出来

nav-pills类,效果是胶囊式


添加Bootstrap组件_第4张图片
胶囊式

nav-stacked 垂直


添加Bootstrap组件_第5张图片
垂直



下拉菜单

太复杂了,实在没搞懂

你可能感兴趣的:(添加Bootstrap组件)