一、下载及使用

参考网站：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. jqgrid嵌套子表格

    jqgrid的subGrid子表格 jqGrid的一项高级功能就是嵌套子表格,使用起来也非常简单.使用的方式有两种: 使用普通的subGrid子表格: 使用一个完整jqGrid作为子表格: 1.选项含 ...

  2. 阿里云轻量应用服务器Lamp部署php工程踩过的坑

    第一次写博客,也不知道写什么,但是想坚持写博客来提升自己,不喜勿喷. 切回正题,使用阿里云的轻量应用服务器Lamp其实非常方便,价格也很便宜,一键购买需要的环境都帮你搭配好了,剩下的就是自己修改一下数 ...

  3. em标签和strong标签的区别

    今天模拟面试,第一个问题就是这个,然后我回答说就是表示强调,然后老师说还有吗,我说不知道了,然后,就没有然后了... 第一个层次的区别: <em>标签是告诉浏览器把其中的文本表示为强调的内 ...

  4. 修改 docker image 安装目录 (解决加载大image时报错："no space left on device")

    修改 docker image 安装目录 (解决加载大image时报错:"no space left on device" ) 基于Ubuntu16.04 docker版本: 17 ...

  5. Linux 账号管理与 ACL 权限配置

    要登陆 Linux 系统一定要有账号与口令才行,否则怎么登陆,您说是吧?不过, 不同的使用者应该要拥有不同的权限才行吧?我们还可以透过 user/group 的特殊权限配置, 来规范出不同的群组开发项 ...

  6. iOS日历中给一个事件加入多个提醒

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 假设认为写的不好请多提意见,假设认为不错请多多支持点赞.谢谢! hopy ;) iOS自带的日历应用中,我们最多仅仅能给一个事件设置2个提醒, ...

  7. 论文笔记：Chaotic Invariants of Lagrangian Particle Trajectories for Anomaly Detection in Crowded Scenes

    [原创]Liu_LongPo 转载请注明出处 [CSDN]http://blog.csdn.net/llp1992 近期在关注 crowd scene方面的东西.由于某些原因须要在crowd scen ...

  8. 有关怎样入门ACM

    想给大家看看   所以就弄了原创了,造成作者困扰请联系在下. 来源: 吴垠的日志 一些题外话 首先就是我为什么要写这么一篇日志.原因非常easy,就是由于前几天有个想起步做ACM人非常诚恳的问我该怎样 ...

  9. C#基础知识 yield与foreach

    什么时候可以使用yield的关键字来定义迭代器? 迭代器的返回类型必须是IEnumerable.IEnumerable<T>.IEnumerator 或 IEnumerator<T& ...

  10. (转）JVM工作原理和流程

    作为一名Java使用者,掌握JVM的体系结构也是必须的. 说起Java,人们首先想到的是Java编程语言,然而事实上,Java是一种技术,它由四方面组成:Java编程语言.Java类文件格式.Java ...