基于Bootstrap框架菜鸟入门教程(推荐)

Bootstrap菜鸟入门教程

Bootstrap简介

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

一、栅格系统

栅格系统的工作原理：

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

通过“行（row）”在水平方向创建一组“列（column）”。

你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。

通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。

栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。

如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备。

媒体查询：

媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。

Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。下面的媒体查询在 LESS 文件中使用，用来创建 Bootstrap 网格系统中的关键的分界点阈值。

查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/ 小屏幕（平板，大于等于 768px） /
@media (min-width: @screen-sm-min) { ... }

/ 中等屏幕（桌面显示器，大于等于 992px） /
@media (min-width: @screen-md-min) { ... }

/ 大屏幕（大桌面显示器，大于等于 1200px） /
@media (min-width: @screen-lg-min) { ... }

有时候也会在媒体查询代码中包含 max-width，从而将 CSS 的影响限制在更小范围的屏幕大小之内。

媒体查询有两个部分，先是一个设备规范，然后是一个大小规则。在上面的案例中，设置了下列的规则：

对于所有带有 min-width: @screen-sm-min 的设备，如果屏幕的宽度小于 @screen-sm-max，则会进行一些处理。

栅格参数

下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

下表总结了 Bootstrap 网格系统如

何跨多个设备工作

：

响应式的列重置

以下实例包含了4个网格，但是我们在小设备浏览时无法确定网格显示的位置。

为了解决这个问题，可以使用 .clearfix class和响应式工具来解决，如下面实例所示：

Box-shadow: inset 1px -1px 1px #444,inset -1px 1px 1px #444;">

Lorem ipsum dolor sit amet,consectetur adipisicing elit.

Box-shadow: inset 1px -1px 1px #444,consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet,sed do eiusmod tempor incididunt ut.

Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

我是标题2 h2

我是标题3 h3

我是标题4 h4

我是标题5 h5

我是标题6 h6

在标题内还可以包含标签或赋予 .small 类的元素，可以用来标记副标题。

如果需要向任何标题添加一个内联子标题，只需要简单地在元素两旁添加，或者添加 .small class，这样子您就能得到一个字号更小的颜色更浅的文本，如下面实例所示：

我是标题1 h1. 我是副标题1 h1

我是标题2 h2. 我是副标题2 h2

我是标题3 h3. 我是副标题3 h3

我是标题4 h4. 我是副标题4 h4

我是标题5 h5. 我是副标题5 h5

我是标题6 h6. 我是副标题6 h6

页面主体：Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予元素和所有段落元素。另外，

（段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

引导主体副本

用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。

列表：

Bootstrap 支持有序列表、无序列表和定义列表。

有序列表：有序列表是指以数字或其他有序字符开头的列表。

无序列表：无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。如果您不想显示这些着重号，您可以使用 class .list-unstyled 来移除样式。您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。

定义列表：在这种类型的列表中，每个列表项可以包含

和

元素。

代表定义术语，就像字典，这是被定义的属于（或短语）。接着，

是

的描述。您可以使用 class dl-horizontal 把

行中的属于与描述并排显示。

下面的实例演示了这些类型的列表：

有序列表

Item 1
Item 2
Item 3
Item 4

无序列表

Item 1
Item 2
Item 3
Item 4

未定义样式列表

Item 2
Item 3
Item 4

内联列表

Item 2
Item 3
Item 4

定义列表

Description 1: Item 1
Description 2: Item 2

水平的定义列表

Description 1

Item 1

Description 2

Item 2

@H_301_416@

下表提供了 Bootstrap 更多排版类的实例：

三、Bootstrap 代码

Bootstrap 允许您以两种方式显示代码：

第一种是 标签。如果您想要内联显示代码，那么您应该使用标签。


 should be wrapped as inline.


第二种是 
 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用  标签。
Sample text here...


还可以使用 .pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。

四、Bootstrap 表格

Bootstrap 支持的一些表格元素：

用于表格的样式

用于表格的行或者单元格

基本实例

为任意 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。
基本的表格布局
 
 502@名称
  @H_899_502@城市
 
 
 



条纹表格

通过添加 .table-striped class，您将在  内的行上看到条纹，如下面的实例所示：
条纹表格布局
 
 502@名称
  @H_899_502@城市
  @H_899_502@邮编
 
 
 



带边框的表格

通过添加 .table-bordered class，您将看到每个元素周围都有边框，且占整个表格是圆角的，如下面的实例所示：
边框表格布局
 
 502@名称
  @H_899_502@城市
  @H_899_502@邮编
 
 
 



悬停表格

通过添加 .table-hover class，当指针悬停在行上时会出现浅灰色背景，如下面的实例所示：
悬停表格布局
 
 502@名称
  @H_899_502@城市
  @H_899_502@邮编
 
 
 



精简表格

