手记

前端Bootstrap笔记(一)

一.基本的HTML模板
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<!-- 让IE 运行最新的渲染模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 可视化窗口,宽度等于设备的宽度,缩放比例为1,也就是不缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap的HTML标准模板</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--你自己的样式文件 -->
<link href="css/your-style.css" rel="stylesheet">
<!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询,如果不需要用可以移除 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>

        <!-- 如果要使用Bootstrap的js插件,必须先调入jQuery -->
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
        <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 -->
        <script src="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 14px
2.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>

五.标题和副标题的排版
<!--Bootstrap中使用了<small>标签来制作副标题-->
<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)
<!-- 此处添加了一个媒体查询,当屏幕宽度大于768px时,类名才具有水平定义列表的效果
1、将dt设置了一个左浮动,并且设置了一个宽度为160px
2、将dd设置一个margin-left的值为180px,达到水平的效果
3、当标题宽度超过160px时,将会显示三个省略号
-->
{
.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列。不然会造成末位列换行显示

12人推荐
随时随地看视频
慕课网APP