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>

运行结果：

关于细节代码我们后期在慢慢的整理。

欢

迎

关

注

公众号：雄雄的小课堂

CSDN：穆雄雄的博客

Boostrap技能点整理之【bootstrap简介】相关推荐

Boostrap技能点整理之【按钮样式】
昨天我们看了看bootstrap的网(栅)格系统,想必都对bootstrap网格系统有个大致的了解,今天我们再来看看bootstrap的按钮组合. 按钮的样式在boostrap中,任何带有 clas ...
Boostrap技能点整理之【网格系统】
今天我们来串串bootstrap总的网格系统,说到网格系统,依稀记得当时教程上不叫网格,而叫栅格,我总觉得这个栅(shān )读起来不得劲,就读他的另一个音,栅(zhà)格,每次遇到就读栅(zhà)格 ...
UA MATH566 统计理论10 Bootstrap简介
UA MATH566 统计理论10 Bootstrap简介 Bootstrap是用来替代基于CDF的一些统计计算的手段:当真实的CDF(记为F∈FF \in \mathbb{F}F∈F,F\mathb ...
【BootStrap】Bootstrap简介、环境安装与基本模板
转载请注明出处:http://blog.csdn.net/qq_26525215 本文源自[大学之旅_谙忆的博客] BootStrap简介什么是BootStrap 它由Twitter的设计师Mark ...
Bootstrap简介、下载bootstrap及引入文件说明、响应式容器和满屏容器、栅格系统
Bootstrap简介: Bootstrap是Twitter(推特)开发的,目前最受欢迎的前端开源框架,基于jQuery用于开发HTML.CSS.JavaScript,简洁灵活,常用于开发响应式布局及 ...
Bootstrap学习（一）：Bootstrap简介
一.Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更 ...
Stata：Bootstrap 简介
作者: 吴雄(湘潭大学),童天天(中南财经政法大学) 连享会 Source: The Bootstrap in Stata 原文链接: 连享会-Bootstrap简介文章目录 1. Boots ...
Bootstrap学习：bootstrap简介(节选w3c菜鸟日记)
Bootstrap 简介 Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap ...
本地存储和移动端js框架及bootstrap简介
本地存储和移动端js框架文章目录本地存储和移动端js框架一.本地存储 1.cookie 2.localStorage 3.sessionStorage 二.jquery UI 三.移动端js事件 ...

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

Boostrap技能点整理之【bootstrap简介】相关推荐

最新文章

热门文章