通过添加 .table-condensed class，行内边距（padding）被切为两半，以便让表看起来更紧凑，如下面的实例所示。这在想让信息看起来更紧凑时非常有用。
精简表格布局
 
 502@名称
  @H_899_502@城市
  @H_899_502@邮编
 
 



上下文类

下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。

上下文表格布局
 
 502@产品
  @H_899_502@付款日期
  @H_899_502@状态
 
 



响应式表格

通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。
响应式表格布局
 
  502@产品
  @H_899_502@付款日期
  @H_899_502@状态
 
  
 


五、Bootstrap 表单

基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：
向父 
 元素添加 role="form"。
把标签和控件放在一个带有 class .form-group 的 
 中。这是获取最佳间距所必需的。
向所有的文本元素 、 和 <select> <a href="/tag/tianjia/" target="_blank" class="keywords">添加</a> class ="form-control" 。</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<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="check<a href="/tag/Box/" target="_blank" class="keywords">Box</a>">
 <label>
  <input type="check<a href="/tag/Box/" target="_blank" class="keywords">Box</a>"> Check me out
 </label>
 </div>
 <button type="submit" class="btn btn-default">Submit</button>
</form></pre>
</div>
<p><p class="pic_center"><img  src="https://files.jb51.cc/file_images/article/201709/2017091709042531.png" /></p></p>
<p><h3>内联表单</h3></p>
<p>为 <form> 元素<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a> .form-inline 类可使其<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。</p>
<p><p class="pic_center"><img  src="https://files.jb51.cc/file_images/article/201709/2017091709042532.png" /></p></p>
<div class="jb51code">
<pre class="brush:xhtml;">
<form class="form-inline" role="form">
 <div class="form-group">
 <label class="sr-only" for="name"><a href="/tag/mingcheng/" target="_blank" class="keywords">名称</a></label>
 <input type="text" class="form-control" id="name" placeholder="请输入<a href="/tag/mingcheng/" target="_blank" class="keywords">名称</a>">
 </div>
 <div class="form-group">
 <label class="sr-only" for="inputfile"><a href="/tag/wenjian/" target="_blank" class="keywords">文件</a>输入</label>
 <input type="file" id="inputfile">
 </div>
 <div class="check<a href="/tag/Box/" target="_blank" class="keywords">Box</a>">
 <label>
  <input type="check<a href="/tag/Box/" target="_blank" class="keywords">Box</a>">请打勾
 </label>
 </div>
 <button type="submit" class="btn btn-default">提交</button>
</form></pre>
</div>
<p><p class="pic_center"><img  src="https://files.jb51.cc/file_images/article/201709/2017091709042533.png" /></p></p>
<p><h3>水平表单</h3></p>
<p>水平表单与其他表单不仅<a href="/tag/biaoji/" target="_blank" class="keywords">标记</a>的<a href="/tag/shuliang/" target="_blank" class="keywords">数量</a>上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：</p>
<p>向父 <form> 元素<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a> class .form-horizontal。</p>
<p>把<a href="/tag/biaoqian/" target="_blank" class="keywords">标签</a>和控件放在一个带有 class .form-group 的 <div> 中。</p>
<p>向<a href="/tag/biaoqian/" target="_blank" class="keywords">标签</a><a href="/tag/tianjia/" target="_blank" class="keywords">添加</a> class .control-label。</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<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="check<a href="/tag/Box/" target="_blank" class="keywords">Box</a>">
  <label>
   <input type="check<a href="/tag/Box/" target="_blank" class="keywords">Box</a>">请记住我
  </label>
  </div>
 </div>
 </div>
 <div class="form-group">
 <div class="col-sm-offset-2 col-sm-10">
  <button type="submit" class="btn btn-default"><a href="/tag/denglu/" target="_blank" class="keywords">登录</a></button>
 </div>
 </div>
</form></pre>
</div>
<p><p class="pic_center"><img  src="https://files.jb51.cc/file_images/article/201709/2017091709042534.png" /></p></p>
<p><h3>六、Bootstrap 按钮</h3>
</p>
<p>可作为按钮使用的<a href="/tag/biaoqian/" target="_blank" class="keywords">标签</a>或元素</p>
<p>为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。</p>
<p>以下样式可用于<a>,<button>,或 <input> 元素上：<br class="Apple-interchange-newline" />
</p>
<p><p class="pic_center"><img  src="https://files.jb51.cc/file_images/article/201709/2017091709042535.png" /></p></p>
<p><p class="pic_center"><img  src="https://files.jb51.cc/file_images/article/201709/2017091709042536.png" /></p></p>
<div class="jb51code">
<pre class="brush:xhtml;">
<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button></pre>
</div>
<p><p class="pic_center"><img  src="https://files.jb51.cc/file_images/article/201709/2017091709042537.png" /></p></p>
<p><h3>按钮大小</h3></p>
<p>使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。</p>
<p>下表列出了获得各种大小按钮的 class：</p>
<p><p class="pic_center"><img  src="https://files.jb51.cc/file_images/article/201709/2017091709042538.png" /></p></p>
<div class="jb51code">
<pre class="brush:xhtml;">
<p>
 <button type="button" class="btn btn-primary btn-lg">大的原始按钮</button>
 <button type="button" class="btn btn-default btn-lg">大的按钮</button>
