bootstrap( 四 )


图片形状,img-rounded,img-circle,img-thumbnail,IE8 不支持 CSS3 中的圆角属性 。
7
【辅助】
text-muted、text-primary、text-success、text-info、text-warning、text-danger
bg-primary、bg-success、bg-info、bg-warning、bg-danger、
三角符号,caret
浮动
居中
组件样式
【图标】
200个来自 Glyphicon Halflings 的字体图标,
图标类只能应用在空元素上,且不可与其它组件联合使用 。
<span class="glyphicon glyphicon-search"></span>
【菜单】
将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里
菜单对齐:默认情况下,下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度 。为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐
菜单分组:dropdown-header表描述项,.disabled 表禁用项
向上弹出: .dropup 类就能使触发的下拉菜单朝上方打开
【按钮组】
按钮组.btn-group,通过.btn-group-* 指定组中按钮尺寸 。
按钮栏.btn-toolbar
钮垂直堆叠排列显示btn-group-vertical
两端对齐排列的按钮组btn-group-justified
【导航】
标签页.nav-tabs 类依赖 .nav 基类 。
胶囊式标签页.nav-pills 类,添加 .nav-stacked 类改为垂直堆叠 。
.nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度 。
navbar navbar-default
对于不包含在 <form> 中的 <button> 元素,加上 .navbar-btn 后,可以让它在导航条里垂直居中 。
将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐,
.navbar-text
.navbar-link
.navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐 。
.navbar-fixed-top 类可以让导航条固定在顶部
.navbar-fixed-bottom 类可以让导航条固定在底部
.navbar-static-top 类可让导航条随着页面向下滚动而消失 。
.navbar-inverse 类可以改变导航条的外观 。
breadcrumb 创建带有层次的导航结构 。
【分页】
pagination,并根据情况对页码使用.disabled 类、 .active 类 。
.pagination-lg 或 .pagination-sm 类提供了额外可供选择的尺寸 。
pager上一页和下一页的简单翻页 。并可通过previous,next类标示 。
【标签】
label标签基类,可通过label-default, label-primary, label-success, label-info, label-warning, label-danger改变标签的外观 。
badge,可以很醒目的展示新的或未读的信息条目 。
7
【其它】
缩略图
提示框
进度条
媒体对象等
定制样式
1
BootStrap提供了根据自己需要的组件及jquery插件进行定制,使用者也可以直接修改Less源码 。
END
总结
1
本篇经验仅从全局简单介绍Bootstrap的内容,细节部分并不具体,Bootstrap的使用非常灵活,可以对各种组件进行合并使用,建议使用过程中实时参考官方文档,官方文档有更详细的下载及使用说明,针对具体样式有直观样例,而且有丰富的主题案例 。

推荐阅读