一 bootstrap的介绍

 Bootstrap是将html,css和js的代码打包好了,只管我们拿来调用。是基于jquery开发的。

 使用BootCDN提供的免费CDN加速服务,同时支持http和https协议。CDN是一种前端的优化方式。

 jquery的代码放在body标签里面的最下面。

二 全局css样式

  全局css样式是为了确保分辨率的样式,需要在head标签中加上viewport元数据标签

<meta name="viewport" content="width=device-width, initial-scale=1">

 在移动设备的浏览器上面,为了通过视口设置meta标签的属性为user-sccalable=no可以进制缩放的功能,只需要用户滚动屏幕就可以就可以查看原生网页的内容。注意,这个方式并不推荐所有网站使用,根据自己需求而定。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

 栅格系统:将一个网页页面分为行(row)和列(column);写的内容应该放在列里面,并且只有列能作为行的直接元素。

 列的格式:div.col-xx-数字。

  xx代表的时屏幕的大小:

   lg:大屏幕,大桌面屏幕显示的大小

   md:中屏幕,桌面屏幕显示的大小

   xs:小屏幕,也就是手机屏幕的大小

   sm:小屏幕,也就是平板屏幕的大小

  数字只有1-12,指定列,也就是说在一行中最多只有12列。

 栅格的参数:

  超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
栅格系统行为 总是水平排列 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C
.container 最大宽度 None (自动) 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列(column)数 12
最大列(column)宽 自动 ~62px ~81px ~97px
槽(gutter)宽 30px (每列左右均有 15px)
可嵌套
偏移(Offsets)
列排序

 我们偶尔会在媒体查询代码中包含max-width从而将css的影响限制更小范围屏幕大小内  

  @media :媒体;screen:显示器;max-width:最大宽度。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

列是支持嵌套的。

<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>

 流式布局容器:将最外面的布局元素.container修改为.container-fluid,就可以将固定格局宽度改为 100%的宽度。

<div class="container-fluid">
<div class="row">
...
</div>

 clearfix:清除开始的样式,另起一行。

<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

 联合使用过.clearfix和响应式工具类

<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

 列排序:push:推;pull:拉

<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

 .col-xx-offset-数字:列偏移。

<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>

三 排版

 标题:在html中hn系列的标签均可使用在标题中。另外还提供了hn系列的类。为了是给内联标签(inline)属性文本给予标题的样式

//hn标签
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6> //hn类
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

 lead属性值:字体变大变粗,可以让段落突出显示。

<p class="lead">hello</p>

 mark标签:高亮显示

<mark>highlight</mark>

 del标签:删除标签和s标签:无用标签

//del标签
<del>This line of text is meant to be treated as deleted text.</del> //s标签
<s>This line of text is meant to be treated as no longer accurate.</s>

 ins标签:插入标签,表示的吧一种状态

<ins>This line of text is meant to be treated as an addition to the document.</ins>

 u标签:带下划线的标签

<u>This line of text will render as underlined</u>

 small标签:变灰变大

<small>This line of text is meant to be treated as fine print.</small>

 strong标签:变量加粗

<strong>rendered as bold text</strong>

 em标签:斜体

<em>rendered as italicized text</em>

 文本的一些属性值的方法 :

  文本对齐:text前缀

    -left:左对齐

    -center:中对齐

    -right:右对齐

    还有-justify和-nowrapt

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

  文本大小写:text前缀

    -lowercased:文本变小写

    -uppercased:文本变大写

    -capitalize:首字母大写

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

 addr下的title:显示缩略语

<abbr title="attribute">attr</abbr>

 首字母缩略语:为缩略语加上.initialism类,可以然让字体变得稍微小些

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

 address:地址链接标签

<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address> <address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address>

 blockquote:引用;footer标签:标明引用的来源;blockquote-reverse属性值:右边加上一个横线

<blockquote class="blockquote-reverse">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

 列表标签:ul;ol

  内联列表:通过设置display:inline-block;将所有元素放在一行。

<ul class="list-inline">
<li>...</li>
</ul>

 kbd标签:键盘输入

<kbd>cd</kbd> followed by the name of the directory.<br>

 pre标签:代码块

<pre><p>Sample text here...</p></pre>

 var标签:变量

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

 samp标签:输出

<samp>This text is meant to be treated as sample output from a computer program.</samp>

四 表格标签

 table标签:表格标签

  table类可以为其于基本的样式,少量的内补padding和水平方向的分割线。

