一。全局css样式
1.1.html5文档类型:bootstrap使用到的某些html和css属性需要将页面设置为html5文档类型
1.2.移动设备优先,为了适当的绘制和触屏缩放,需要在<head>中添加viewport元数据标签
1.3排版与链接:bootstrap排版,链接样式设置了基本的全局样式,,在scaffolding.less中能找到相关的源码
为了增强浏览器的一致性,bootstrap使用了normalize.css这个重置样式库
1.4 布局容器 : .container(固定宽度响应式布局) .container-fluid(100%宽度,流式布局),两种容器不能嵌套
1.5栅格系统 ————> 通过一系列的行(row)和列(column)的组合来创建页面布局
工作原理:
行(row)必须包含在容器(container/container-fluid)中,
通过行(row)在水平方向创建一组列(column),
内容放在列(column)当中,并且只有列能作为行(row)的直接子元素,
通过为列设置padding,,从而创建列与列之间的距离,通过为row元素设置负值margin,从而抵消掉为.container容器设置的padding
栅格系统中的列是通过指定1-12的值来表示其跨度,如果一行中包含的列大于12,多余的列将被作为一个整体另起一行排列
1.6 媒体查询:在栅格系统中,我们可以使用媒体查询来创建关键的分界点阙值,将css的影响限制在更小范围的屏幕大小之内
1.7 栅格参数: 超小屏(<768px) 小屏(768-992) 中屏(992-1200) 大屏(>1200px)
.container最大宽度 自动 750px 970px 1170px
类前缀 col-xs- col-sm- col-md- col-lg-
槽宽 30px 每列差不多左右都有15px
1.8 列偏移 col-md-offset-1 向右侧偏移一个列的宽度
1.9 嵌套列 可以通过在列(column)里添加行(row)和列(column)元素,实现栅格系统的嵌套
1.10 列排序 .col-md-pull-n (向前移动n列) .col-md-push-n(向后移动n列)
二。排版
2.1 标题 html中的所有标题标签均可用,另外还提供了.h1-.h6的类来给文本赋予标题的样式
h1 36px h2 30px h3 24px h4 18px h5 14px h6 12px
副标题<small>或者类.small
2.2页面主体
bootstrap将全局的font-size:设置为14px ,行高设置为1.428(~= 20px)
p元素被设置了1/2行高的底部外边距
2.3 中心内容 添加.lead让段落突出显示
2.4 内联文本元素
<mark></mark> <del></del> <s></s> <ins></ins> <u></u> <small></small> .small <strong></strong> <em></em>
对齐:text-left text-center text-right text-justify(每行排齐) text-nowrap(不换行)
改变大小写:text-lowercase text-uppercase text-capitalize
缩略语:基本缩写语:<abbr title="attribute">attr</abbr>
首字母缩写语:为缩写语添加.intiialism类,可以让font-size变得更小一点
<abbr title="HyperText Markup Languge">HTML</abbr>
地址:<address>每行结尾用<br>可以保留需要的样式
引用:<blockquote> 赋予.blockquote-reverse可以让引用呈现右对齐的效果
人生需自重
<footer>来自中国古代作家<cite title=‘huangzongxi’>黄宗羲</cite></footer>
</clockquote>
2.5列表
.list-unstyled 去除左侧外边距和点
list-inline 在一行显示
<dl>中的 .dl-horizontal 标题及描述在一行显示
三。代码
3.1 内联代码 <code><setion></code> 在页面上 <section>
3.2用户输入 通过<kdb>标签标记用户通过键盘输入的内容 <kdb><kdb>ctrl</kdb>+<kdb>v</kdb></kdb> --> ctrl + v
3.3 代码块 <pre><p> document.getElementById()</p></pre>
3.4 变量 用 var标签
3.5程序输出 samp标签
四。表格