首页手记 bootstrap的基础的个人总结

bootstrap的基础的个人总结

标签：

Html/CSS Html5 CSS3

Bootstrap

准备
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">//IE中运行最新的渲染模式
<meta name="viewport" content="width=device-width, initial-scale=1">//移动端虚拟视口中viewport，content="width=device-width宽度等于设备的宽度，initial-scale缩放比例为1，不缩放
<title>Bootstrap的HTML标准模板</title>

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



<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>

<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>
2.全局
bootstrap设置了全局的一些标签，需要更改一些样式直接覆盖；
标题：

行高是1.1，文本颜色字体继承父元素.
<h1-h6>标题</h1-h6>,<div class="h1-h6">标题</div>
副标题：<small>标签
行高都是1，而且font-weight设置了normal变成了常规效果（不加粗），同
时颜色被设置为灰色（#999）,由于<small>内的文本字体在h1~h3内，其大
小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的
75%；
3.段落（正文）
全局文本字号为14px(font-size)，行高为1.42857143（line-height），颜色为深灰色（#333），字体为"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family）；
p标签设置了一个margin值margin：0 0 10px;
4.强调内容
让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。
通过元素标签:<small>、<strong>、<em>和<cite>给文本做突出样式处理。
b，strong:文本加粗；small.small：标准字体的85%，差不多12px；
<cite> 标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题。
5.加粗（<b>,<strong>）
6.斜体（<i>,<em>）
7.强调相关的类：
.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）
8.对齐方式：
.text-left：左对齐
.text-center：居中对齐
.text-right：右对齐
.text-justify：两端对齐
9.列表：
去除小点的列表加入.list-unstyled；
内联列表：没有小点的水平列表：list-inline；
定义列表只是变动了行间距，外边距，字体加粗
10.代码：
<code>：一般是针对于单个单词或单个句子的代码
<pre>：一般是针对于多行代码（也就是成块的代码）
<kbd>:一般是表示用户要通过键盘输入的内容虽然不同的类型风格不一样，但其使用方法是类似的。
当<pre>代码块太大了，篇幅过长么就需要用 .pre-scrollable来规定超出340px之后加入滚动条
11.表格：
.table:基础表格
.table-striped:斑马线表格
.table-bordered:带边框的表格
.table-hover:鼠标悬停高亮的表格
.table-condensed:紧凑型表格
.table-responsive:响应式表格
表格背景颜色（在tr中加入对应的类名即可）：

基本表格：
如果table中不加.table那表格将没有任何效果；
加入.table之后给表格设置了一个margin-bottom:20px以及设置单元内边距；
在thead地步设置了一个2px的浅灰色实线；
每个单元格顶部设置了1px的浅灰实线；
斑马线表格：
<table class="table table-striped">在tbody各行一个浅色的背景色，李永乐css3的：nth-child；
带边框表格：
<table class="table table-bordered">表格所有边框为1px；
鼠标悬浮高亮表格：
<table class="table table-hover">鼠标悬停的单元行高亮，可以与前面的表格类型一
起用；
紧凑型表格：
<table class="table table-condensed">重置了单元格内边距值；内边距8变成5；
响应式表格：
提供了一个容器.table-responsive,把table放入容器内，当浏览器可视区域小于768px时，底部会出现水平滚动条，大于768px滚动条消失；

12.表单：
fieldset 元素可将表单内的相关元素分组。
legend 元素表示作为 legend 元素的父元素的 fieldset 元素的其余内容的标题
（caption）。

.form-control:
宽度变成100%；
设置了一个浅灰色的（#ccc）的边框
具有4px的圆角
设置阴影想过，并且元素得到焦点之时，阴影和边框效果就会有所变化
设置了placeholder的颜色为#999
水平表单：满足的条件
1、在<form>元素是使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统。（网格布局会在以后的章节中详细讲解）
.form-horizontal的作用：
1、设置表单控件padding和margin值。
2、改变“form-group”的表现形式，类似于网格系统的“row”。
type="email"可以对邮箱进行验证
如果需要将表单控件放到一行中，只要在form加入类名form-inline即可，input
全部展示在一行中。原理是将控件设置了display:inline-block;
在input之前加入label，（教程上说label和input如果想让他们不换行显示，需要放在form-group？可是如果不放在form-group中也不会发生换行？那为什么要放进去呢？）需要把它放到容器.form-group中。在label中加入.sr-only为残障人士考虑的，如果没有设置label，那么无法识别，所以label就不会显示???
input的属性：.form-control加入后会美化样式。
下拉框：多行选择设置multiple属性值为multiple，<select multiple class="form-
control">
文本域textarea：文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设
置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属
性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。
复选框checkbox和单选择按钮radio：
1、不管是checkbox还是radio都使用label包起来了
2、checkbox连同label标签放置在一个名为“.checkbox”的容器内
3、radio连同label标签放置在一个名为“.radio”的容器内
在Bootstrap框架中，主要借助“.checkbox”和“.radio”样式，来处理复选框、单选
按钮与标签的对齐方式。
<div class="checkbox">
<label>
<input type="checkbox" value="">
记住密码
</label>
</div>
多个复选框和单选按钮水平排列：
1、如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”
2、如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”
按钮：

