一、下载及使用

参考网站：http://www.bootcss.com/

1、使用 BootCDN 提供的免费 CDN 加速服务（同时支持 http 和 https 协议）

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

2、预编译版

下载压缩包之后，将其解压缩到任意目录即可看到以下（压缩版的）目录结构：

bootstrap/

├── css/

│   ├── bootstrap.css

│   ├── bootstrap.css.map

│   ├── bootstrap.min.css

│   ├── bootstrap.min.css.map

│   ├── bootstrap-theme.css

│   ├── bootstrap-theme.css.map

│   ├── bootstrap-theme.min.css

│   └── bootstrap-theme.min.css.map

├── js/

│   ├── bootstrap.js

│   └── bootstrap.min.js

└── fonts/

    ├── glyphicons-halflings-regular.eot

    ├── glyphicons-halflings-regular.svg

    ├── glyphicons-halflings-regular.ttf

    ├── glyphicons-halflings-regular.woff

    └── glyphicons-halflings-regular.woff2
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="./css/bootstrap.css">

</head>

<body>

<div class="container">

    <div class="row">

        <div class="col-md-8 col-md-offset-4">

     <table class="table table-bordered table-hover">

            <tr>

                <th>姓名</th>

                <th>年龄</th>

                <th>班级</th>

                <th>操作</th>

            </tr>

             <tr class="danger">

                <td>张三</td>

                <td>23</td>

                <td>s19</td>

                <td><button class="btn-sm btn-danger">删除</button></td>

            </tr>

             <tr class="info">

                <td>李四</td>

                <td>23</td>

                <td>s18</td>

                 <td><button>删除</button></td>

             </tr>

             <tr class="default">

                <td>王五</td>

                <td>28</td>

                <td>s19</td>

                <td><button>删除</button></td>

            </tr>

</table>

        </div>

    </div>

</div>

<script src="jquery-3.1.1.js"></script>

<script>

   $("button").click(function () {

       console.log($(this));

       $(this).parent().parent().remove()

   })

</script>

</body>

</htm

demo

二、栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。

<div class="row">

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

</div>

<div class="row">

  <div class="col-md-8">.col-md-8</div>

  <div class="col-md-4">.col-md-4</div>

</div>

<div class="row">

  <div class="col-md-4">.col-md-4</div>

  <div class="col-md-4">.col-md-4</div>

  <div class="col-md-4">.col-md-4</div>

</div>

<div class="row">

  <div class="col-md-6">.col-md-6</div>

  <div class="col-md-6">.col-md-6</div>

</div>

【Bootstrap简单用法】的更多相关文章

  1. jquery.validate.js 表单验证简单用法

    引入jquery.validate.js插件以及Jquery,在最后加上这个插件的方法名来引用.$('form').validate(); <!DOCTYPE html PUBLIC " ...

  2. CATransition（os开发之画面切换） 的简单用法

    CATransition 的简单用法 //引进CATransition 时要添加包“QuartzCore.framework”,然后引进“#import <QuartzCore/QuartzCo ...

  3. 基于Bootstrap简单实用的tags标签插件

    http://www.htmleaf.com/jQuery/ jQuery之家 自由分享jQuery.html5和css3的插件库 基于Bootstrap简单实用的tags标签插件

  4. NSCharacterSet 简单用法

    NSCharacterSet 简单用法 NSCharacterSet其实是许多字符或者数字或者符号的组合,在网络处理的时候会用到 NSMutableCharacterSet *base = [NSMu ...

  5. [转]Valgrind简单用法

    [转]Valgrind简单用法 http://www.cnblogs.com/sunyubo/archive/2010/05/05/2282170.html Valgrind的主要作者Julian S ...

  6. Oracle的substr函数简单用法

    substr(字符串,截取开始位置,截取长度) //返回截取的字 substr('Hello World',0,1) //返回结果为 'H'  *从字符串第一个字符开始截取长度为1的字符串 subst ...

  7. Ext.Net学习笔记19：Ext.Net FormPanel 简单用法

    Ext.Net学习笔记19:Ext.Net FormPanel 简单用法 FormPanel是一个常用的控件,Ext.Net中的FormPanel控件同样具有非常丰富的功能,在接下来的笔记中我们将一起 ...

  8. TransactionScope简单用法

    记录TransactionScope简单用法,示例如下: void Test() { using (TransactionScope scope = new TransactionScope()) { ...

  9. WPF之Treeview控件简单用法

    TreeView:表示显示在树结构中分层数据具有项目可展开和折叠的控件 TreeView 的内容是可以包含丰富内容的 TreeViewItem 控件,如 Button 和 Image 控件.TreeV ...

随机推荐

  1. c++邻接表存储图（无向），并用广度优先和深度优先遍历（实验）

    一开始我是用c写的,后面才发现广搜要用到队列,所以我就直接使用c++的STL队列来写, 因为不想再写多一个队列了.这次实验写了两个多钟,因为要边写边思考,太菜了哈哈. 主要参考<大话数据结构&g ...

  2. 栈和队列的java简单实现

    今天看了一本书<啊哈 算法>,书的内容不多,一共两章,第一章是常见的排序算法包括桶排序.冒泡排序和快速排序,这些事基础的排序算法网上有很多资料说明,这里主要说第二章栈,对列,链表,书上使用 ...

  3. 通过c# 实现mysql 数据库的备份和附加

    近期涉及到通过c# 对mysq数据库的备份和附件功能 由于mysql 有类似的备份和附加的cmd命令.可是一直没用过,今天实践了下,感觉效率挺快.比自己写的效率高.以下我列出c#调用mysql的备份和 ...

  4. Weka学习 -- StringToWordVector 源代码学习（1）

    代码整个运行流程 參数设置 input数据,设置数据格式 batchFinished(),处理数据(Tokenzier,Stemming,Stopwords) determineDictionary( ...

  5. hdu 1233 还是畅通project（kruskal求最小生成树）

    还是畅通project Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tota ...

  6. Python笔记·第二章—— Python的编码问题（一）

    一.什么是编码 可以说,计算机是一个即聪明又笨蛋的家伙.说它聪明,是因为他可以做很多事情,它的强大无需多说,大家应该都有所了解以及感受.但是为什么说它又是个笨蛋呢,因为我们在电脑上写出的每一个字,保存 ...

  7. itextpdf添加非自带字体（例如微软雅黑）

    找到需要的字体,例如 在windows系统中找到需要字体,本例使用微软雅黑,使用C:\\Windows\\Fonts\\msyh.ttf. 代码如下: /** * 创建pdf,使用微软雅黑字体 * * ...

  8. 设置两个div是总是不能重合,浏览器user agent stylesheet问题

    如图 两个div之间总是有一个空行,设置了margin为0还是没卵用,f12调试发现 多了一个user agent stylesheet样式,经百度是浏览器自带的样式 重新为div内的元素ul设置cs ...

  9. solr集群的理解和配置（待更新）

    solr部署在tomcat下,solr集群依赖tomcat集群和zookeeper集群: zookeeper:1.对象注册和发放中心,实现异步调用. 2.配置中心.(solrConfig.xml,sc ...

  10. 【java设计模式】【创建模式Creational Pattern】抽象工厂模式Abstract Factory Pattern

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAW0AAABvCAIAAACo3AbKAAALvUlEQVR4nO1dUa7cOA7U/c+zwJxkf4