Bootstrap3学习笔记---2

Bootstrap3组件

Glyphicons

感谢Glyphicons的工作人员的慷慨, 允许BT的使用者免费使用添加一个有情连接http://glyphicons.com/

在需要用到字体图标的地方添加以下代码


当然不要忘记图标和文本之前要添加一个空格 这样显示会更好

下拉菜单

    

这里需要注意的是给button 添加dropdown-toggle类 还要添加data-toggle属性为dropdown

按钮组

实现2边都是圆角然后中间按钮和2边的都是紧挨的

    
可以添加btn-group-lg 省去了给每一个按钮添加lg 这样整个按钮组都变大了

如果想让按钮不是水平排列而是垂直只要添加btn-group-vertical就OK了

导航

    

标签页式的

更换成nav-pills 并添加nav-stacked 可以让导航变成垂直的 胶囊样式

Bootstrap3学习笔记---2_第1张图片

导航条

navbar-fixed-top导航条固定在顶部

navbar-fixed-bottom固定在底部  

这2个都需要你给body 添加margin 来覆盖掉默认的不然导航条会 遮盖主体内容

body { padding-top: 70px; }
下面引用BT官方文档里的一段代码来演示BT的导航条是可以响应式的导航条.当你在手机上浏览的时候导航条会被折叠 条目会在右侧的一个小图标中, 你点击图标会出来

静止在顶部navbar-static-top

反色navbar-inverse

当你屏幕宽度变小时候会发生这个情况

右侧的3横条 所有导航里的条目就隐藏在这里

   

分页

   

可以用pagination-lg  pagination-sm来控制大小

巨幕

    

Hello CSDN

This is a page for BT


Bootstrap3学习笔记---2_第2张图片

这主要用于主体部分展示主要展品 信息 较为醒目

警告框

Warning! You finished the mission

alert-dismissible 的意思是带有关闭按钮的警告框 

进度条

        
60% Complete
60% Complete
60% Complete
60% Complete
60% Complete

带有不同颜色进度条 如果不想显示进度的数字可以给span添加sr-only类

Bootstrap3学习笔记---2_第3张图片

想添加条纹效果得进度条 添加类progress-bar-striped

列表组

        

Bootstrap3学习笔记---2_第4张图片

可以给被禁用的条目添加 disabled

还有一些其他的组件, 不是很常用, 比较多难于记忆, 请用到的同学去查文档就可以了.

你可能感兴趣的:(Web,Bootstrap3)