一:字体图标组件
字体图标是以glyphicon-开头,是由https://glyphicon.com/网站提供的。
- 图标类不能和其他组件直接联合使用,它们不能在同一个元素上与其他类共同存在,应该创建一个嵌套的span标签,并将图标类应用到这个span标签上。
- 图标类只能应用在不包含任何文本的内容或子元素上。
二:下拉菜单组件
1.基本下拉菜单
将下拉菜单触发器和下拉菜单都包裹在.dropdown里或者另一个声明了position:relative;的元素。最后加入组成菜单的HTML代码中。 - 为下拉菜单的父元素设置.dropup类,可以让菜单向上弹出。
- .open类用于控制菜单收缩展开。
- .caret类用于设置向下的小三角。
- .active类默认是选中状态。
- .divider类是分割线,用于将多个链接分组。
- 引入jQuery和bootstrap.js文件是为了有交互效果。
2.按钮式下拉菜单
语法
<div class="btn-group">
<button type="button" class="btn btn-success">...</button>
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
三:输入框组件
示例:
<div class="input-group">
<input type="text" class-"form-control" placeholder="请输入要搜索的内容">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">百度一下</button>
</span>
</div>
四:导航组件
.nav nav-tabs 选项卡导航
.nav nav-pills 胶囊式导航
*** nav-justified 自适应导航
下拉菜单导航
<ul class="nav nav-pills">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">员工管理</a></li>
<li><a href="#">物流管理</a></li>
<li class="dropdown">
<a href="#"data-toggle="dropdown">帮助<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">物流帮助</a></li>
<li><a href="#">物流帮助</a></li>
<li><a href="#">物流帮助</a></li>
<li><a href="#">物流帮助</a></li>
</ul>
</li>
</ul>
五:导航条组件
1.默认样式
.nav、.navbar、.navbar-nav用于控制导航条的字体样式、内外边距、行距等样式。
.active类默认是选中状态。
2.表单
3.按钮、文本和链接
4.固定在页面顶部、底部
5.响应式导航条
六:分页组件
1.默认分页
分页大小
2.翻页
七:缩略图组件
添加文字和按钮
八:媒体对象组件
九:列表组组件