</p>
<p>
 <button type="button" class="btn btn-primary">默认大小的原始按钮</button>
 <button type="button" class="btn btn-default">默认大小的按钮</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-sm">小的原始按钮</button>
 <button type="button" class="btn btn-default btn-sm">小的按钮</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-xs">特别小的原始按钮</button>
 <button type="button" class="btn btn-default btn-xs">特别小的按钮</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-lg btn-block">块级的原始按钮</button>
 <button type="button" class="btn btn-default btn-lg btn-block">块级的按钮</button>
</p></pre>
</div>
<p><p class="pic_center"><img  src="https://files.jb51.cc/file_images/article/201709/2017091709042539.png" /></p></p>
<p><h3>按钮状态</h3></p>
<p>Bootstrap 提供了激活、禁用等按钮状态的 class，下面将进行详细讲解。</p>
<p><h3>激活状态</h3></p>
<p>按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。</p>
<p>下表列出了让按钮元素和锚元素呈激活状态的 class：</p>
<p><p class="pic_center"><img  src="https://files.jb51.cc/file_images/article/201709/2017091709042540.png" /></p></p>
<p><h3>禁用状态</h3></p>
<p>当您禁用一个按钮时，它的颜色会变淡 50%，并失去渐变。</p>
<p>下表列出了让按钮元素和锚元素呈禁用状态的 class：</p>
<p><p class="pic_center"><img  src="https://files.jb51.cc/file_images/article/201709/2017091709042541.png" /></p></p>
<p><h3>按钮标签</h3></p>
<p>您可以在 <a>、<button> 或 <input> 元素上使用按钮 class。但是建议您在 <button> 元素上使用按钮 class，避免跨浏览器的不一致性问题。</p>
<p>下面的实例演示了这点：</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<a class="btn btn-default" href="#" rel="external nofollow" role="button">链接</a>
<button class="btn btn-default" type="submit">按钮</button>
<input class="btn btn-default" type="button" value="输入">
<input class="btn btn-default" type="submit" value="提交"></pre>
</div>
<p><p class="pic_center"><img  src="https://files.jb51.cc/file_images/article/201709/2017091709042542.png" /></p></p>
<p><h3>七、Bootstrap <a href="/tag/tupian/" target="_blank" class="keywords">图片</a></h3></p>
<p>在 Bootstrap 版本 3 中，通过为<a href="/tag/tupian/" target="_blank" class="keywords">图片</a><a href="/tag/tianjia/" target="_blank" class="keywords">添加</a> .img-responsive 类可以让<a href="/tag/tupian/" target="_blank" class="keywords">图片</a><a href="/tag/zhichi/" target="_blank" class="keywords">支持</a>响应式布局。其实质是为<a href="/tag/tupian/" target="_blank" class="keywords">图片</a>设置了 max-width: 100%;、 height: auto; 和 display: block; <a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>，从而让<a href="/tag/tupian/" target="_blank" class="keywords">图片</a>在其父元素中更好的缩放。</p>
<p>如果需要让使用了 .img-responsive 类的<a href="/tag/tupian/" target="_blank" class="keywords">图片</a>水平居中，请使用 .center-block 类，不要用 .text-center</p>
<p><p class="pic_center"><img  src="https://files.jb51.cc/file_images/article/201709/2017091709042543.png" /></p></p>
<div class="jb51code">
<pre class="brush:xhtml;">
<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre"></pre>
</div>
<p><a href="/tag/tupian/" target="_blank" class="keywords">图片</a>形状</p>
<p>通过为 <img> 元素<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>以下相应的类，可以让<a href="/tag/tupian/" target="_blank" class="keywords">图片</a>呈现不同的形状。</p>
<p><img  src="https://files.jb51.cc/file_images/article/201709/2017091709042544.png" /></p>
<div class="jb51code">
<pre class="brush:xhtml;">
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail"></pre>
</div>
<p><img  src="https://files.jb51.cc/file_images/article/201709/2017091709042545.png" /></p>
<p><h3>八、Bootstrap 辅助类</h3></p>
<p><h3>文本</h3></p>
<p>以下不同的类展示了不同的<a href="/tag/wenbenyanse/" target="_blank" class="keywords">文本颜色</a>。如果文本是个<a href="/tag/lianjie/" target="_blank" class="keywords">链接</a>鼠标移动到文本上会变暗：</p>
<p><p class="pic_center"><img  src="https://files.jb51.cc/file_images/article/201709/2017091709042546.png" /></p></p>
<p><h3>背景</h3></p>
<p>以下不同的类展示了不同的背景颜色。 如果文本是个<a href="/tag/lianjie/" target="_blank" class="keywords">链接</a>鼠标移动到文本上会变暗：</p>
<p><p class="pic_center"><img  src="https://files.jb51.cc/file_images/article/201709/2017091709042547.png" /></p></p>
<p><h3>其他</h3></p>
<p><p class="pic_center"><img  src="https://files.jb51.cc/file_images/article/201709/2017091709042548.png" /></p></p>
<p><h3>一些实例：</h3></p>
<p><h3><a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>图标</h3></p>
<p>使用通用的<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>图标来<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>模态框和警告框。使用 class close 得到<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>图标。</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<p><a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>图标实例
 <button type="button" class="close" aria-hidden="true">
 ×
 </button>
