strongHTML5 文档类型： html lang="zh-CN"
移动设备优先:
确保适当的绘制和触屏缩放，需要在 head 之中添加 viewport 元数据标签。 meta name="viewport" content="width=device-width, initial-scale=1"
IE 兼容模式
Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下， 建议将此 标签加入到你的页面中：meta http-equiv="X-UA-Compatible" content="IE=edge"
4 布局：
布局容器
.container 类用于固定宽度并支持响应式布局的容器。
...
.container-fluid 类用于 100% 宽度，占据全部视口(viewport)的容器。
...
手机
.col-xs-12
平板
.col-sm-6
电脑
.col-md-8
超大屏
.col-lg-8
栅格系统
流式：
row 必须放到 container和 container-fluid 里面
col 放在 row
不同的设备：
col-md-6 col-xs-4
col-md-6 col-xs-8
列嵌套
container -- 有一个 15px的padding
里面的 内标签 可以 设置 margin -15px
clearfix
另起一行
列偏移：
col-md-offset-3
列排序：
col-md-3 col-md-push-9
排版实例：
到
Secondary text
中心内容 加粗
通过添加 .lead 类可以让段落突出显示。
sadsadasdsadsa
高亮：
highlight
被删除：
This line of text is meant to be treated as deleted text.
没用的标签：
This line of text is meant to be treated as no longer accurate.
插入标签：
This line of text is meant to be treated as an addition to the document.
带下划线的标签：
This line of text will render as underlined
小号文本
This line of text is meant to be treated as fine print.
着重
rendered as bold text
斜体
rendered as italicized text
对齐
Left aligned text.
Center aligned text.
Right aligned text.
Justified text.
No wrap text.
改变大小写
Lowercased text.
Uppercased text.
Capitalized text.
缩略语
attr
首字母缩略语
HTML
地址
Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Full Name
引用 左边有一条竖线
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
多种引用样式
命名来源
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
右边有一条 竖线
...
列表 ：
无序列表
- ...
有序列表
- ...
无样式列表
- ...
内联列表
- ...
描述
-
...
- ...
水平排列的描述
-
...
- ...
内联代码
通过 标签包裹内联样式的代码片段。
<section>
用户输入
通过 标签标记用户通过键盘输入的内容。
ctrl + ,
代码块
多行代码可以使用
标签。为了正确的展示代码，注意将尖括号做转义处理。
<p>Sample text here...</p>
变量
通过 标签标记变量。
y = mx + b
y = mx + b
程序输出
通过 标签来标记程序输出的内容。
This text is meant to be treated as sample output from a computer program.
表格:
基本实例
...
条纹状表格
通过 .table-striped 类可以给
之内的每一行增加斑马条纹样式。...
带边框的表格
添加 .table-bordered 类为表格和其中的每个单元格增加边框。
...
鼠标悬停
通过添加 .table-hover 类可以让
中的每一行对鼠标悬停状态作出响应。...
紧缩表格
通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补(padding)均会减半。
...
状态类
通过这些状态类可以为行或单元格设置颜色。
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
响应式表格:
其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
...
表单
基本实例
Email address
Password
File input
Example block-level help text here.
Check me out
Submit
内联表单
为
元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。Name
Send invitation
Bootstrap3居中处理：
水平居中：
- .center-block 不涉及到列的居中 本质上就是 margin: 0 auto
让那个标签居中就把它写在哪个标签的样式类中
- 我们自定义的居中 在涉及到列的居中时使用
.col-centered {
float: none;
margin: 0 auto;
}
- 文本类居中或者display: inline
.text-center
垂直居中：
.vertical-center {
display: flex;
align-items: center;
}
用在父标签中，让子块级标签垂直居中
Bootstrap组件：
图标：
span标签，里面加上样式类
glyphicon glyphicon-piggy-bank
下拉菜单： 后面我们就要用到bootstrap.js --> 之前还要引用jQuery.js
按钮组
.btn-group
.btn-toolbar
尺寸
分列式下拉菜单按钮
.css 和.min.css的区别是：
.min.css是压缩版的，用于生产环境的，因为它把多余的空格都去掉了，体积很小
.css 是没有压缩的
我们现在是开发阶段，用哪个都可以
.min.js
.js
同上
js文件我们通常放在body标签里面的最下面
除非你的js代码就必须在文档加载之前运行，这个时候要放在head标签里面
导航
******
Title.nav-tabs --> tab式
.nav-pills --> 胶囊式
.nav-justified --> 两端对齐
导航条
.navbar-btn
.navbar-text
.navbar-left .navbar-right --> 在导航条里面用左右浮动的化需要使用这俩个
.navbar-link
**导航条不需要放在.container里面**
.navbar-fixed-top --> 固定在顶部
如果使用了上面固定在顶部的样式，那么就需要给body设置padding
body { padding-top: 70px; }
.navbar-static-top --> 静止在顶部
.navbar-inverse --> 反色
面包屑导航/路径导航
分页
翻页
标签
.label
徽章
微信未读消息
个人中心通知的提示
巨幕
铺满整个屏幕
页头
缩略图 --> 前女友的页面
进度条
应用场景：
- 上传下载加载
- 体现步骤进度
.progress-bar-striped 条纹状进度条
动起来
.active
颜色
.progress-bar-success
.progress-bar-warning
.progress-bar-info
.progress-bar-danger
媒体对象
后面写项目会用到
.media-left
.media-body
.media-right
头像的位置：
.默认
.media-middle --> 中间
.media-bottom --> 底部
列表组
外面的div加这个样式： .list-group
里面的元素加这个样式: .list-group-item
面板
这里写标题
这里面是内容
扫一扫
5231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
