什么是Bootstrap？
bootstrap是一个html/css/js框架，适用于移动设备优先的响应式网页
- HTML:为H5扩展了一些自定义属性data-xx
- CSS: CSS Reset + 几千个class
- JS : 基于jQuery提供了十几个插件函数
bootstrap分为五个部分：
- 起步stratup
- 全局css样式
-
按钮
bootstrap中常用的五种颜色红色->危险 绿色->成功 黄色->警告 浅蓝色->信息 深蓝色->基础的 bootstrap中常用的四个大小 btn-lg -》大 btn-md -》中 btn-sm -》小 btn-xs -》最小 块级按钮 btn-block 调整按钮的位置 pull-right ->右浮动 pull-left ->左浮动 -
图片
img-rounded 圆角
img-circle 圆形
img-thumbnail 缩略图
img-responsive 图片支持响应式布局 -
排版和代码
文本颜色text-danger text-success text-warning text-info text-primary 背景颜色 bg-danger bg-success bg-warning bg-info bg-primary 文本对齐方式 text-left text-right text-center text-justify 文本对齐方式 text-lowercase text-uppercase text-capitalize -
列表
list-unstyled 去掉列表项样式
list-inline 将所有元素放在同一行 -
表格
table-bordered 带边框的table-responsive 响应式表格，注意，使用在table的父元素上，而不是table上 table-striped 隔行变色的表格 table-hover 带悬停效果的表格 -
栅格布局系统
-
1. 所有的行必须放在容器中.container或container-fluid
container
screen>1200px(超大PC显示器-lg) 容器宽1170px
screen>992px(普通PC显示器-md) 容器宽970px
screen>768px(平板显示器-sm) 容器宽750px
screen<768px(手机显示器-xs) 容器宽auto
container-fluid: width:auto+befor+after
2. 分为多行，一行最多分为12列
3. 网页内容只能放在列中，不能放到行中
4. 可以在col中再嵌套row
5. col分为四大类 col-xs-i col-sm-i col-md-i col-lg-i， i值可以为1-12，值为某个列的宽度
6. 可以为一个列指定不同屏幕下的宽度
7. col-lg-i 大PC
col-md-i 大PC 普通PC
col-sm-i 大PC 普通PC 平板
col-xs-i 大PC 普通PC 平板 手机
8. hidden-lg 大PC
hidden-md 普通PC
hidden-sm 平板
hidden-xs 手机
9. 列的偏移问题
col-xs-offset-i 大PC 普通PC 平板 手机
col-sm-offset-i 大PC 普通PC 平板
col-md-offset-i 大PC 普通PC
col-lg-offset-i 大PC
一行中放一列
一行中放多列
一个行中指定不同宽度的列
一个列中指定不同屏幕下的不同宽度
不同屏幕下列宽的有效范围
- 表单
1. bootstrap中的表单分为三种
1) 默认表单
<form>
<div class="form-group">
<label class="control-label"></label>
<input class="form-control">
<span class="help-control"></span>
</div>
//bootstrap指定：单选和双选按钮要放到label标签中
<div class="checkbox">
<label>
<input type="checkbox">我接受本站的使用条款
</label>
</div>
</form>
2) 行内表单
给表单添加form-inline即可
3) 水平表单
默认的栅格系统：container->row->col-*
默认的栅格系统：form-horizontal->form-group->col-*
- 组件component
1)bootstrap-组件-图标字体
1.glyphicons是一套收费的图标字体，提供了web/移动开发中常用的小图标
2. bootstrap中可以免费使用这套字体中的250+个，以服务器端字体形式出现的
3. 图标字体的本质不是图片，而是字体
4. glyphicon 图标字体只能用于空元素-不能包含任何内容或子元素；
5. 用法
<span class="glyphicon glyphicon-user"></span>
字体文件夹fonts必须跟html文件同级
2). bootstrap-组件-按钮组
btn-group 水平按钮组
btn-group-vertical 竖直按钮组
btn-group btn-group-justified 水平且两端对齐的按钮组
btn-group-lg
btn-group-xm
btn-group-xs
3). bootstrap-组件-下拉菜单 重点简单
1. 必须html结构
<div class="dropdown"> 相对定义的父元素
<a data-toggle="dropdown">触发元素</a>
<ul/div class="dropdown-menu">隐藏元素</ul/div> 绝对定位
</div>
2.
divider 分割线
dropdown-header 分类头
4). bootstrap-组件-导航 重点简单
1. 标签页导航
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li ><a href="#">Profile</a></li>
<li ><a href="#">Messages</a></li>
</ul>
data-toggle="tab" 用于切换
2. 胶囊式导航 用于ul
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li ><a href="#">Profile</a></li>
<li ><a href="#">Messages</a></li>
</ul>
3. 两端对其的导航 nav nav-tabs nav-justified
4. 竖直放置的胶囊导航 nav nav-pills nav-stacked
```
- 插件plugin
- 定制customize
网友评论