</p></pre>
</div>
<p><h3>三角符号</h3></p>
<p>通过使用三角符号可以指示某个元素具有下拉<a href="/tag/caidan/" target="_blank" class="keywords">菜单</a>的<a href="/tag/gongneng/" target="_blank" class="keywords">功能</a>。注意，向上弹出式<a href="/tag/caidan/" target="_blank" class="keywords">菜单</a>中的三角符号是反方向的。</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<span class="caret"></span></pre>
</div>
<p>让<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>块居中</p>
<p>为任意元素设置 display: block <a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>并通过 margin <a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>让其中的<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>居中。下面列出的类还可以作为 mixin 使用。</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<div class="center-block">...</div></pre>
</div>
<div class="jb51code">
<pre class="brush:xhtml;">
// Class
.center-block {
 display: block;
 margin-left: auto;
 margin-right: auto;
}
<p>// Usage as a mixin<br />
.element {<br />
.center-block();<br />
}</pre></p>
</div>
<p><h3><a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>或隐藏<a href="/tag/neirong/" target="_blank" class="keywords">内容</a></h3></p>
<p>.show 和 .hidden 类可以强制任意元素<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>或隐藏(对于屏幕阅读器也能起效)。这些类通过 !important 来避免 CSS 样式优先级问题，就像 quick floats 一样的做法。注意，这些类只对块级元素起作用，另外，还可以作为 mixin 使用。</p>
<p>.hide 类仍然可用，但是它不能对屏幕阅读器起作用，并且从 v3.0.1 版本开始就不建议使用了。请使用 .hidden 或 .sr-only 。</p>
<p>另外，.invisible 类可以被用来仅仅影响元素的可见性，也就是说，元素的 display <a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>不被改变，并且这个元素仍然能够影响文档流的排布。</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<div class="show">...</div>
<div class="hidden">...</div></pre>
</div>
<div class="jb51code">
<pre class="brush:xhtml;">
// Classes
.show {
 display: block !important;
}
.hidden {
 display: none !important;
}
.invisible {
 visibility: hidden;
}
<p>// Usage as mixins<br />
.element {<br />
.show();<br />
}<br />
.another-element {<br />
.hidden();<br />
}</pre></p>
</div>
<p><h3>九、Bootstrap 响应式实用工具</h3></p>
<p>Bootstrap 提供了一些辅助类，以便更快地实现对移动设备友好的开发。这些可以通过媒体<a href="/tag/chaxun/" target="_blank" class="keywords">查询</a>结合大型、小型和中型设备，实现<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>对设备的<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>和隐藏。</p>
<p>需要谨慎使用这些工具，避免在同一个<a href="/tag/zhandian/" target="_blank" class="keywords">站点</a>创建完全不同的版本。响应式实用工具目前只适用于块和表切换。</p>
<p><p class="pic_center"><img  src="https://files.jb51.cc/file_images/article/201709/2017091709042549.png" /></p></p>
<p><h3>打印类</h3></p>
<p>下表列出了打印类。使用这些切换打印<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>。</p>
<p><p class="pic_center"><img  src="https://files.jb51.cc/file_images/article/201709/2017091709042550.png" /></p></p>
<div class="jb51code">
<pre class="brush:xhtml;">
<div class="container" >
 <div class="row visible-on">
  <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
  <a href="/tag/Box/" target="_blank" class="keywords">Box</a>-shadow: inset 1px -1px 1px #444,inset -1px 1px 1px #444;">
   <span class="hidden-xs">特别小型</span>
   <span class="visible-xs">✔ 在特别小型设备上可见</span>
  </div>
  <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
  <a href="/tag/Box/" target="_blank" class="keywords">Box</a>-shadow: inset 1px -1px 1px #444,inset -1px 1px 1px #444;">
   <span class="hidden-sm">小型</span>
   <span class="visible-sm">✔ 在小型设备上可见</span>
  </div>
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
  <a href="/tag/Box/" target="_blank" class="keywords">Box</a>-shadow: inset 1px -1px 1px #444,inset -1px 1px 1px #444;">
   <span class="hidden-md">中型</span>
   <span class="visible-md">✔ 在中型设备上可见</span>
  </div>
  <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
  <a href="/tag/Box/" target="_blank" class="keywords">Box</a>-shadow: inset 1px -1px 1px #444,inset -1px 1px 1px #444;">
   <span class="hidden-lg">大型</span>
   <span class="visible-lg">✔ 在大型设备上可见</span>
  </div>
 </div>
