首页手记前端Bootstrap笔记（一）

前端Bootstrap笔记（一）

标签：

Bootstrap

一.基本的HTML模板
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap的HTML标准模板</title>

<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/your-style.css" rel="stylesheet">


</head>
<body>
<h1>Hello, world!</h1>

        <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
        <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
        <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
        <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    </body>
</html>

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

三.如何禁止响应式布局
1.移除此 CSS 文档中提到的设置浏览器视口（viewport）的标签：<meta>
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中让非标题元素和标题使用相同的样式-->
<div class="h1">Bootstrap标题一</div>
<div class="h2">Bootstrap标题二</div>
<div class="h3">Bootstrap标题三</div>
<div class="h4">Bootstrap标题四</div>
<div class="h5">Bootstrap标题五</div>
<div class="h6">Bootstrap标题六</div>

五.标题和副标题的排版

<h1>Bootstrap标题一<small>我是副标题</small></h1>
<h2>Bootstrap标题二<small>我是副标题</small></h2>
<h3>Bootstrap标题三<small>我是副标题</small></h3>
<h4>Bootstrap标题四<small>我是副标题</small></h4>
<h5>Bootstrap标题五<small>我是副标题</small></h5>
<h6>Bootstrap标题六<small>我是副标题</small></h6>
副标题的一些独特样式
1、行高都是1，而且font-weight设置了normal变成了常规效果（不加粗），同时颜色被设置为灰色（#999）
2、由于<small>内的文本字体在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），或许这样的字体对我们中文并不太合适，但在实际项目中，大家可以根据自己的需求进行重置，在此我们不做过多阐述，我们回到这里。该设置都定义在<body>元素上，由于这几个属性都是继承属性，所以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>我是一个普通的段落，我不需要强调显示。</p>
<p class="lead">这部分内容需要特别的强调，我和别人长得不一样。</p>
除此之外，Bootstrap还通过元素标签:<small>、<strong>、<em>和<cite>给文本做突出样式处理
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中除了使用标签<strong>、<em>等说明正文某些字词、句子的重要性，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并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果
<dl>
<dt>标题，有文字加粗效果</dt>
<dd>标题下的子内容</dd>
</dl>
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)<code></code>用来显示单行内联代码，会使里面的代码有编辑器的彩色效果
2)<pre></pre>用来显示多行块代码，就像在文档中插入一大段代码的效果
3)<kbd></kdb>用来显示用户输入的代码，代码会变成有键盘效果的黑底白字显示
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) 表格每一行的类（改变单元格的背景）
使用其使用非常的简单，只需要在<tr>元素中添加上表对应的类名，就能达到你自己需要的效果
.active 表示当前活动的信息，背景浅灰色
.success：表示成功或正确的行为，背景浅绿色
.info：表示中立的信息或行为，背景浅蓝色
.warning：表示警告，需要特别注意，背景淡黄色
.danger：表示危险或者可能是错误的行为，背景粉红色

十四.基础表单
input，select，textarea等元素，在Bootstrap框架中，定制了一个类名.form-control，在使用表单时带上这个类名，为了让控件在各种表单风格中样式不出错
1)宽度变成了100%
2)设置了一个浅灰色（#ccc）的边框
3)具有4px的圆角效果
4)设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化
5)设置了placeholder的颜色为#999
Bootstrap框架默认的表单是垂直显示风格，但很多时候我们需要的水平表单风格
实现水平表单效果，必须满足以下两个条件
1)在<form>元素是使用类名 .form-horizontal
1)设置表单控件padding和margin值
2)改变“form-group”的表现形式，类似于网格系统的“row”
2)配合Bootstrap框架的网格系统
将表单的控件都在一行内显示 .form-inline
将label标签里面的内容隐藏，.sr-only 方便盲人使用屏幕阅读器时听到placeholder里面的提示内容
下拉框多行显示
只需要在select中添加一个属性 multiple
<select multiple class="form-control">
文本域textarea
和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。
复选框checkbox和单选择按钮radio混合使用，出现对齐问题
在整个选框的外面加上类名 .checkbox，不管是checkbox还是radio都使用label包起来checkbox连同label标签放置在一个名为“.checkbox”的容器内，radio连同label标签放置在一个名为“.radio”的容器内
<form>
div class="checkbox">
<label>
<input type="checkbox" value="">
记住密码
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
喜欢
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
不喜欢
</label>
</div>
</form>
如果想将复选框和单选按钮需要水平排列，只需在label标签里面加上类名 .checkbox-inline或者.radio-inline

