bootstrap(6)
2016-08-27 本文已影响17人
OldSix1987
1输入框组
- input-group：只能用于文本框<input>，不能用于<select>和<textarea>。
- input-group-addon：用于在<input>前后添加额外元素，赋给一个<span>元素即可，注意：将input-group-addon和<input>元素包在input-group之中。
- input-group-lg 和 input-group-sm可以改变输入框组的尺寸。
- input-group-btn：可以作为额外的元素的按钮，应该是作为<button>的父元素。
Paste_Image.png
Paste_Image.png
2标签页组
- nav：标签页的基类
- nav-tabs：是标签页的样式
- active：是标签页的状态类（当前样式）
- nav-pills：胶囊式标签页
- nav-stacked ：胶囊式标签页堆放排列（垂直排列）
Paste_Image.png
Paste_Image.png
3路径导航
- breadcrumb 赋给ol、ul可以实现面包屑效果
- active 赋给当前栏目，当前栏目不加链接
Paste_Image.png
Paste_Image.png
4缩略图
- thumbnail：赋给a元素，可以实现缩略图样式
- caption：可以实现缩略图标题及描述
Paste_Image.png
Paste_Image.png
5分页
.pagination：赋给ul元素可以实现分页
.«：上一页
.»：下一页
.disabled：禁用状态
.active：激活状态
.pagination-lg：分页大尺寸
.pagination-sm：分页小尺寸
.pager：可以实现翻页效果，上一页、下一页效果。
Paste_Image.png
Paste_Image.png
6导航栏
- navbar：导航栏的基类，用于<nav>元素
- navbar-default：导航栏默认样式，用于<nav>元素
- container：是<nav>的子元素，导航栏内容都放入其中
- navbar-header：导航栏头部样式
- navbar-brand：设置品牌图标样式
- collapse：是折叠导航栏的样式的基类
- nav-collapse：是折叠导航栏样式
- nav：是导航栏的链接基类
- navbar-nav：是导航栏的链接样式
- navbar-form：导航栏表单，可以使表单元素排在同一行
- navbar-left 或 navbar-right：组件排列。导航链接、表单，按钮或文本对齐
- navbar-btn：对于不在<form>中的<button>元素，实现垂直对齐
- navbar-text：对于导航栏的普通文本有了行距和颜色，通常用于<p>元素
- navbar-fixed-top：导航栏固定在顶部，用于<nav>元素，需要为<body>设置padding-top：70px
- navbar-fixed-bottom：导航栏固定在底部，用于<nav>元素，需要为<body>设置padding-bottom：70px
- navbar-static-top：导航栏静止在顶部，用于<nav>元素，会随着滚动条移动而消失
- navbar-inverse：可以实现反色导航栏，用于<nav>元素
Paste_Image.png
Paste_Image.png