</div></pre>
</div>
<p><p class="pic_center"><img  src="https://files.jb51.cc/file_images/article/201709/2017091709042551.png" /></p></p>
<p>以上这篇基于Bootstrap框架菜鸟入门教程(推荐)就是小编<a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a>给大家的全部<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>了，希望能给大家一个参考，也希望大家多多<a href="/tag/zhichi/" target="_blank" class="keywords">支持</a>编程之家。</p></div>
      <div class="topcard-tags"><a href="/tag/bootstrapjiaocheng/" class="tag_link" target="_blank">bootstrap教程</a></div>
      
                 <ul class="list-group">
        <li class="list-group-item"><a href="/bootstrap/36448.html" title="BootStrap数据表格实例代码">上一篇：BootStrap数据表格实例代码</a><a href="/bootstrap/36264.html" title="集合Bootstrap自定义confirm提示效果" class="text-muted pull-right">下一篇：集合Bootstrap自定义confirm提示效</a>
    
    </li>
    </ul>
              </div>
            </div>
          </div>
          <!-- row end -->
          
          <div class="row row-sm">
            <div class="col-sm-12 col-md-12 col-lg-12">
              <div class="card">
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-4605373693034661"
     data-ad-slot="9144498553"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
            </div>
          </div>

          <div class="row row-sm">
            <div class="col-sm-12 col-md-12 col-lg-12">
              <div class="card">
                  
    <div class="title"><h1>猜你在找的Bootstrap相关文章</h1></div>
<div class="list_con">
                                    <a href="/bootstrap/997481.html" title="使用BootStrapValidator来完成前端输入验证"><div class="title">使用BootStrapValidator来完成前端输入验证</div>
                                <div class="summary">BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证，由于本插件完全基...</div>
                                <time class="summary">作者：前端之家 时间：2021-02-18</time>
                                </a>
                            </div>
<div class="list_con">
                                    <a href="/bootstrap/997480.html" title="顶求网首页整体设计思路"><div class="title">顶求网首页整体设计思路</div>
                                <div class="summary">顶求网首页是一个web2.0博客类的网站首页，在该网站中用户可以发表博客，也可以推荐图书给...</div>
                                <time class="summary">作者：前端之家 时间：2021-02-18</time>
                                </a>
                            </div>
<div class="list_con">
                                    <a href="/bootstrap/997479.html" title="自己手写简约实用的Jquery tabs插件（基于bootstrap环境）"><div class="title">自己手写简约实用的Jquery tabs插件（基于bootstrap环境）</div>
                                <div class="summary">一直想改版网站首页的图书展示部分，以前的展示是使用BootStrap的传统的collapse,网页篇幅...</div>
                                <time class="summary">作者：前端之家 时间：2021-02-18</time>
                                </a>
                            </div>
<div class="list_con">
                                    <a href="/bootstrap/997478.html" title="BootStrap中Affix控件的使用方法及如何保持布局的美观"><div class="title">BootStrap中Affix控件的使用方法及如何保持布局的美观</div>
                                <div class="summary">在视窗足够大的时候是没有任何问题的，但是当拖动改变视窗的大小后会发现布局又变乱了，这...</div>
                                <time class="summary">作者：前端之家 时间：2021-02-18</time>
                                </a>
                            </div>
<div class="list_con">
                                    <a href="/bootstrap/997477.html" title="针对BootStrap中tabs控件的美化和完善"><div class="title">针对BootStrap中tabs控件的美化和完善</div>
                                <div class="summary">BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎。但是，它的样式比较单一，如何...</div>
                                <time class="summary">作者：前端之家 时间：2021-02-18</time>
                                </a>
                            </div>
<div style="border-bottom: 1px solid #f4f4f4;margin-top:20px;">
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="-fr-2o+fp-dx-wx"
     data-ad-client="ca-pub-4605373693034661"
     data-ad-slot="4561116489"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div><div class="list_con">
                                    <a href="/bootstrap/997475.html" title="使用BootStrap制作用户登录UI"><div class="title">使用BootStrap制作用户登录UI</div>
                                <div class="summary">先看看劳动成果 布局 左右各一半（col-md-6） 左侧登录框占左侧一半的10/12 右侧是登录系统...</div>
                                <time class="summary">作者：前端之家 时间：2021-02-18</time>
                                </a>
                            </div>
