【BootStrap】概述CSS
BootStrap
  BootStrap由Twitter开发，基于HTML,CSS,JS，是⼀套前端框架。它的特点是对浏览器良好的⽀持（⽬前市⾯上所有流⾏浏览器都可以），兼容移动设备，以及响应式设计（响应式CSS⾃适应于各种设备）。
  再得到库之后就是如何在⽂档中引⽤库了，基本上要在html中的<head>标签中引⽤bootstrap.min.css（BS样式
库）,bootstrap.min.js（BS的JS插件库）以及jQuery（因为BS的JS⽂件会⽤到很多jQuery内容），例如：
<head>
<title>...
<meta>....
<link href="..../bootstrap.min.css" rel="stylesheet"/>
<script src="...../jQuery.js"></script>
<script src="...../bootstrap.js"></script>
</head>
  下⾯将照抄W3CSchool的内容，根据BS的CSS，布局和插件三⽅⾯来介绍BS的功能和使⽤
BootStrap CSS
■  BS⽹格系统
  ⽹页设计中可以⽤⽹格组织内容，使⽤户在查看内容时更加井井有条。BS使⽤⽹格系统来统括HTML内容，使得内容管理更加便利，同时因为内容铺展时有⽹格作为⼀个“容器”，所以可以让⾃适应不同设备变得更加简单。
  BS的⽹格系统会根据屏幕以及视⼝（浏览器窗⼝⼤⼩）的变化⽽⾃动增删⽹格，⼀个页⾯最多可以被分成12列的⽹格来呈现，如下结构：
  在利⽤BS的⽹格系统时，应该遵循：
⾏必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
使⽤⾏来创建列的⽔平组。
内容应该放置在列内，且唯有列可以是⾏的直接⼦元素。
预定义的⽹格类，⽐如 .row 和 .col-xs-4，可⽤于快速创建⽹格布局。LESS 混合类可⽤于更多语义布局。
列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表⽰第⼀列和最后⼀列的⾏偏移。
⽹格系统是通过指定您想要横跨的⼗⼆个可⽤的列来创建的。例如，要创建三个相等的列，则使⽤三个 .col-xs-4。
  基于以上的注意点，我们可以构建出的⼀个最简单的⽹格布局是像下⾯这些代码⼀样的：
