演示代码较多,可以复制进行操作演示,但要注意加载的文件需要根据自己电脑的文件路径进行加载!!!
列表(list):
list-unstyled:无样式列表
list-inline:内联样式列表
列表组:
ul:list-group
li:list-group-item列表项公共样式
list-group-item-[danger|warning|info|success]列表具体
样式;
代码演示:=>
Bootstrap
列表样式
无样式列表
- 小碗面
- 宫保鸡丁
- 三瓶啤酒
- 醉三鲜
内联样式列表
- 冰箱
- 电视
- 洗衣机
- 微波炉
- 橱柜
列表组
- 第一篇博客
789456
- 第二篇博客
689456
- 第三篇博客
589456
489456第四篇博客
class="badge">389456
----------------------
徽章(badge):
----------------------
表格(table):
table-responsive:表格自适应(声明在表格父元素中),指如果页面的宽度
小于表格本身的宽度,则父元素展示水平方向的滚动条;
table:表格的公共样式;
table-bordered:边框样式;
table-condensed:紧凑行高;
table-striped:斑马线;
table-hover:鼠标滑过行(tr),高亮显示;
代码演示:=>
Bootstrap
表格！
ID
用户名
邮箱
操作菜单
1
张三丰
[email protected]
2
张敏
[email protected]
3
张翠山
[email protected]
----------------------
表单(form):
sr-only:隐藏元素,只在屏幕阅读器显示(screen reader only)
表单样式:
form-inlink:内联样式
form-horizontal:水平表单
form-group:包裹单个表单元素
文子标题:label.control-label
表单元素:form-control
提示消息:span.help-block
代码演示:=>
Bootstrap
表单样式
形式一:默认表单样式
用户名:
用户名必须填写
密码:
class="form-control">
密码必须填写
七天免密码登录(记住我)
形式二:内联表单
用户名:
密码:
class="form-control" placeholder="请输入密码">
七天免密码登录(记住我)
形式三:水平表单样式
用户名:
class="form-control">
用户名必须填写
密码:
class="form-control">
密码必须填写
七天免密码登录(记住我)
----------------------
图标(glyphicon):
glyphicon 公共基础样式
glyphicon-{
user:用户头像
search:放大镜
ok:对号
remove:叉号
....
}
官网:http://glyphicons.com/
------------------
警告框:
alert:公共样式;
alert-[danger|info|success|warning]具体样式
data-dismiss="alert":关闭菜单属性
------------------
下拉菜单:
dropdown:外围容器
data-toggle="dropdown":属性选择器
ul.dropdown-menu:下拉内容
:向下指向三角
dropdown-header:下拉菜单头部
divider:分割线
------------------
折叠插件:
菜单:
#内容id: 声明触发菜单操作的目标元素;
data-toggle="collapse":触发菜单的属性选择器;
-------------------
手风琴(accordion):
面板组件+折叠插件
代码演示:=>
08_accordion
-------------------
导航条(navbar):
navbar: 公共样式
navbar-[default|inverse]:具体样式;
navbar-fixed-[top|bottom]:垂直定位;
navbar-[right|left]:水平定位;
navbar-header:汉堡包菜单(折叠插件的触发菜单)a.navbar-brand;
nav:->navbar-nav:下拉菜单样式
代码演示:=>
09_navbar
