Bootstrap
- 开源框架,web 前端框架
- 支持响应式布局,一个网站兼容多种终端
- css 文件、js 文件、fonts 字体文件
- 使用 html5 文档,移动设备优先
<meta name="viewport" content="width=device-width,initial-scale=1">
- 将 css 引入
- 所有 js 插件都要依赖与 jQuery 库,先引入 jQuery 再引入 bootstrap.js
全局 css 样式
- 直接使用类名 class,默认容器大小
- .container 固定宽度、.container-fluid 占满容器 100%宽度,类似版心
排版样式
- .h1~.h6 样式,同标签样式类
- strong、b 加粗标签
- em、i 斜体
- del、s 删除线
- ins、u 下划线
- .text-left 文本水平居左对齐 默认
- .text-center 文本水平居中
- .text-right 文本水平居右
- .text-uppercase 小写转大写
- .text-lowercase 大写转小写
- .text-capitalize 首字母大写
列表样式
- .list-unstyled 除去项目前符号,除去列表默认 margin
- .list-inline 将列表中的内容排列成同一行 增加了少量 padding 值
- .dl-horizontal 给定义列表使用,将定义标题与定义描述信息排列在同一行,将 dt 标记与 dd 标记里面的内容排列在同一行
表格样式
- .table 给 table 标签添加,可赋予基本样式,少量的内补 padding 和水平方向的分割线,多类名直接后面添加
- .table-bordered 为表格和其中的每个单元格增加边框线
- .table-striped 实现隔行变色效果
- .table-hover 实现鼠标放上效果
- .table-condensed 紧凑型表格,将 padding 值减半
- 状态类给 tr、td、th 设置颜色,不能给 table 设置颜色
- .active 鼠标悬停时的颜色
- .success 标识成功或者积极的动作
- .info 标识普通的提示信息或动作
- .warning 标识警告或需要用户注意
- .danger 标识危险或潜在的带来负面影响的动作
按钮样式
- .btn 表示按钮 是所有按钮的父类名
- .btn-default 默认样式的按钮
- .btn-primary 重要的按钮
- .btn-success 成功的按钮
- .btn-danger 危险的按钮
- .btn-warning 警告的按钮
- .btn-info 一般信息的按钮
- .btn-link 链接状态的按钮
- .btn-lg 超大按钮
- .btn-sm 小按钮
- .btn-xs 超小按钮
图片样式
响应式图片
- .img-responsive 响应式的图片,跟随浏览器大小变化,只能给 img 标签设置
图片形状
- .img-rounded 圆角矩形的图片
- .img-circle 圆形图片
- .img-thumbnail 圆角边框的图片,响应式,跟随浏览器大小变化
栅格系统
- 流式栅格系统,随屏幕或 viewport 尺寸的增加,系统会自动分为最多 12 列,栅格系统用于通过一系列的行.row 与列.col 的组合来创建页面布局,内容就可以放入这些创建好的布局,行 row 必须包含在.container 固定宽度或者.container-fluid 100%宽度中
- 一行最多 12 列,多出来的会自动换行
栅格参数-依据响应式添加类
- .col-xs-超小屏幕(手机),列最多 12 同下
- .col-sm-小屏幕(平板)
- .col-md-中等屏幕(桌面显示器)
- .col-lg-大屏幕(大桌面显示器)
- .col-xx-n n 表示一个单元格占据几列
列偏移
- .col-xx-offset-n,n表示偏移的格子数相对于左边偏移
嵌套列
表单格式(类 table)
- .form-group 表单组,表示行(类似 row)
- .form-control 给 input、textarea、select 元素都将被默认设置宽度属性为 100%,圆角边框
- .form-inline 内联表单 ,一定是给 form 标签设置
- .form-horizontal 水平排列的表单,通过为表单添加这个类与栅格系统联合使用,可以将 label 标签(用户名等提示)和控件组水平并排布局,改变了.form-group 的行为,使其表现为栅格系统中的行 row,所以无需加.row 类
- .sr-only,主要给 label 设置中,将 label 隐藏起来(用户名)
组件
- 包括字体图标、下拉菜单、导航
- 官网有样式和类名,bootstrap 免费使用组件,fonts 文件夹下的文件生成的
- 字体图标
- 三角图标.caret 等
下拉菜单
- .dropdown 将下拉菜单触发器和下拉菜单都包裹在这个类下
- data-toggle 属性:下拉菜单触发器,值为 dropdown,给按钮设置
- .dropdown-menu 给 ul 标签设置下拉菜单的样式,下拉菜单整个项
- .dropdown-header 用于设置下拉菜单的标题,不可选的标题
- divider 设置水平分割线
- .disabled 为下拉菜单 li 元素添加此类,则会禁用此项