<div class="container">
<div class="row">
<div class="col-*-*">内容</div>
<div class="col-*-*">内容</div>
</div>
<div class="row">...</div>
</div>
<div class="container">....
  设置出⼀个.container类的元素后，相当划定了⼀⽚居中且指定了最⼤宽度的区域。在这个容器中每设置⼀个.row就是新开启⼀⾏。⽽在每⼀⾏中可以再以.col-xx-nn开启⼀列。xx的取值可以是lg（表⽰large）,md（medium）和sm（small）。再在每个列区域中去设置内容。
  关于col类名中lg,md,sm三种选项，分别指定了当前页⾯布局在不同⼤⼩屏幕的设备上的布局⽅案。⽐如在我可以设置两个div分别是class="col-sm-3 col-md-6 col-lg-9" ; class="col-sm-9 col-md-6 col-lg-3"这两个列在不同的设备上显⽰的布局也不同，在⼩型设备（如⼿机）上是25%/75%，在中型设备（如平板电脑）上是50%/50%，在⼤型设备上（台式机）则是75%/25%。这主要是因为BS会根据当前设备（屏幕）⼤⼩的不同来查带有不同关键字的类名并应⽤。
  以上就是BS⽹格系统的⼀些基础⽤法，更加⾼级⼀点的⽤法还有：
  列偏移
    默认的所有⾏的第⼀个列元素都是从⾏最左边开始算起的，如果不想让它从最左边开始算，⽅便的⽅法是搞⼀个空列出来放前⾯就好了。另外的⼀种⽅法是利⽤.col-xx-offset-nn的类来指出nn列的偏移。这个类的意思就是说，在这个元素的左边有nn列的空列，是不填充的。实例：col-md-offset-3.
  嵌套列
    稍微复杂⼀些的⽹格就有嵌套的关系。BS中的⼀个列可以再嵌套若⼲个⾏然后每个⾏中再加上若⼲个列，这些列的nn给值基准不是以总页⾯的12个列来，⽽是以当前所在列来的。⽐如：
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
<!-- 这⾥的两个列nn参数加起来依然是12⽽不是所在总列的6 -->
</div>
</div>
<div class="col-lg-6">....
</div>
■  BS排版
  所谓排版就是通过⼀些既存类来进⾏⽂字的格式细化。在BS中⼤部分细化都和原⽣HTML是⼀致的。⽐如<strong>标签是强调，<em>是强调加斜体等等。只不过BS在CSS上修改了⼀些这些默认标签的样式。另⼀⽅⾯，BS也以类和新标签的形式增加了许多新的⽂字格式的细化，其中，类也通常被⽤于<p>这类⽂本标签中。BS的这些类和标签有：
  <small>  使得⽂本变⼩变淡，如果在<h1>到<h6>这类标题标签的内容中增加上<small>标签的话，small中的内容会变成灰⾊且字号⼩⼀点的副标题的样式
  .text-left/center/right  ⽂本的居左居中居右对齐。顺便⼀提，不只是⽂本元素⽽同样适⽤于其他元素的对其⽅式是.pull-left/pull-right等
  .text-muted/success/primary/info/warning/danger  这些类使得⽂本斜体+附带⼀定颜⾊（⽐如success是绿⾊的，⽽warning是⼟黄⾊，danger是红⾊的）。通过这个类的CSS包装来规定所有警告啦，错误啦，信息啦，成功啦等等提⽰信息的样式
  .text-justify/nowrap  当时justify时可以使⽂本在屏幕宽度不够时⾃动换⾏，⽽nowrap使得⽂本不换⾏。
  .text-uppercase/lowercase/capitalize  ⼀⽬了然不⽤说了。。
  <blockquote>  开启⼀个引⽤块，就像知乎的引⽤那样，会在整个块左边有⼀条线以表⽰这是引⽤的⽂字。
  .list-unstyled/list-inline  两个关于<ul>元素的类，unstyled是指让列表的项前⾯没有那个⼩圆点⼩⽅块之类的标识，⽽inline则是让本来默认是竖直⽅向的列表转为横向排列
  <dl>,<dt>,<dd>  三者形成的是⼀个可为列表项添加描述的列表，不清楚是原来HTML中就有的还是BS后加的。总之记录⼀下。结构是<dl><dt>Description1</dt><dd>item1</dd><dt>Description2</dt>..
.</dl>这种感觉。dl可以添加类dl-horizontal使得dl列表中描述和列表项组成⼀⾏⾏，多⾏排列⽽不是原先的⼀列放下所有内容的形式（可以测试看⼀下）
■  BS中的代码显⽰
  BS中对代码的显⽰做了⼀定的改善。在原⽣HTML中有<code>标签来内联地显⽰代码（什么是内联参见HTML基础知识那篇），但是内联的话果然很不⽅便。⽽BS中把原⽣HTML中的<pre>元素给包装成⼀个专门⽤来显⽰代码的容器（或者说⽤来显⽰代码很好。。这是程序员的傲慢吗。。）因为<pre>会保留HTML代码中的所有空格制表等。效果如下：
<pre>
<article>
<h1>Article Heading</h1>
</article>
</pre>
  效果： 
■  BS表格
  BS中的表格，除了⽤到原⽣HTML中就有的<table>,<tr>,<th>,<td>,<caption>等标签外还另加了<thead>和<tbody>标签来区别表格头和表格内容。在BS中⼀个典型的表格结构应该是这样的：
<table>
<caption>Title</caption>
<thead>
<tr>
<th>Field1</th>
<th>Field2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content1</td>
<td>Content2</td>
</tr>
<tr>...</tr>
</tbody>
</table>
  th标签在BS中只能在thead标签内部使⽤，td则只能在tbody中使⽤。当然，以上这段代码不涉及任何BS类，所以看上去和原⽣HTML写出来的没什么差别，因此有必要给各个标签带上类以期其进⼊BS的变化，
  ⾸先是<table>标签的⼀些类：
  .table  这个类是指BS中的表格的基本样式，⽐如宽度铺平整个可⽤⽹格的宽度，加上分隔线，调整