<table class="table">
...
</table>

 条纹状表格:通过table-striped类可以给tbody标签之内每一行标签增加班马条纹样式

<table class="table table-striped">
...
</table>

  条纹状表格是依赖于:nth-child css选择器实现的。而这一功能不被Lnternet Explorer 8 支持。

 带边框的表格:添加table-bordered类为其表格和其中的单元格增加边框

<table class="table table-bordered">
...
</table>

 鼠标悬停 :添加table-hover类剋以让鼠标悬停的那一栏做出响应是的状态。

<table class="table table-hover">
...
</table>

 紧缩表格:添加table-condensed类可以让表格更加的紧凑。单元格的内补padding均会减半。

<table class="table table-condensed">
...
</table>

 状态类:通过如下的状态类可以为行或者单元格设置颜色。

Class 描述
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr> <!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>

 响应式表格:将任何table元素包含在table-responsive元素内,即可创建响应式表格。在小屏幕上显示水平滚动条,在大屏幕上就会消失水平滚动条。

  垂直方向的内截断:使用了overeflow-y:hidden属性,就可以将超出表格顶部和底部的内容截断。特别是可以截断下拉菜单呵呵第三方组件。

  Firefox和fieldset元素:Firefox浏览器时对fieldset元素设置了一些影响width属性的样式,导致响应式表格出现了问题。可以使用以下方法针对Firefor的hack代码解决,但是以下代码并没有集成在Bootstrap中:

@-moz-document url-prefix() {
fieldset { display: table-cell; }
}

 更多信息参考:this Stack Overflow answer.

实例:

<div class="table-responsive">
<table class="table">
...
</table>
</div>

五 表单

  单独的表单会赋予一些全局格式。所有设置了form-control类的元素宽度默认为100%。将label标签里面的元素和前面提到的控制包裹在 form-group中可以获得更好的排列。

<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

 内联表单:为form标签加上form-inline类就可以内容向左对齐,并且有inline-block级别的控件。

  width:auto:设置宽度,内容的宽度。

  label标签:

   sr-only:隐藏;aria-label,aria-labelledby和title属性:辅助技术为label提供的替代方案,如果这些属性不存在,屏幕阅读器会使用placeholder属性。如果存在,就会使用占位符代替其他的标记。

<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>

 水平排列的表单:通过表单添加form-horizontal类,并且联合使用Bootstrap预置的栅格类,可以将label标签和控件水平布局。这样会改变form-group的行为。就无法添加row类了。

<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>

 输入框:包含大部分的表单控件,文本输入域控件,还支持所有HTML类型的输入控件:text,password,datetime,datetime-local,date,month,time,week,number,email,url,search,tel和color。

 文本域:支持多行文本域,可根据需要改变rows属性 。

<textarea class="form-control" rows="3"></textarea>

 多选和单选框:多选框:checkbox,同时可以选取一个或多个;单选框:radio,同时只能选取一个。

<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div> <div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>

 内联单选和多选框:同个使用checkbox-inline和radio-inline类可以将多选框和单选框放在一行显示。

<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label> <label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

 不带文本的多选框和单选框:目前只适用于非内联的单选和多选框。使用辅助技术提供的aria-label属性

<div class="checkbox">
<label>
<input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</label>
</div>

 下拉列表:select标签

<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

 多显示下拉列表:在select表情类加上multiple属性

<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

 静态控件:将需要的表单中的纯文本和label元素放在同一行,只需要为p标签元素加上form-control-static类即可。

<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">email@example.com</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>

 焦点状态:将某些表单控件默认的outline样式移除,然后对:focus状态赋予box-shadow属性。

 禁用状态:为输入框设置disabled熟悉就可以禁用了。

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

 如果为fieldset标签设置disabled属性,就会将其下面的元素全部禁用状态。

<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>

 只读状态:如果为输入框设置readonly就会使用户只能读取文本,本能修改或写入。

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

 校验状态:使用时添加has-warking,has-error或has-success类到这些控件的父元素即可。任何包含此元素的control-label,form-control或help-block元素都会有这些状态样式。

<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>

 添加额外的图标:为相应的元素加上has-feedback类即可。

<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

 可选图标与设置sr-only类的label元素:可以使用sr-only类来隐藏表单控件label,一旦被添加,Bootstrap会自动调整图标的位置。

