【无标题】

1、BS网格

添加类名row 和col（12栅格）

2、BS表格

.table	为任意 <table> 添加基本样式 (只有横向分隔线)	尝试一下
.table-striped	在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)	尝试一下
.table-bordered	为所有表格的单元格添加边框	尝试一下
.table-hover	在 <tbody> 内的任一行启用鼠标悬停状态
.table-condensed	让表格更加紧凑

3、bs表单

基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：

• 向父 <form> 元素添加 role="form"。
• 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
• 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。

例

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

4、bs辅助

.pull-left	元素浮动到左边
.pull-right	元素浮动到右边
.center-block	设置元素为 display:block 并居中显示
.clearfix	清除浮动
.show	强制元素显示
.hidden	强制元素隐藏
.sr-only	除了屏幕阅读器外，其他设备上隐藏元素
.sr-only-focusable	与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)
.text-hide	将页面元素所包含的文本内容替换为背景图
.close	显示关闭按钮
.caret	显示下拉式功能

5、bs响应式     

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

6、BStab切换

例：

<ul id="myTab" class="nav nav-tabs">

  <li class="active">

    <a href="#home" data-toggle="tab">

      菜鸟教程

    </a>

  </li>

  <li><a href="#ios" data-toggle="tab">iOS</a></li>

  <li class="dropdown">

    <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Java

      <b class="caret"></b>

    </a>

    <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">

      <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>

      <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>

    </ul>

  </li>

</ul>

<div id="myTabContent" class="tab-content">

  <div class="tab-pane fade in active" id="home">

    <p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p>

  </div>

  <div class="tab-pane fade" id="ios">

    <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple

      TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>

  </div>

  <div class="tab-pane fade" id="jmeter">

    <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>

  </div>

  <div class="tab-pane fade" id="ejb">

    <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。

    </p>

  </div>

</div>

原文地址：https://www.jb51.cc/wenti/3280967.html