<div class="list_con">
                                    <a href="/bootstrap/997474.html" title="打造简单实用的Thinkphp分页样式(Bootstrap版本)"><div class="title">打造简单实用的Thinkphp分页样式(Bootstrap版本)</div>
                                <div class="summary">先吐槽一下ThinkPHP3.1版的分页样式，虽然看起来也很简单大方，但是所有的页码全是使用简单...</div>
                                <time class="summary">作者：前端之家 时间：2021-02-18</time>
                                </a>
                            </div>
<div class="list_con">
                                    <a href="/bootstrap/997473.html" title="Bootstrap轮播（carousel）插件中图片变形的终极解决方案——使用jqthumb.js"><div class="title">Bootstrap轮播（carousel）插件中图片变形的终极解决方案——使用jqthumb.js</div>
                                <div class="summary">在顶求网的首页中我使用了BootStrap的轮播（carousel）插件来展示文章中的图片。我在程序中...</div>
                                <time class="summary">作者：前端之家 时间：2021-02-18</time>
                                </a>
                            </div>
<div class="list_con">
                                    <a href="/bootstrap/997472.html" title="移动开发中单页异步加载所有列表项"><div class="title">移动开发中单页异步加载所有列表项</div>
                                <div class="summary">在做WEB开发的时候我们经常会遇到分页的处理，如果在PC上显示网页的话，使用传统的分页是可...</div>
                                <time class="summary">作者：前端之家 时间：2021-02-18</time>
                                </a>
                            </div>
<div class="list_con">
                                    <a href="/bootstrap/997471.html" title="仿豆瓣分类标签的实现"><div class="title">仿豆瓣分类标签的实现</div>
                                <div class="summary">为了和文章分类部分的样式进行区分，我决定自己动手写一个具有其他样式的分类标签集。刚好...</div>
                                <time class="summary">作者：前端之家 时间：2021-02-18</time>
                                </a>
                            </div>
<div style="border-bottom: 1px solid #f4f4f4;margin-top:20px;">
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="-fr-2o+fp-dx-wx"
     data-ad-client="ca-pub-4605373693034661"
     data-ad-slot="4561116489"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div></div>
            </div>
          </div>
        </div>
        <!-- left end-->
        
        <!-- right -->
        <div class="col-sm-12 col-md-12 col-lg-3">
          <!-- row -->
          <div class="row row-sm">
            <div class="col-sm-12 col-md-12 col-lg-12">
              <div class="card">
                <label class="main-content-label ">编程分类</label>
                <div class="cate mt-20"><a href="/html/" title="HTML">HTML</a><a href="/html5/" title="HTML5">HTML5</a><a href="/js/" title="JavaScript">JavaScript</a><a href="/css/" title="CSS">CSS</a><a href="/jquery/" title="jQuery">jQuery</a><a href="/bootstrap/" title="Bootstrap">Bootstrap</a><a href="/angularjs/" title="Angularjs">Angularjs</a><a href="/typescript/" title="TypeScript">TypeScript</a><a href="/vue/" title="Vue">Vue</a><a href="/dojo/" title="Dojo">Dojo</a><a href="/json/" title="Json">Json</a><a href="/electron/" title="Electron">Electron</a><a href="/nodejs/" title="Node.js">Node.js</a><a href="/extjs/" title="extjs">extjs</a><a href="/express/" title="Express ">Express </a><a href="/xml/" title="XML">XML</a><a href="/es6/" title="ES6">ES6</a><a href="/ajax/" title="Ajax">Ajax</a><a href="/flash/" title="Flash">Flash</a><a href="/unity/" title="Unity">Unity</a><a href="/react/" title="React">React</a><a href="/flex/" title="Flex">Flex</a><a href="/antdesign/" title="Ant Design">Ant Design</a><a href="/webfrontend/" title="Web前端">Web前端</a><a href="/weapp/" title="微信小程序">微信小程序</a><a href="/wxmp/" title="微信公众号">微信公众号</a><div class="clearfix"></div>
                </div>
              </div>
            </div>
          </div>
          <!-- row end -->
         <!-- row -->
          <div class="row row-sm">
            <div class="col-sm-12 col-md-12 col-lg-12">
              <div class="card"> 
<!-- f2er-rightads -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4605373693034661"
     data-ad-slot="7756441254"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
              </div>
            </div>
          </div>
          <!-- row end -->
          
          <!-- row -->
          <div class="row row-sm">
            <div class="col-sm-12 col-md-12 col-lg-12">
              <div class="card">
                <label class="main-content-label ">最新文章</label>
                <ul class="n-list"><li><a href="/bootstrap/997481.html" title="使用BootStrapValidator来完成前端输入验证" target="_blank">• 使用BootStrapValidator来</a></li>