字号等等。
  .table-striped  条纹类表格，将⽤灰⽩间替的风格填充表格的各个⾏。
  //这⾥需要注意的⼀点是，上述两个类之间是互相独⽴的，也就是说，如果想要得到⼀个铺平⽹格（这样⽐较好看）且条纹状的表格的话就得写<table class="table table-striped">，这种类中重复写上好⼏遍同⼀个词的现象在BS中⾮常常见。就table标签⽽⾔，这⾥所有的五个标签可以联合使⽤，即<table class="table table-striped table-hover table-bordered table-condensed">
  .table-bordered  为表格添加所有边框
  .table-hover  把⿏标悬浮所在位置的那⼀⾏背景⾊设置为灰⾊的表格
  .table-condensed  使表格更加紧凑
  然后是<tr>，<th>，<td>的⼀些类:
  .active  将悬浮的⾊设置为相关⾏或者单元格的背景⾊（通常配合JS来实时改变页⾯）。active类并不是表格独有，列表，按钮，超链接等也都有active类
  .success/info/warning/danger  将相关颜⾊设置成相关⾏或者单元格的背景⾊。
■  BS表单
  在BS中，⼀个典型的表单结构应该是这样的：
<body>
<form role="form">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name"
placeholder="请输⼊名称">
</div>
<div class="form-group">
<label for="inputfile">⽂件输⼊</label>
<input type="file" id="inputfile">
<p class="help-block">这⾥是块级帮助⽂本的实例。</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"/>请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
</body>
  这段代码中包括了⼀个⽂本输⼊框部分，⼀个⽂件输⼊部分，⼀个复选框部分和⼀个提交按钮。与原⽣HTML表单不同之处，BS的表单基本样式要求⾸先在最开始的<form>标签中添加role="form"，在表单中联系⽐较紧密的元素（⽐如输⼊框和输⼊框提⽰⽂字）可以⽤⼀个.form-group的div标签包裹起来（复选框那⾥⽤的是.checkbox）以期BS为我们的表单各个元素间⾃动调整间距。对于
input，textarea，select等元素我们需要添加.form-control类让其成为BS的表单元素样式⽽不是原来的那样。
  上⾯这段代码的效果是
  从表单的呈现形式的⾓度来说，这种默认的属于垂直表单（连标签⽂字都是在输⼊框的上⽅），除此之外，BS还内置了内联表单和⽔平表单两种表单的呈现形式。
  内联表单：
    所有表单元素⽔平排列且相左对齐，设置时应该为<form>标签加上.form-inline类别。内联表单需要注意的是，在默认情况下select,input这些元素的宽度都是100%，在内联表单中，虽然BS会⾃动调整⼀下宽度，但是如果⾃⼰能指定⼀下元素的宽度就更好了。另外，内联表单中的标签会变得很微妙，因为内联是以.form-group的div为单位的，标签和输⼊框等互相之间还是垂直的。可以在label中添加.sr-only类以期表单在内联形态时隐藏标签。
  ⽔平表单：
    ⽔平表单是指各个表单元素的提⽰⽂字和输⼊部分呈⽔平分布，这是⽐较常见的表单形态。要使⽤⽔平表单时应该要向<form>添加.form-horizontal类。接着把想要在⼀⾏⽔平显⽰的东西包裹在⼀个.form-group中，然后在相关的label的地⽅，添加.control-label类，并且为label添加⼀个col-xx-nn以指定提⽰⽂字的部分占整个.form-group的多少横向空间。⽐如这样⼀个实例：
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">名字</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname"
placeholder="请输⼊名字">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">姓</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastname"
placeholder="请输⼊姓">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">请记住我</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">登录</button>
</div>
</div>
</form>
  效果：
  下⾯将通过表单中常⽤的各种不同的元素（input,textarea,select,checkbox,radio等等）来分别介绍⼀下。
  input
  input是输⼊的统称，根据input的type属性的不同，可以构造出很多输⼊框类型。BS⽀持HTML5的所有input类型，包括text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。
  在input标签中直接添加disabled如<input type="text" disabled>可以禁⽤输⼊框，此时⿏标移到输⼊框上后图标也会变化。如果不想禁⽤，只想让它只读的话可以添加readonly属性<input type="text" readonly>
  如果想要在输⼊框的前后再添加⼀些其他的⽂字或者按钮可以参考BS组件的输⼊框组，其要义是把输⼊框包在⼀个.input-group⾥⾯之后再对输⼊框进⾏修饰，⽐如在前后加上.input-group-addon之类的元素
  textarea
  textarea是多⾏输⼊，BS的textarea⾃带⼀个调节⼤⼩的插件，另外在初始化时可以设置textarea标签的rows和cols属性以指定本多⾏⽂本框是该以⼏⾏⼏列的形式出现
  checkbox & radio
  其实checkbox和radio从代码上来说也属于input，因为调⽤时是<input type="checkbox">这样的。但是其和上述input不同的地⽅在于他们的调⽤形式不同于普通的input。这两种选择框的常见调⽤形式是，把type是checkbox或者radio的input标签放在⼀个label标签中，再⽤⼀个.checkbox或者.radio的div标签把这个label标签包裹起来。⽐如下⾯这样⼀个实例：