<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

 控制尺寸:通过input-lg类似的类来为控件设置高度,通过col-lg-*类似的类来设置宽度。

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm"> <select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

 水平排列的表单组的尺寸:通过添加form-group-lg或form-group-sm类来设置form-horizontal包裹的label元素和表单控件快速设置尺寸。

<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>

 调整列的尺寸:使用栅格系统中的列为其设置宽度

<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>

六 按钮

 则作为按钮的元素和标签:a,button,input添加按钮类(button class)既可使用Bootstrap提供的样式。

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

 预订样式:前缀btn

  Default:默认样式;Primary:蓝色;Success:绿色;info:浅蓝色;Warning:橙色;Danger:红色;Link:白色

<!-- Standard button -->
<button type="button" class="btn btn-default">(默认样式)Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">(首选项)Primary</button> <!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">(成功)Success</button> <!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">(一般信息)Info</button> <!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">(警告)Warning</button> <!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">(危险)Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">(链接)Link</button>

 设置尺寸:前缀btn

  lg:大按钮;sm:小按钮;xs:超小按钮

<p>
<button type="button" class="btn btn-primary btn-lg">(大按钮)Large button</button>
<button type="button" class="btn btn-default btn-lg">(大按钮)Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">(默认尺寸)Default button</button>
<button type="button" class="btn btn-default">(默认尺寸)Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">(小按钮)Small button</button>
<button type="button" class="btn btn-default btn-sm">(小按钮)Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">(超小尺寸)Extra small button</button>
<button type="button" class="btn btn-default btn-xs">(超小尺寸)Extra small button</button>
</p>

 块级按钮:btn-block类可以将按钮拉伸与100%。

<button type="button" class="btn btn-primary btn-lg btn-block">(块级元素)Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">(块级元素)Block level button</button>

 激活状态:将按钮点击时,颜色会有一些变化。button标签和a标签是通过:active实现的。还可以将active应用到button上(包含aria-pressed="true"属性)。并使用编程方式使其处于记过状态。

  button元素:由于:active是伪状态,因此无需额外添加,为了让其显示同样外观时就可以添加active类。

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

  连接a标签元素:可以基于啊、标签创建的按钮添加active类。

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

 禁用状态:可以使用opacity属性就可以实现无法点击。

//button标签
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button> //a标签
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

 七 图片

 响应式图片:为图片添加img-responsive类就可以支持响应式布局。

  要让图片居中,使用center-block类即可。

<img src="..." class="img-responsive" alt="Responsive image">

 图片形状:

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

八 辅助类

 情境文本颜色:

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

 背景颜色:

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

九 其他操作

 关闭按钮:

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>

 三角符号:

<span class="caret"></span>

 快速浮动:

<div class="pull-left">...</div>
<div class="pull-right">...</div>

 内容居中:

<div class="center-block">...</div>

 清除浮动:通过父类添加clearfix类就会很容易的清除浮动了。

<div class="clearfix">...</div>

 显示和隐藏内容:show和hidden类就可以强制内容显示和隐藏

<div class="show">...</div>
<div class="hidden">...</div>

 屏幕阅读器和键盘导航:sr-only类可以对屏幕阅读器以外的内容隐藏。sr-only和sr-only-focusable联合使用就可以在元素有焦点时显示出来。

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

 图片替换:text-hide类可以将对应的文本内容替换成一张背景图片

<h1 class="text-hide">Custom heading</h1>

十 响应式工具

 可用的类:

  超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面 (≥992px) 大屏幕 桌面 (≥1200px)
.visible-xs-* 可见 隐藏 隐藏 隐藏
.visible-sm-* 隐藏 可见 隐藏 隐藏
.visible-md-* 隐藏 隐藏 可见 隐藏
.visible-lg-* 隐藏 隐藏 隐藏 可见
.hidden-xs 隐藏 可见 可见 可见
.hidden-sm 可见 隐藏 可见 可见
.hidden-md 可见 可见 隐藏 可见
.hidden-lg 可见 可见 可见 隐藏

 打印类:

class 浏览器 打印机
.visible-print-block
.visible-print-inline
.visible-print-inline-block
隐藏 可见
.hidden-print 可见 隐藏
  超小屏幕
手机 (<768px)
小屏幕
平板 (≥768px)
中等屏幕
桌面显示器 (≥992px)
大屏幕
大桌面显示器 (≥1200px)
栅格系统行为 总是水平排列 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C
.container 最大宽度 None (自动) 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列(column)数 12
最大列(column)宽 自动 ~62px ~81px ~97px
槽(gutter)宽 30px (每列左右均有 15px)
可嵌套
偏移(Offsets)
列排序

