正文

重修课程day54（bootstrap之css样式）

方杰0410  2022-02-10  784

关键词：

一 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:#">[email protected]</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="[email protected]">
  </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 protected]</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/

重修课程day15（函数之内置函数一）

什么是内置函数：别人已经定义好了的函数，我们只管拿来调用就好locals：局部作用域中的变量globals：全局作用域中的变量这两者在全局执行，结果一样；在局部中locals表示函数内的名字，返回的是一个字典，globals始终不变#def... 查看详情

重修课程day24（面向对象5之封装）

type：是所有类的类型，所有类的类型默认是type。一封装　1什么叫做封装：就是将自己想要隐藏起来的内容给隐藏起来。　　封装的原则：1.1将不需要对外提供的内容隐藏起来；1,2将属性隐藏起来，提供公共方法对其访问。... 查看详情

重修课程day12（函数之迭代器和生成器）

一迭代器　集合的目的：去重，关系运算。#a={1,2,3,4,5,6,7}#b={41,52,5,26,7,4,2,9,}#print(a-b)　　isinstance：判断数据的类型，还可以判断是否可迭代。　　iterable：形容词可迭代的：fromcollectionsimportIterable:用来检测一个对象是否... 查看详情

重修课程day34（网络编程八之线程二）

一concurrent.futures模块　开启进程池和线程池模块。　　线程池和进程池的区别：进程池开启的数量范围只能在CPU对的核数以内。而线程池的数量可以自己随便的定义，默认为是核数的五倍。　相关用法：　　ThreadPoolExecutor：创建... 查看详情

重修课程day25（面向对象6之模块与包）

一模块　1 什么叫做模块：一个py文件就是一个模块　　模块的分类：内置模块，第三方模块和自定义模块　　内置模块：在python产生是就有的模块叫做内置模块，我们只管拿来调用即可　　第三方模块：别人已经定义好了的... 查看详情

重修课程day32（网络编程六之进程三）

　什么叫做水平扩展：增加计算机的数量，并没有提高计算机的性能　什么叫开源：开放源代码　什么叫做虚拟化：同时跑多个系统一JoinableQueue模块　JoinableQueue模块介绍：比Queue多了两个函数，一个是task_done，另一个是join，都... 查看详情

重修课程day47（前端二之html二和css一）

一列表标签　ul标签：无序列表　ol标签：有序列表　li标签：写在ul和ol标签里面的　dl标签：定义列表　　dt标签和dd标签：都写在dl里面的<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title>... 查看详情

重修课程day31（网络编程五之进程二）

寄存器：运行时间快，但是容量比较小一守护进程　1什么是守护进程：　　守护进程就是辅助主进程的代码的执行，守护进程会伴随着主进程的代码的运行周期的。主进程的代码执行完毕之后，守护进程就没有存在的必要，所... 查看详情

重修课程day9（函数之有参函数）

一函数的作用　1减少代码的冗余　2提高了代码的重用性　3提高了代码的可读性　4增强了代码的可扩展性概念：　面向过程编程：功能与功能之间的耦合很紧密　解耦：将一个复杂的功能分解成多个简单的功能，并且将功能与... 查看详情

重修课程day26（面向对象6之反射，内置函数和常用模块）

一软件的开发规范　基本的目录结构：bin目录：里面写start.py文件，启动程序。将当前的项目目录添加到sys.path，调用core文件下的所有脚本。　　　　　　　　　core目录：放一些主脚本文件，跟类相关的文件放在里面。在创... 查看详情

重修课程day22（面向对象三之继承和派生）

面向对象的三大特性：封装，继承和多态一继承　1什么是继承：1.1什么是什么的关系。一个类是另一个类的子类。　　　　　　　　1.2继承是一种创新类的方式。新建的类可以继承一个或多个父类。父类又称为基类或超类，新... 查看详情

javascript课程——day24（bootstrap简介全局的css样式组件）

1、bootstrap简介　　1.1、什么是bootstrap？来自于Twitter，是目前很受欢迎的前端框架之一2011年8月在GitHub上发布的开源产品是一个用于快速开发web应用程序和网站的前端框架支持响应式布局。(响应式布局指的是一个网站能够兼容多... 查看详情

python学习_day62_前端基础之bootstrap全局css样式

一、布局容器　　Bootstrap需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。分别为：<divclass="container">//.container... 查看详情

重修课程day18（模块2）

一collections模块：数据类型模块　namedtuple:可命名元组p=collections.namedtuple(‘p‘,[‘x‘,‘y‘])a=p(1,2)print(a.x+a.y)　deque：双端队列1append：后添加；2appendleft：前添加；3pop：从后向前取值；4　　popleft：从前到后取值q=collections.deque([1,... 查看详情

重修课程day46（前端一之html一）

一web服务器的本质　由浏览器发送一个请求。服务器接收到，然后在回应一个响应。　由于浏览器的不同，web服务器响应的内容不一定被浏览器接收。　HTTP/1.1201OK 需要发送的内容：是为了给浏览器看的。http协议名称；201：状... 查看详情

重修课程day30（进程）

一进程的概念　1进程和程序的区别：程序就只是一段代码，在硬盘上的一堆文件，进程就时正在运行的程序的过程，进程是有优先级的过程。　一个程序别执行几次就会产生几个进程二并发和并行　什么时并发：看起来是多个... 查看详情

重修课程day17（正则表达式）

一正则表达式和re模块　1什么叫做正则表达式：这则表达式是字符串的一种筛选规则　2正则表达式的好处：1,1匹配：检测字符串是否符合正则表达式的规则，否则返回False。　　　　　　　　　　　1,2切割：按照一定的规则将字... 查看详情

重修课程day35（网络编程九之协程）

什么是用户态和内核态：　内核态：当一个任务（进程）执行系统调用而陷入了内核代码中执行，这就叫做内核态。　用户态：当用户在执行自己的代码时，这就叫在用户态　　内核态和用户态的详情：http://www.cnblogs.com/viviwind/a... 查看详情