表单控件的大小：
1、input-sm:让控件比正常大小更小
2、input-lg:让控件比正常大小更大
栅格：
被分成12分，要设置表单控件的大小则需要col-xs-（1-12）；
焦点状态：
通过：focus来实现了，添加阴影和边框的效果加入.form-control
禁用：
样式中加入disabled；
域禁用：
<fieldset disabled>
</fieldset>
据说对于整个禁用的域中，如果legend中有输入框的话，这个输入框是无法被禁用的。
验证状态：
1、.has-warning:警告状态（黄色）
2、.has-error：错误状态（红色）
3、.has-success：成功状态（绿色）
如果你想让表单在对应的状态下显示 icon 出来，只需要在对应的状态下添加类名“has-feedback”。请注意，此类名要与“has-error”、“has-warning”和“has-success”在一起http://www.imooc.com/code/2362
需要在form-group中加入has-feedback，然后还要加入span
成功：<span class="glyphicon glyphicon-ok form-control-feedback"></span>
警告：<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
错误：<span class="glyphicon glyphicon-remove form-control-feedback"></span>
错误提示：
class中加入help-block
<div class="row">
<div class="col-xs-6">
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功
状态" >
</div>
<span class="col-xs-6 help-block">你输入的信息是正确的</span>
</div>
两种方法使信息显示在input框的后面;
3x中没有help-inline，需要自己写css样式。
1.加入一个样式help-inline，样式中需要定义css
.help-inline{
display:inline-block;
padding-left:5px;
color: #737373;
}
2.利用栅格，col-xs-6
<span class="col-xs-6 help-block">你输入的信息是正确的</span>
按钮：
class="btn"//基本按钮
class="btn btn-default"//修改了按钮的背景颜色、边框颜色和文本颜色，默认样式
按钮的种类：
<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<a href="##" class="btn btn-default">a标签按钮</a>
<span class="btn btn-default">span标签按钮</span>
<div class="btn btn-default">div标签按钮</div>

按钮大小：

按钮禁用：
要禁用按钮有两种实现方式：
方法1：在标签中添加disabled属性
方法2：在元素标签中添加类名“disabled”//链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。
图像：
1、img-responsive：响应式图片，主要针对于响应式设计
2、img-rounded：圆角图片
3、img-circle：圆形图片
4、img-thumbnail：缩略图片
图标：
Bootstrap框架中是通过给元素添加“glyphicon”类名来实现，然后通过伪元素“:before”的“content”属性调取对应的icon编码；
网格：
将界面分成了12份
1、数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。如：
<div class="container">
<div class="row"></div>
</div>
2、在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12。如：
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8"></div>
3、具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素
4、通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（margin）来抵消内距(padding)的影响

列偏移:
col-md-offset-(1-12)
列排列：
列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-”和“col-md-pull-” (其中星号代表移动的列组合数)。
列嵌套：
Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列（像前面介绍的一样使用列）。但在列容器中的行容器（row），宽度为100%时，就是当前外部列的宽度。
下拉菜单（基本用法）：
1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，示例中为:
<div class="dropdown"></div>
2、使用了一个<button>按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致，此示例为:
data-toggle="dropdown"
3、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”，此示例为:
<ul class="dropdown-menu">
下拉分割线
下拉分隔线，假设下拉菜单有两个组，那么组与组之间可以通过添加一个空的<li>，并且
给这个<li>添加类名“divider”来实现添加下拉分隔线的功能。
还可以进行分组：
<li role="presentation" class="dropdown-header">第一部分菜单头部</li>
对齐方式
下拉菜单默认是左对齐，如果你想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加
一个“pull-right”或者“dropdown-menu-right”类名
菜单状态：
<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
….
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
按钮组：
<div class="btn-group"></div>
按钮工具栏
Bootstrap框架按钮工具栏也提供了这样的制作方法，你只需要将按钮组“btn-group”按组放在一个大的容
器“btn-toolbar”中
<div class="btn-toolbar">
<div class="btn-group">
…
</div>
<div class="btn-group">
…
</div>
<div class="btn-group">
…
</div>
<div class="btn-group">
…
</div>
</div>
btn-lg、btn-sm和btn-xs三个类名来调整padding、font-size、line-height和border-radius属性值来改变按钮大小。那么按钮组的大小，我们也可以通过类似的方法：
.btn-group-lg:大按钮组
.btn-group-sm:小按钮组
.btn-group-xs:超小按钮组
只需要在“.btn-group”类名上追加对应的类名，就可以得到不同大小