本片博客详情:http://v3.bootcss.com/getting-started/

       http://v3.bootcss.com/css/

bootstrap之css样式的更多相关文章

  1. bootstrap全局CSS样式学习

    参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...

  2. bootstrap课程4 bootstrap的css样式有哪些内容需要注意

    bootstrap课程4 bootstrap的css样式有哪些内容需要注意 一.总结 一句话总结: 1.如何选择产品(框架)的版本? 大版本下的最后一个版本,但是同时又要选择稳定的版本,也就是如果做产 ...

  3. Bootstrap基本CSS样式

    一.简介.使用 1.简介 Bootstrap 来源于 Twitter,是一款基于 Html.Css.JavaScript 的前端UI框架.可以方便.快速的开发web界面. 教程:https://www ...

  4. [bootstrap] 基本css样式和组件

    一.基本css样式 01.全局设置 全局 font-size 是 14px,line-height 是 20px. 这些样式应用到了 <body> 和所有的段落上. 另外,对 <p& ...

  5. Bootstrap全局CSS样式之排版

    Bootstrap能全然友好的支持html5的文本元素,这里不再赘述,详细可參考我还有一篇文章<html的文本元素总结>,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总. ...

  6. bootstrap 全局 CSS 样式

    http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...

  7. 响应式布局和BootStrap 全局CSS样式

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  8. Bootstrap全局CSS样式之表格

    .table--基础表格样式. .table-striped--给<tbody>之内的每一行添加斑马条纹样式: .table-bordered--为表格添加边框: .table-hover ...

  9. bootstrap全局css样式

    以下从官网抄来的,感觉还是很实用的,运用得好,灵活运用,非常方便快捷,能大大提高开发效率,也为调整不同尺寸的屏幕节省了时间. hidden-xs @media (max-width: 767px){ ...

随机推荐

  1. Git 远程仓库 更新url

    git remote -v 查看现有远程仓库的地址url 1. 修改命令git remote set-url origin <URL> 更换远程仓库地址.把<URL>更换为新的 ...

  2. 【转】chrome devtools protocol——Web 性能自动化

    前言 在测试Web页面加载时间时,可能会是这样的: 打开chrome浏览器. 按F12打开开发者工具. 在浏览器上打开要测试的页面 查看开发者工具中Network面板的页面性能数据并记录 或者在开发者 ...

  3. Python+Selenium学习--键盘事件

    场景 我们在实际的测试工作中,有时候需要使用tab键将焦点移动到下一个元素,用于验证元素的排序是否正确.webdriver的Keys()类提供键盘上所有的操作,甚至可以模拟一些组合键的操作,如Ctrl ...

  4. @RequestBody使用须知

    -----------------------siwuxie095                                 @RequestBody 使用须知         使用 @Requ ...

  5. 使用插件和不使用插件实现select的框

    # 1.select框单选 # 方式1 select1 = fields.ChoiceField( choices=[ (1,"select框方式1_1"), (2,"s ...

  6. ScrollView嵌套ListView,禁止ListView的滚动,只让ScrollView可以滚动

    自定义ListView,xml布局文件中使用该自定义的ListView public class NoScrollListview extends ListView{ public NoScrollL ...

  7. 模块二 hashlib模块、configparser模块、logging模块

    算法介绍 Python的hashlib提供了常见的摘要算法,如MD5,SHA1等等. 什么是摘要算法呢?摘要算法又称哈希算法.散列算法.它通过一个函数,把任意长度的数据转换为一个长度固定的数据串(通常 ...

  8. 4N - 素数回文

    xiaoou33对既是素数又是回文的数特别感兴趣.比如说151既是素数又是个回文.现在xiaoou333想要你帮助他找出某个范围内的素数回文数,请你写个程序找出 a 跟b 之间满足条件的数.(5 &l ...

  9. Java 7.21 游戏:豆机(C++&Java)

    PS: 难点在于,随机之后的分隔,理解就很容易了 注意:槽的奇偶情况 C++: #include<iostream> #include<ctime> #include<s ...

  10. python自学开始

    95年工科女一枚 java工程师算不上,只能说从事java开发相关的工作,由于对Python有着极其浓厚的兴趣,一周时间了解大概之后,决定从今天开始见缝插针自学Python,为了防止本人三天打鱼两天晒 ...