前端Bootstrap笔记（一）

一.基本的HTML模板

Bootstrap的HTML标准模板

Hello, world!

二.Bootstrap框架的全局样式
1.移除body的margin声明
2.设置body的背景色为白色
3.为排版设置了基本的字体、字号和行高
4.设置全局链接颜色，且当链接处于悬浮“:hover”状态时才会显示下划线样式

三.如何禁止响应式布局
1.移除此 CSS 文档中提到的设置浏览器视口（viewport）的标签：
2.通过为 .container 类设置一个 width 值从而覆盖框架的默认 width 设置，例如 width: 970px !important; 。请确保这些设置全部放在默认的 Bootstrap CSS 文件的后面。注意，如果你把它放到媒体查询中，也可以略去 !important
3.如果使用了导航条，需要移除所有导航条的折叠和展开行为
4.对于栅格布局，额外增加 .col-xs- 类或替换掉 .col-md- 和 .col-lg-*。不要担心，针对超小屏幕设备的栅格系统能够在所有分辨率的环境下展开
针对 IE8 仍然需要额外引入 Respond.js 文件（由于仍然利用了浏览器对媒体查询（media query）的支持，因此还需要做处理）。这样就禁用了 Bootstrap 对移动设备的响应式支持

四.Bootstrap中的标题默认样式
元素字体大小计算比例其他
h1 36px 14px2.60 margin-top:20px;
h2 30px 14px2.15 margin-bottom:10px;
h3 24px 14px*1.70

h1      18px 14px*1.25   margin-top:10px;
h2      14px 14px*1.00   margin-bottom:10px;
h3      12px 14px*0.85   
在Bootstrap中为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6六个类名

Bootstrap标题一
Bootstrap标题二
Bootstrap标题三
Bootstrap标题四
Bootstrap标题五
Bootstrap标题六

五.标题和副标题的排版

Bootstrap标题一我是副标题
Bootstrap标题二我是副标题
Bootstrap标题三我是副标题
Bootstrap标题四我是副标题
Bootstrap标题五我是副标题
Bootstrap标题六我是副标题
副标题的一些独特样式
1、行高都是1，而且font-weight设置了normal变成了常规效果（不加粗），同时颜色被设置为灰色（#999）
2、由于内的文本字体在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%

六.Bootstrap中的段落排版
1、全局文本字号为14px(font-size) font-size: 14px;
2.行高为1.42857143（line-height），大约是20px(大家看到一串的小数或许会有疑惑，其实他是通过LESS编译器计算出来的，当然Sass也有这样的功能) line-height: 1.42857143;
3.字体颜色为深灰色(#333)字体为"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family），或许这样的字体对我们中文并不太合适，但在实际项目中，大家可以根据自己的需求进行重置，在此我们不做过多阐述，我们回到这里。该设置都定义在元素上，由于这几个属性都是继承属性，所以Web页面中文本（包括段落p元素）如无重置都会具有这些样式效果
color: #333;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
4.段落背景颜色
background-color: #fff;
5.p元素具有一个上下外边距，并且保持一个行高的高度，有下间隔
margin: 0 0 10px;
如果你对CSS预处理器有所了解，那么你完全可以根据Bootstrap提供的预编译版本LESS(或者Sass)进行自定义排版设置。在Bootstrap中，排版设置的默认值都存在variables.less文件中(Sass版本存在_variables.scss中)的两个变量
LESS版本：@font-size-base: 14px; @line-height-base: 1.428571429; // 20/14
Sass版本：$font-size-base: 14px !default; $line-height-base: 1.428571429 !default; // 20/14
第一条语句用于设置字体大小，第二条语句用于设置行高。系统默认使用这两个值产生整个页面相应的margin、padding和line-height的值。换句话说，你只需要修改这两个变量的值，然后重新编译，就可以自定义自己的Bootstrap排版样式

七.强调内容类.lead
.lead样式
.lead {
margin-bottom: 20px;
font-size: 16px;
font-weight: 200;
line-height: 1.4;
}
@media (min-width: 768px) {/大中型浏览器字体稍大/
.lead {
font-size: 21px;
}
}
如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理
p>我是一个普通的段落，我不需要强调显示。

这部分内容需要特别的强调，我和别人长得不一样。

除此之外，Bootstrap还通过元素标签:、、和给文本做突出样式处理
small,.small {
font-size: 85%; /标准字体的85%,也就是14px 0.85px，差不多12px*/
}
cite {
font-style: normal;
}

八.粗体，文本加粗，斜体
b标签和strong标签
b,strong {
font-weight: bold; /文本加粗/
}
em标签和i标签
em,i{
font-style: italic;
}

九.其他相关的强调类
在Bootstrap中除了使用标签、等说明正文某些字词、句子的重要性，Bootstrap还定义了一套类名，这里称其为强调类名（类似前面说的“.lead”）,这些强调类都是通过颜色来表示强调
text-muted：提示，使用浅灰色（#999）
text-primary：主要，使用蓝色（#428bca）
text-success：成功，使用浅绿色(#3c763d)
text-info：通知信息，使用浅蓝色（#31708f）
text-warning：警告，使用黄色（#8a6d3b）
text-danger：危险，使用褐色（#a94442）
这些类名在实际的样式中只是改变了他们的颜色属性

十.Bootstrap文本对齐风格
在排版中离不开文本的对齐方式。在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格：
左对齐，取值left
.text-left：左对齐
居中对齐，取值center
.text-center：居中对齐
右对齐，取值right
.text-right：右对齐
两端对齐，取值justify
.text-justify：两端对齐

十一.Bootstrap列表样式
1).list-unstyle 去除默认的列表样式风格，去无序列表的点或者是有序列表的序号，额外还把列表的默认左边内距清0
.list-unstyled {
padding-left: 0;
list-style: none;
}
2).list-inline 把垂直排列的列表换成水平列表，而且去掉项目符号（编号），可以制作水平导航菜单
.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
3)定义列表
对于定义列表而言，Bootstrap并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果

