【BootStrap】概述 & CSS

时间 2019-11-16

原文原文链接

BootStrapcss

　　BootStrap由Twitter开发，基于HTML,CSS,JS，是一套前端框架。它的特色是对浏览器良好的支持（目前市面上全部流行浏览器均可以），兼容移动设备，以及响应式设计（响应式CSS自适应于各类设备）。html

　　安装BS能够到官方网站下载这个框架库，http://getbootstrap.com/ 。上面有两个类型的BS库，一种是编译好的一些文件（Download Bootstrap），另外一种是一些源代码（Download Source）。源代码比较大，是让人分析的，对于通常的使用，下载预编译版本的便可。获得的预编译库的目录结构以下前端

　　再获得库以后就是如何在文档中引用库了，基本上要在html中的<head>标签中引用bootstrap.min.css（BS样式库）,bootstrap.min.js（BS的JS插件库）以及jQuery（由于BS的JS文件会用到不少jQuery内容），例如：ios

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

■　　BS网格系统api

　　网页设计中能够用网格组织内容，使用户在查看内容时更加层次分明。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>
  &lt;article&gt;
    &lt;h1&gt;Article Heading&lt;/h1&gt;
  &lt;/article&gt;
</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
        </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是用于把网页设置得对残障人士更加友好）

　　控件尺寸

　　对于表单中的控件，咱们能够经过设置其网格的col-xx-nn属性来控制控件的宽度。若是要调整高度，可使用.input-lg , .input-md , .input-sm这三种类来实现。一般可以控制高度的控件是像<select>，<input>这种。

■　　BS按钮

　　BS提供的按钮类不只仅能用于<button>标签，也能够用于<a>和<input>。可是从最佳实践的角度说最好仍是设置成<button>比较好。常见的一些按钮的类：

　　.btn　　按钮基本样式，和以前的表格等同样，不加这个的话按钮任然表现为原生HTML的按钮样式。

　　.btn-default　　默认按钮样式。仅仅有.btn时按钮是一块灰色的区域，很差看，要进一步加上各类样式，其中default就是默认的一种白底黑字的按钮样式。

　　.btn-success/info/warning/danger　　配色不一样的按钮

　　.btn-link　　可让一个按钮表现的像一个超连接同样，但其本质仍然是一个按钮。

　　.btn-lg/sm/xs/block　　用来改变按钮的默认大小。lg是大按钮，sm小按钮，xs极小按钮，block是让按钮跨越父元素的总宽度，造成一个块级按钮。

　　.active　　为button标签添加一个active类，使得按钮变成被激活时的样式:<button class="btn btn-default active">Button</button>

　　.disabled　　disabled属性直接写在button的标签里（或者添加一个disabled="disabled"的属性，两种写法是等价的），来禁用一个按钮。被禁用的按钮颜色变浅且鼠标图标会变化：<button class="btn btn-default" disabled>Butotn</button>

■　　BS图片

　　为img标签添加一些类可让图片在BS的支持下更加好看。经常使用的类有：

　　.img-rounded　　使图片的边框变为圆角边框。

　　.img-circle　　使图片变为圆形

　　.img-thumbnail　　给图片增长一个带有一些内边距的灰色边框，看上去就像是一个相框同样。

　　.img-responsive　　让图片具备响应式的特征，即当窗口大小变化时，图片会根据窗口大小调整自身大小以适应窗口。最大不会超过图片自己大小。

　　顺便一提，img标签有个alt属性，其做用是当鼠标移到图片上时将会显示一个内容是alt属性值的tips，此外当该图片加载失败的时候，网页上就会显示alt的值加上一个红叉叉。

■　　BS中其余一些辅助类

　　BS中还有不少不少类，by which能够设计出很优雅的网页。

　　文本处理类

　　　　.text-muted/primary/info/danger/warning/success　　给文本着色，muted是淡灰色，primary是BS蓝。。

　　背景处理类

　　　　.bg-primary/success/info/warning/danger　　给背景着色，能够用于各类各样的元素标签

　　位置处理类

　　　　.pull-left/right　　以前也提到过了这两个类，其做用是把元素强制浮动到左边or右边

　　　　.center-block　　把元素设置成display:block并居中显示

　　　　.clearfix　　清除浮动

　　显示隐藏：

　　　　.show　　显示元素

　　　　.hidden　　隐藏元素

　　　　.sr-only　　除了屏幕阅读器，在其余设备上隐藏元素。具体什么是屏幕阅读器不清楚。。总之PC和IPAD这类设备都不算。

　　其余

　　　　.close　　为button等元素添加close类以后，这个button就成为一个关闭按钮样式，无边框，文字为浅灰色的样子

　　　　.caret　　当button等元素有下拉菜单的功能，此时为button的内容中加上一个.caret的span元素可使button的内容文字右边有个小三角形，提示用户此处可下拉菜单。

■　　响应式工具

　　由于BS会支持各类大小屏幕的设备，因此当你想要在某些设备上显示而在其余设备上不显示一些东西的时候能够经过响应式工具来实现。好比：

　　.visible-xs/sm/md/lg　　使得元素能够在极小/小/中/大型设备上看到

　　.hidden-xs/sm/md/lg　　使得元素没法在这些设备上看到。

　　顺便，关于大中小设备的定义：

1. bootstrap概述
2. Bootstrap概述
3. Bootstrap CSS 概览
4. Css概述
5. CSS概述
6. Web—CSS概述
7. CSS的概述
8. 4-css概述
9. Bootstrap知识点概述
10. Study 5 —— CSS概述
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• Java Agent入门实战（二）-Instrumentation源码概述
• 适用于PHP初学者的学习线路和建议

【BootStrap】 概述 & CSS

【BootStrap】概述 & CSS