表单控件的大小，下面两个类适用于表单中的input，textarea和select控件
.input-sm   让控件比正常更小
.input-lg   让控件比正常更大
简单的禁用表单控件，可以在input标签末尾加上disabled
<input class="form-control input-lg" id="disabledInput" type="text" placeholder="表单已被禁用，不可输入" disabled>
表单控件验证状态
    在Bootstrap框架中同样提供这几种效果，在使用时只需在form-group容器上对应添加状态类名，这几种状态下效果是一样的，只是颜色不同
    1、.has-warning:警告状态（黄色）
    2、.has-error：错误状态（红色）
    3、.has-success：成功状态（绿色）
    表单验证时的图标icon，可以在对应的状态下添加类名 .has-feedback，注意要和那些状态类名写在一起，并且有一个span标签，参见下面代码
<form role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess1">成功状态</label>
    <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
  <div class="form-group has-warning has-feedback">
    <label class="control-label" for="inputWarning1">警告状态</label>
    <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
  </div>
  <div class="form-group has-error has-feedback">
    <label class="control-label" for="inputError1">错误状态</label>
    <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
  </div>
</form>
表单信息提示
控件底部显示，使用类名.help-block，放在一个span标签里
控件后面显示，使用类名.help-inline

十五.按钮
Bootstrap中的按钮都是通过button来实现的，通过不同的类名，按钮有不同的颜色样式
一般制作按钮除了使用<button>标签元素之外，还可以使用<input type="submit">和<a>标签等。同样，在Bootstrap框架中制作按钮时，除了刚才所说的这些标签元素之外，还可以使用在其他的标签元素上，唯一需要注意的是，要在制作按钮的标签元素上添加类名“btn”。如果不添加是不会有任何按钮效果。虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格，但个人并不建议这样使用，为了避免浏览器兼容性问题，个人强烈建议使用button或a标签来制作按钮。
.btn 标准的普通灰色按钮
.btn .btn-default 默认按钮
.btn .btn-primary 主要按钮
.btn .btn-info 成功按钮
.btn .btn-success 信息按钮
.btn .btn-warning 警告按钮
.btn .btn-danger 危险按钮
.btn .btn-inverse 倒转按钮
.btn .btn-link 链接按钮
还可以加上改变按钮大小的类名
.btn-lg 大型按钮
.btn-sm 小型按钮
.btn-xs 短小型按钮
有时候我们想让按钮独占一行，可以加上类名，.btn-block，把按钮变成块状按钮
这样按钮的宽度就可以充满整个父容器（width:100%）
按钮的状态
按钮的活动状态主要包括悬浮状态（:hover），点击状态（:active），焦点状态（:focus）
.btn:focus,
.btn:active:focus,
.btn.active:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn:hover,
.btn:focus {
color: #333;
text-decoration: none;
}
.btn:active,
.btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
按钮的禁用状态禁用状态与其他状态按钮相比，就是背景颜色的透明度做了一定的处理，opcity（浑浊）的值从100%调整为65%
在Bootstrap框架中，要禁用按钮有两种实现方式：
方法1：在标签中添加disabled属性
方法2：在元素标签中添加类名 disabled
两种方式的区别是：
.disabled样式不会禁止按钮的默认行为，比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为，则需要通过JavaScript这样的语言来处理。对于<a>标签也存在类似问题，如果通过类名“.disable”来禁用按钮，其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。
<button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button>
<button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</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编码
一个搜索图标<span class="glyphicon glyphicon-search"></span>
一个星号图标<span class="glyphicon glyphicon-asterisk"></span>
一个加号图标<span class="glyphicon glyphicon-plus"></span>
一个云图标<span class="glyphicon glyphicon-cloud"></span>
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)
<div class="container">
<div class="row"></div>
</div>
2、在行(.row)中可以添加列(.column)，但row里面的列数之和不能超过平分的总列数，比如12。如果超过，布局就可能不合理了，会以整数3为除数，分为每行三列的布局
列组合，简单来讲就是更改数字合并列，有点类似表格中colspan属性
只要一行中每列的的col-md之和是12，那么在屏幕宽度足够的时候就会撑开排列，屏幕宽度不够时就会每行一列排列
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">.col-md-8</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-3">.col-md-3</div>
</div>
</div>
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可以理解为从右边拉到左边的列数，这样就可以把两列的位置互换
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8">.col-md-4</div>
<div class="col-md-8 col-md-pull-4">.col-md-8</div>
</div>
</div>
7、列的嵌套
可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列（像前面介绍的一样使用列）。但在列容器中的行容器（row），宽度为100%时，就是当前外部列的宽度。注意：嵌套的列总数也需要遵循不超过12列。不然会造成末位列换行显示