导航：
选项卡
<ul class="nav nav-tabs">
<li><a href="##">Home</a></li>//如果加入了class="active"则变为选项卡
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li><a href="##">Responsive</a></li>
</ul>
导航（胶囊形(pills)导航）
<ul class="nav nav-pills">
<li class="active"><a href="##">商品介绍</a></li>
<li><a href="##">规格参数</a></li>
<li><a href="##">商品评价</a></li>
<li><a href="##">售后保证</a></li>
</ul>
导航（垂直堆叠的导航）
在实际运用当中，除了水平导航之外，还有垂直导航，就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可：
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li class="disabled"><a href="##">Responsive</a></li>
</ul>
自适应导航
自适应导航指的是导航占据容器全部宽度，而且菜单项可以像表格的单元格一样自适应宽度。自适应导航和前面使用“btn-group-justified”制作的自适应按钮组是一样的。只不过在制作自适应导航时更换了另一个类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。如：
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li><a href="##">Responsive</a></li>
</ul>
导航加下拉菜单
Bootstrap框架中制作二级导航就更容易了。只需要将li当作父容器，使用类名“dropdown”，同时在li中嵌套另一个列表ul，使用前面介绍下拉菜单的方法就可以：
<ul class="nav nav-pills">
<li class="active"><a href="##">首页</a></li>
<li class="dropdown">
<a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="##">CSS3</a></li>
…
</ul>
</li>
<li><a href="##">关于我们</a></li>
</ul>
面包屑导航（文章进入的层）
<ol class="breadcrumb">
<li><a href="#">首页</a></li>
<li><a href="#">我的书</a></li>
<li class="active">《图解CSS3》</li>
</ol>

导航条
在制作一个基础导航条时，主要分以下几步：
第一步：首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”
第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”；
.navbar-fixed-top：导航条固定在浏览器窗口顶部
.navbar-fixed-bottom：导航条固定在浏览器窗口底部
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
　…
</div>
<div class="content">我是内容</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
　…
</div>
分页导航（带页码的分页导航）
平时很多同学喜欢用div>a和div>span结构来制作带页码的分页导航。不过，在Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination方法：
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
徽章;
使用方法，其实也没什么太多可说的，你可以像标签一样，使用span标签来制作，然后为他加入badge类：
<a href="#">Inbox <span class="badge">42</span></a>
警示框：
1、成功警示框：告诉用用户操作成功，在“alert”样式基础上追加“alert-success”样式，具体呈现的是背景、边框和文本都是绿色；
2、信息警示框：给用户提供提示信息，在“alert”样式基础上追加“alert-info”样式，具体呈现的是背景、边框和文本都是浅蓝色；
3、警告警示框：提示用户小心操作（提供警告信息），在“alert”样式基础上追加“alert-warning”样式，具体呈现的是背景、边框、文本都是浅黄色；
4、错误警示框：提示用户操作错误，在“alert”样式基础上追加“alert-danger”样式，具体呈现的是背景、边框和文本都是浅红色。
警示框关闭：
1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。
2、在button标签中加入class="close"类，实现警示框关闭按钮的样式。
3、要确保关闭按钮元素上设置了自定义属性：“data-dismiss="alert"”（因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭）。
进度条：
<div class="progress">
<div class="progress-bar" style="width:40%"></div>
</div>
彩色进度条
progress-bar-info：表示信息进度条，进度条颜色为蓝色
progress-bar-success：表示成功进度条，进度条颜色为绿色
progress-bar-warning：表示警告进度条，进度条颜色为黄色
progress-bar-danger：表示错误进度条，进度条颜色为红色
条纹进度条
条纹进度条只需要在进度条的容器“progress”基础上增加类名“progress-striped”
动态条纹进度条
要让条纹进度条动起来，就需要让“progress-striped”和“active”同时运用，不然条纹进度条是不具备动效效果。
<div class="progress progress-striped active">
<div class="progress-bar" style="width:50%"></div>
</div>
媒体对象：
媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容
媒体对像的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片
媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容
媒体对象的标题：常使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选

<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original=" " alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media Header</h4>
<div>…</div>
</div>
</li>
<li class="media">…</li>
<li class="media">…</li>
</ul>

点击查看更多内容