Boostrap技能点整理之【bootstrap简介】

bootstrap，目前市面上最受欢迎HTML、CSS、JavaScript框架，用于开发响应式布局、移动设备优先的 WEB 项目。

从今天起，我们就开始整理bootstrap的相关技能点。

什么是 Bootstrap呢？

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目【官方定义】。

为什么使用 Bootstrap？

容易上手：
只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：
Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
更多有关响应式设计的内容详见 Bootstrap 响应式设计

当然官方文档里面还有其他的，我觉得最重要的莫属这两点了。

下面先看两个简单的bootstrap的实例

实例一：

<!DOCTYPE html>
<html>
<head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body><div class="container"><div class="jumbotron"><h1>我的第一个 Bootstrap 页面</h1><p>重置窗口大小，查看响应式效果！</p> </div><div class="row"><div class="col-sm-4"><h3>第一列</h3><p>学的不仅是技术，更是梦想！</p><p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p></div><div class="col-sm-4"><h3>第二列</h3><p>学的不仅是技术，更是梦想！</p><p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p></div><div class="col-sm-4"><h3>第三列</h3>        <p>学的不仅是技术，更是梦想！</p><p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p></div></div>
</div></body>
</html>

下面是运行结果：

电脑端：

手机端：

实例二：

<!DOCTYPE html>
<html><head><title>Bootstrap 实例</title><!-- 包含头部信息用于适应不同设备 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 包含 bootstrap 样式表 --><link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css"></head><body><div class="container"><h2>表格</h2><p>创建响应式表格 (将在小于768px的小型设备下水平滚动)。另外：添加交替单元格的背景色：</p>      <div class="table-responsive">          <table class="table table-striped table-bordered"><thead><tr><th>#</th><th>Name</th><th>Street</th></tr></thead><tbody><tr><td>1</td><td>Anna Awesome</td><td>Broome Street</td></tr><tr><td>2</td><td>Debbie Dallas</td><td>Houston Street</td></tr><tr><td>3</td><td>John Doe</td><td>Madison Street</td></tr></tbody></table></div><h2>图像</h2><p>创建项应式图片(将扩展到父元素)。另外：图片以椭圆型展示：</p>            <img src="/upload/images/201509/40d5e05de34.gif" class="img-responsive img-circle" alt="Cinque Terre" width="304" height="236"> <h2>图标</h2><p>插入图标:</p>      <p>云图标: <span class="glyphicon glyphicon-cloud"></span></p>      <p>信件图标: <span class="glyphicon glyphicon-envelope"></span></p>            <p>搜索图标: <span class="glyphicon glyphicon-search"></span></p><p>打印图标: <span class="glyphicon glyphicon-print"></span></p>      <p>下载图标：<span class="glyphicon glyphicon-download"></span></p>      </div><!-- JavaScript 放置在文档最后面可以使页面加载速度更快 --><!-- 可选: 包含 jQuery 库 --><script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><!-- 可选: 合并了 Bootstrap JavaScript 插件 --><script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script></body></html>

运行结果：