<li><a href="/bootstrap/997480.html" title="顶求网首页整体设计思路" target="_blank">• 顶求网首页整体设计思路</a></li>
<li><a href="/bootstrap/997479.html" title="自己手写简约实用的Jquery tabs插件（基于bootstrap环境）" target="_blank">• 自己手写简约实用的Jquery</a></li>
<li><a href="/bootstrap/997478.html" title="BootStrap中Affix控件的使用方法及如何保持布局的美观" target="_blank">• BootStrap中Affix控件的使</a></li>
<li><a href="/bootstrap/997477.html" title="针对BootStrap中tabs控件的美化和完善" target="_blank">• 针对BootStrap中tabs控件的</a></li>
<li><a href="/bootstrap/997476.html" title="BootStrap简介及应用要点" target="_blank">• BootStrap简介及应用要点</a></li>
<li><a href="/bootstrap/997475.html" title="使用BootStrap制作用户登录UI" target="_blank">• 使用BootStrap制作用户登录</a></li>
<li><a href="/bootstrap/997474.html" title="打造简单实用的Thinkphp分页样式(Bootstrap版本)" target="_blank">• 打造简单实用的Thinkphp分</a></li>
<li><a href="/bootstrap/997473.html" title="Bootstrap轮播（carousel）插件中图片变形的终极解决方案——使用jqthumb.js" target="_blank">• Bootstrap轮播（carousel）</a></li>
<li><a href="/bootstrap/997472.html" title="移动开发中单页异步加载所有列表项" target="_blank">• 移动开发中单页异步加载所</a></li>
</ul>
              </div>
            </div>
          </div>
          <!-- row end -->


          <!-- row -->
          <div class="row row-sm">
            <div class="col-sm-12 col-md-12 col-lg-12">
              <div class="card">
                <label class="main-content-label ">热门标签
                  <span class="pull-right tx-12">
                    <a href="/all" target="_blank">更多 ►</a></span>
                </label>
                <div class="topcard-tags"><a href="/tag/guanbiyangao/" title="关闭广告" target="_blank">关闭广告</a><a href="/tag/danduheaders/" title="单独headers" target="_blank">单独headers</a><a href="/tag/fengzhuangdaima/" title="封装代码" target="_blank">封装代码</a><a href="/tag/tishicuowu/" title="提示错误" target="_blank">提示错误</a><a href="/tag/zhengshuzhengze/" title="整数正则" target="_blank">整数正则</a><a href="/tag/fei0kaitou/" title="非0开头" target="_blank">非0开头</a><a href="/tag/tiaoye/" title="跳页" target="_blank">跳页</a><a href="/tag/chuyema/" title="出页码" target="_blank">出页码</a><a href="/tag/antdtable/" title="antd table" target="_blank">antd table</a><a href="/tag/tishiURLweizhuce/" title="提示URL未注册" target="_blank">提示URL未注册</a><a href="/tag/gongzhonghaozhifu/" title="公众号支付" target="_blank">公众号支付</a><a href="/tag/vuehashmoshi/" title="vue hash模式" target="_blank">vue hash模式</a><a href="/tag/iSlider/" title="iSlider" target="_blank">iSlider</a><a href="/tag/chepaijianpan/" title="车牌键盘" target="_blank">车牌键盘</a><a href="/tag/xunhuantupian/" title="循环图片" target="_blank">循环图片</a><a href="/tag/echartsshuangzhexian/" title="echarts 双折线" target="_blank">echarts 双折</a><a href="/tag/zuoyoubuju/" title="左右布局" target="_blank">左右布局</a><a href="/tag/DllPlugin/" title="DllPlugin" target="_blank">DllPlugin</a><a href="/tag/duixiangchuangjian/" title="对象创建" target="_blank">对象创建</a><a href="/tag/daziyouxi/" title="打字游戏" target="_blank">打字游戏</a><a href="/tag/quanxuan/" title="圈选" target="_blank">圈选</a><a href="/tag/lianglan/" title="两栏" target="_blank">两栏</a><a href="/tag/yunhanshu/" title="云函数" target="_blank">云函数</a><a href="/tag/mengban/" title="蒙版" target="_blank">蒙版</a><a href="/tag/ES2020/" title="ES2020" target="_blank">ES2020</a><a href="/tag/chuchuang/" title="橱窗" target="_blank">橱窗</a><a href="/tag/wufenggundonglunbo/" title="无缝滚动轮播" target="_blank">无缝滚动轮播</a><a href="/tag/sekuaipengzhuang/" title="色块碰撞" target="_blank">色块碰撞</a><a href="/tag/zujianxiaohui/" title="组件销毁" target="_blank">组件销毁</a><a href="/tag/wendangcaozuo/" title="文档操作" target="_blank">文档操作</a></div>
              </div>
            </div>
          </div>
          <!-- row end -->
          
          
         <!-- row -->
          <div class="row row-sm">
            <div class="col-sm-12 col-md-12 col-lg-12">
              <div class="card"> 