标题，有文字加粗效果

标题下的子内容

4).dl-horizontal 自定义列表dl的类名，给定义的列表实现水平居中显示效果
@media (min-width: 768px)

{
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.dl-horizontal dd {
margin-left: 180px;
}
}

十二.代码显示
1)用来显示单行内联代码，会使里面的代码有编辑器的彩色效果
2)
用来显示多行块代码，就像在文档中插入一大段代码的效果
3)用来显示用户输入的代码，代码会变成有键盘效果的黑底白字显示 4).pre-scrollable 代码滚动条，防止代码所占篇幅太大，可以控制代码块区域最大的高度为340px，超出这个宽度Y轴就会出现滚动条 .pre-scrollable { max-height: 340px; overflow-y: scroll; } 十三.Bootstrap表格 1) 一种基础样式 .table:不带边框的普通表格给表格设置了margin-bottom:20px以及设置单元内距在thead底部设置了一个2px的浅灰实线每个单元格顶部设置了一个1px的浅灰实线四种附加样式 .table-striped:斑马线风格的表格隔行有一个浅灰色的背景色 .table-bordered:带边框的表格所有单元格具有一条1px的边框 .table-hover:鼠标悬停高亮的表格当你鼠标悬浮在某一单元格上时，单元格所在行的背景色都会变成浅灰色 .table-condensed:紧凑型的表格单元格没内距或者内距较其他表格的内距更小，重置表格单元格的内距padding的值一种支持响应式的表格 .table-responsive:响应式的表格 2) 表格每一行的类（改变单元格的背景）使用其使用非常的简单，只需要在元素中添加上表对应的类名，就能达到你自己需要的效果 .active 表示当前活动的信息，背景浅灰色 .success：表示成功或正确的行为，背景浅绿色 .info：表示中立的信息或行为，背景浅蓝色 .warning：表示警告，需要特别注意，背景淡黄色 .danger：表示危险或者可能是错误的行为，背景粉红色十四.基础表单 input，select，textarea等元素，在Bootstrap框架中，定制了一个类名.form-control，在使用表单时带上这个类名，为了让控件在各种表单风格中样式不出错 1)宽度变成了100% 2)设置了一个浅灰色（#ccc）的边框 3)具有4px的圆角效果 4)设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化 5)设置了placeholder的颜色为#999 Bootstrap框架默认的表单是垂直显示风格，但很多时候我们需要的水平表单风格实现水平表单效果，必须满足以下两个条件 1)在如果想将复选框和单选按钮需要水平排列，只需在label标签里面加上类名 .checkbox-inline或者.radio-inline 表单控件的大小，下面两个类适用于表单中的input，textarea和select控件 .input-sm 让控件比正常更小 .input-lg 让控件比正常更大简单的禁用表单控件，可以在input标签末尾加上disabled 表单控件验证状态在Bootstrap框架中同样提供这几种效果，在使用时只需在form-group容器上对应添加状态类名，这几种状态下效果是一样的，只是颜色不同 1、.has-warning:警告状态（黄色） 2、.has-error：错误状态（红色） 3、.has-success：成功状态（绿色）表单验证时的图标icon，可以在对应的状态下添加类名 .has-feedback，注意要和那些状态类名写在一起，并且有一个span标签，参见下面代码表单信息提示控件底部显示，使用类名.help-block，放在一个span标签里控件后面显示，使用类名.help-inline 十五.按钮 Bootstrap中的按钮都是通过button来实现的，通过不同的类名，按钮有不同的颜色样式一般制作按钮除了使用十六.图像在Bootstrap框架中对于图像的样式风格提供以下几种风格： 1、img-responsive：响应式图片，主要针对于响应式设计 2、img-rounded：圆角图片 3、img-circle：圆形图片 4、img-thumbnail：缩略图片图标icon glyphicon网站免费授权给 Bootstrap很多图标，可以免费使用它们原理:Bootstrap框架中的图标都是字体图标，其实现原理就是通过@font-face属性加载了字体。在Bootstrap框架下载包中有一个fonts的目录，这个目录中提供的字体文件就是用于制作icon的字体文件自定义完字体之后，需要对icon设置一个默认样式，在Bootstrap框架中是通过给元素添加“glyphicon”类名来实现，然后通过伪元素“:before”的“content”属性调取对应的icon编码一个搜索图标一个星号图标一个加号图标一个云图标 glyphicon详细图标信息中文地址 http://v3.bootcss.com/components/ 除了使用glyphicon.com提供的图标之外，还可以使用第三方为Bootstrap框架设计的图标字体，如Font Awesome(http://www.bootcss.com/p/font-awesome/)。使用方法和上面介绍的一样，不过记得将字体下载到你本地。十七.Bootstrap网格系统实现原理：网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份在使用的时候大家可以根据实际情况重新编译LESS（或Sass）源码来修改12这个数值（也就是换成24或32，当然你也可以分成更多，但不建议这样使用） Bootstrap框架的网格系统工作原理如下： 1、数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding) 2、在行(.row)中可以添加列(.column)，但row里面的列数之和不能超过平分的总列数，比如12。如果超过，布局就可能不合理了，会以整数3为除数，分为每行三列的布局列组合，简单来讲就是更改数字合并列，有点类似表格中colspan属性只要一行中每列的的col-md之和是12，那么在屏幕宽度足够的时候就会撑开排列，屏幕宽度不够时就会每行一列排列 .col-md-4 .col-md-8 .col-md-4 .col-md-4 .col-md-4 .col-md-3 .col-md-6 .col-md-3 3、具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素 4、通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（margin）来抵消内距(padding)的影响 5、列偏移（有时候我们不想让两列紧靠在一起，但又不想使用margin，就可以用列偏移）使用列偏移也非常简单，只需要在列元素上添加类名“col-md-offset-”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示该列向右移动4个列的宽度，在宽度足够时，列之间会出现间隔实现原理：利用十二分之一（1/12）的margin-left，然后有多少个offset，就有多少个margin-left。 .col-md-offset-12 { margin-left: 100%; } .col-md-offset-11 { margin-left: 91.66666667%; } .col-md-offset-10 { margin-left: 83.33333333%; } .col-md-offset-9 { margin-left: 75%; } .col-md-offset-8 { margin-left: 66.66666667%; } .col-md-offset-7 { margin-left: 58.33333333%; } .col-md-offset-6 { margin-left: 50%; } .col-md-offset-5 { margin-left: 41.66666667%; } .col-md-offset-4 { margin-left: 33.33333333%; } .col-md-offset-3 { margin-left: 25%; } .col-md-offset-2 { margin-left: 16.66666667%; } .col-md-offset-1 { margin-left: 8.33333333%; } .col-md-offset-0 { margin-left: 0; } 使用”col-md-offset-”对列进行向右偏移时，要保证列与偏移列的总数不超过12，不然会致列断行显示 6、列排序列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-”和“col-md-pull-” (其中星号代表移动的列组合数)。push可以理解为从左边推到右边的列数，pull可以理解为从右边拉到左边的列数，这样就可以把两列的位置互换 .col-md-4 .col-md-8 7、列的嵌套可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列（像前面介绍的一样使用列）。但在列容器中的行容器（row），宽度为100%时，就是当前外部列的宽度。注意：嵌套的列总数也需要遵循不超过12列。不然会造成末位列换行显示

前端Bootstrap笔记（一）

Bootstrap教程相关栏目本月热门文章