https://v3.bootcss.com/getting-started/
#css样式
https://v3.bootcss.com/css/
栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局下载reset css 样式： https://necolas.github.io/normalize.css/8.0.1/normalize.css
下载bootsrap样式: https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip栅格系统测试
bootstramp实例1
# col-sm-6 小屏幕显示，小屏幕模式下每个标签占据6个栅格，即显示分两栏
bootstramp实例1
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺
寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更
具语义的布局。
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺
寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更
具语义的布局。
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺
寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更
具语义的布局。
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺
寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更
具语义的布局。
bootstramp实例1
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺
寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更
具语义的布局。
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺
寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更
具语义的布局。
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺
寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更
具语义的布局。
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺
寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更
具语义的布局。
将一行分成4个方框
添加类名 class="thumbnail" 就能实现
bootstramp实例1
媒体查询
媒体查询实例
clearfix
clearfix
col-xs-6
col-xs-6
col-xs-6
col-xs-6
col-xs-6
col-xs-6
最后效果图
第一个div标签的高度是其他标签的2倍，占据了第一行，第二行的6个栅格，如果设置了
则 第二行右边的6个栅格就不会被下面的标签占据如果没有设置，那么页面中第二行右边的6个栅格就会被下面的标签给填上
列偏移及列排序
列偏移
添加类名
class="col-md-offset- "
class="col-md-pull- "
列偏移
列排序
添加类名
class="col-md-push- "
clearfix
我要居中
//将标签调换顺序
我要在右边
我要在左边
常用操作
# 初始化格式
Title
页面主题
# 标题(h1-h6) 小号文本(small)
老男孩教育 上海分校区
在苍茫的大海上，在乌云和大海之间，海燕像黑色的闪电，在苍茫的大海上，在乌云和大海之间，海燕像黑色的闪电，在苍茫的大海上，在乌云和大海之间，海燕像黑色的闪电，在苍茫的大海上，在乌云和大海之间，海燕像黑色的闪电
# lead 表示衷心内容
在苍茫的大海上，在乌云和大海之间，海燕像黑色的闪电，在苍茫的大海上，在乌云和大海之间，海燕像黑色的闪电，在苍茫的大海上，在乌云和大海之间，海燕像黑色的闪电，在苍茫的大海上，在乌云和大海之间，海燕像黑色的闪电
# mark标签高亮显示
老男孩教育 深圳校区开班了
# 被删除的文本
被删除的文本
# 无用文本
无用文本
# 插入文本
插入文本
# 带下划线的文本
待下划线的文本
# strong标签加粗
老男孩教育 深圳校区 开班了
# 斜体
老男孩教育 深圳校区 开班了
# 对齐
1. 居中
老男孩教育 深圳校区 开班了
2. 左对齐
老男孩教育 深圳校区 开班了
3. 右对齐
老男孩教育 深圳校区 开班了
4. 两端对齐
老男孩教育 深圳校区 开班了
5. 没有空格
老男孩教育 深圳校区 开班了
# 改变大小写
1. 全部大写
owen is sb
2. 全部小写
Owen is Sb
3. 全部首字母大写
owen is sb
# 基本缩略语
SHS1
# 首字母缩略语
SHS1
# 地址
老男孩教育
康桥东路298号
上海浦东新区
P: (123) 3453-322323
# 默认样式的引用 将任何 HTML 元素包裹在 中即可表现为引用样式。对于直接引用，我们建议用 标签。
owen is sb
# 多种引用样式 对于标准样式的 ，可以通过几个简单的变体就能改变风格和内容。
# 添加
描述
# 上面是人名，西面是描述信息
- 胡大鹏
- 大SBadsdfsjklsdfgijhklldfgjkljkdfgljkdfgljkdfg
- 胡二鹏
- 二SBsdfagiohdfgoidfgoijgdfsljkdfgkljlksdf
- 胡小鹏
- 小SBdfgkljljkdfglkjfd;jklsdfg;kjldfgsl;jkfd
# 定义class="dl-horizontal" 左边是人名 右边是描述信息
- 胡大鹏
- 大SBadsdfsjklsdfgijhklldfgjkljkdfgljkdfgljkdfg
- 胡二鹏
- 二SBsdfagiohdfgoidfgoijgdfsljkdfgkljlksdf
- 胡小鹏
- 小SBdfgkljljkdfglkjfd;jklsdfg;kjldfgsl;jkfd
代码
# 在页面上显示
<div>
<div>
# 页面中将shift渲染成一个按钮
帮助信息：按住 shift就支持批量操作啦！
# 代码块 pre 标签
print('hello shenzheng, 骑士计划')
# 变量 y=mx+b2
y=mx+b2
# 程序输出
This is a dog named 胡鸿鹏
表格
table标签的操作
class=table 表格样式
class=table-bordered 表格边框
class=table-hover 悬浮效果
class=table-striped 隔行变色
table-condensed 单元格之间更紧凑
tr行操作 鼠标悬停时候的各种颜色
class=active
class=success
class=info
class=warning
class=danger
序号
姓名
爱好
1
胡鸿鹏
黄色
2
胡二鹏
绿色
2
胡三鹏
红色
序号
姓名
爱好
1
胡鸿鹏
黄色
2
胡二鹏
绿色
2
胡三鹏
红色
按钮
普通按钮
彩色按钮
不同尺寸的按钮
块级按钮
通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
图片
设置标签内的字体颜色和背景颜色
世情薄
人情恶
雨送黄昏花易落
晓风干
泪痕残
欲笺心事
独语斜阑
难 难 难
人成各
今非咋
病魂常似秋千索
角声寒
怕人寻间
咽泪装欢
瞒 瞒 瞒
表单
简单登录界面设计
Title
请登录
登录界面设计 用户名为空给用户返回提示信息
用户名不能为空
Title
请登录
登录界面设计 用户名为空给用户返回提示信息并变色
用户名不能为空
Title
请登录
登录界面设计 一点击用户名表单，所有报错信息消失
Title
请登录
登录界面设计 修改按钮样式
# 通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素
Title
请登录
图标
默认图标
https://v3.bootcss.com/components/
通过font awesome 设置图标
http://fontawesome.dashgame.com
图标
设置基本图标
使用 fa-lg (33%递增)、fa-2x、 fa-3x、fa-4x，或者 fa-5x 类 来放大图标。
导航菜单
使用 fa-fw 可以将图标设置为一个固定宽度。主要用于不同宽度图标无法对齐的情况。 尤其在列表或导航时起到重要作用。
列表
使用 fa-ul 和 fa-li 便可以简单的将无序列表的默认符号替换掉。
- 第1项
- 第2项
- 第3项
- 第4项
- 第5项
组合图标
登录注册图标
进度条
面板
信息收集卡
基本信息