<div class="checkbox">
<label><input type="checkbox" value="">选项 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">选项 2</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1"
value="option1" checked>选项 1
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2"
value="option2">
选项 2 - 选择它将会取消选择选项 1
网页设计html代码大全w3cschool
</label>
</div>
  其他值得⼀提的就是radio是有组的概念的，在BS中radio组的体现就是input的name属性。只要是name属性⼀样的input的话就相当于是⼀个组，⼀个组内的所有radio只能有⼀个是被选中状态的。
  上⾯这段例⼦中给出的选项是垂直排列的，如果想要得到内联的横向排列的选项的话，需要在每个选项的label标签中加上.checkbox-inline(⽆论是checkbox还是radio都是checkbox-inline），然后从每个div中取出label，放到统⼀的⼀个div中去（div本⾝是块级元素，肯定还是会垂直排列，所以要从div中取出来）。
  select
  select没什么好说的。<select multiple>可以调⽤列表框，别忘了给select加上.form-control。
  静态控件
  静态控件就是纯⽂本，相当于wx中的StaticText。⽐⽅说在原先是⼀个<input type="text">的地⽅，让它固定显⽰⼀段⽂本的话，就可以⽤<p class="form-control-static">⽂本</p>来得到⼀段静态⽂本了
  fieldset
  fieldset是⼀个⾪属于form标签的⼀级⼦标签，其不代表任何会显⽰出来的内容，但是是控制整个form可⽤禁⽤的标签。⼀般把.form-group的div都写在fieldset⾥⾯，当fieldset被添加了disabled属性，成为<fieldset disabled>的话就可以使当前fieldset内所有form-group的可交互部件(包括input，select，textarea，button等等)都⽆法交互使⽤。
  状态校验
  在.form-group的div中再加上.has-success,.has-warning,.has-error这样的类的话可以使整个form-group的着⾊都有所改变，可以⽤于表单提价时进⾏状态校验后的反应。另外，类似在type是text的这种输⼊框中，如果验证状态完成后给输⼊框右侧加上⼀个图标会显得很友好。加⼊图标就需要在这个输⼊框所在的.form-group的div上加上⼀个has-feedback属性，然后在这个div中新加上⼀个.form-control-feedback的图标元素，常⽤BS插件的图标的话就可以是<span class="glyphicon glyphicon-ok form-control-feedback"></span>。这个图标元素通常可以跟在input后⾯，如果input出于⼀个.input-group的div中的话那么这个图标可以跟在这整个.input-group的div后⾯。⽐如：
<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>
  效果:(代码中提到的aria-describedby和aria-hidden是⽤于把⽹页设置得对残障⼈⼠更加友好）
  控件尺⼨

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。