<!-- f2er-rightads -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4605373693034661"
     data-ad-slot="7756441254"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
              </div>
            </div>
          </div>
          <!-- row end -->
          
          </div>
        <!-- right end -->
        </div>
    </div>

     <footer id="footer">
    <div class="container">
        <div class="row hidden-xs">
             <dl class="col-sm-6 site-link">
                <dt>最近更新</dt><dd><a href="/win11/1005688.html" title="重装系统软件怎么保留文件" target="_blank">· 重装系统软件怎么保留文件</a><span class="text-muted pull-right">12-02</span></dd>
<dd><a href="/win11/1005687.html" title="重装系统保留软件：简单教程" target="_blank">· 重装系统保留软件：简单教程</a><span class="text-muted pull-right">12-02</span></dd>
<dd><a href="/win11/1005686.html" title="如何重装系统并保留软件" target="_blank">· 如何重装系统并保留软件</a><span class="text-muted pull-right">12-02</span></dd>
<dd><a href="/win11/1005685.html" title="如何重装系统软件并保留数据" target="_blank">· 如何重装系统软件并保留数据</a><span class="text-muted pull-right">12-02</span></dd>
<dd><a href="/win11/1005684.html" title="如何重装系统软件并保留网络设置" target="_blank">· 如何重装系统软件并保留网络设置</a><span class="text-muted pull-right">12-02</span></dd>
<dd><a href="/win11/1005683.html" title="如何重装台式电脑系统" target="_blank">· 如何重装台式电脑系统</a><span class="text-muted pull-right">12-02</span></dd>
<dd><a href="/win11/1005682.html" title="如何重装系统并保留原有软件" target="_blank">· 如何重装系统并保留原有软件</a><span class="text-muted pull-right">12-02</span></dd>
<dd><a href="/win11/1005681.html" title="如何重装Lenovo电脑系统" target="_blank">· 如何重装Lenovo电脑系统</a><span class="text-muted pull-right">12-02</span></dd>
<dd><a href="/win11/1005680.html" title="重装系统保留数据：轻松恢复系统，保留重要文件" target="_blank">· 重装系统保留数据：轻松恢复系统，保留重要文件</a><span class="text-muted pull-right">12-02</span></dd>
<dd><a href="/win11/1005679.html" title="无法正常开机，如何重装系统" target="_blank">· 无法正常开机，如何重装系统</a><span class="text-muted pull-right">12-02</span></dd>
</dl>
            
           <dl class="col-sm-4 site-link">
                <dt>好站推荐</dt><dd> <a href="https://www.runoob.com" title="菜鸟教程(www.runoob.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程。" target="_blank">菜鸟教程</a></dd><dd> <a href="https://www.jb51.cc" title="编程之家(www.jb51.cc)是成立于2017年面向全球中文开发者的技术内容分享平台。提供编程导航、编程问答、编程博文、编程百科、编程教程、编程工具、编程实例等开发者最需要的编程技术内容与开发工具支持，与你一起学习编程，相信编程改变未来！" target="_blank">编程之家</a></dd><dd> <a href="" title="前端之家 f2er.com 前端开发人员所需学习知识手册。" target="_blank">前端之家</a></dd></dl>

            <dl class="col-sm-2 site-link">
                <dt>商务合作</dt>
                <dd><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=76874919&site=qq&menu=yes">联系我们</a></dd>
            </dl>

        </div>
        <div class="copyright">
            Copyright © 2019 前端之家. 当前版本 V7.0.16<br>
            <span class="ml5">前端之家 版权所有 
            <a href="https://beian.miit.gov.cn/"  target="_blank"  rel="nofollow">闽ICP备13020303号-10</a></span>
        </div>
    </div>
</footer>
<script type="text/javascript" src="/js/base.js"></script>
</body>
</html>

基于Bootstrap框架菜鸟入门教程(推荐)

Bootstrap简介

一、栅格系统

栅格系统的工作原理：

媒体查询：

栅格参数

何跨多个设备工作

响应式的列重置

偏移列

嵌套列

.row

.col-md-*

.col-md-*

第一列

第二列 - 分为四个盒子

.col-md-push-*

.col-md-pull-*

*

1

11

.col-md-push-*

.col-md-pull-*

二、Bootstrap 排版

到

均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。 我是标题1 h1

我是标题2 h2

我是标题3 h3

我是标题4 h4

我是标题5 h5

我是标题6 h6

我是标题2 h2. 我是副标题2 h2

我是标题3 h3. 我是副标题3 h3

我是标题4 h4. 我是副标题4 h4

我是标题5 h5. 我是副标题5 h5

我是标题6 h6. 我是副标题6 h6

列表：

下面的实例演示了这些类型的列表：

无序列表

未定义样式列表

内联列表

定义列表

水平的定义列表

三、Bootstrap 代码

四、Bootstrap 表格

基本实例

条纹表格

带边框的表格

悬停表格

精简表格

上下文类

响应式表格

五、Bootstrap 表单

均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

我是标题1 h1