当前位置：移动技术网 > IT编程>网页制作>Html5 > Bootstrap

Bootstrap

2018年07月20日 | 移动技术网IT编程 | 我要评论

一、Bootstrap简介

1、Bootstrap是什么？

Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个开源的前端开发框架

基于HTML、CSS、JavaScript,代码简洁、视觉优美，用来快速开发基于PC以及移动端的Web页面，更快速、简单。

2010 年 6 月，Twitter 内部的工程师为了解决前端开发任务中的协作统一问题。经历

各种方案后，Bootstrap 最终被确定下来，并于 2011 年 8 月发布。经过很长时间的迭代升

级，由最初的 CSS 驱动项目发展成为内置很多 JavaScript 插件和图标的多功能 Web 前端

的开源框架。

Bootstrap 最为重要的部分就是它的响应式布局，通过这种布局可以兼容 PC 端、PAD

以及手机移动端的页面访问。

Bootstrap官网：http://

中文网：

版本：v3.0、v4.0

2、特点

l 跨设备、跨浏览器

兼容所有主流浏览器，包括IE7、IE8

l 响应式布局

支持PC、移动端（手机、PAD）等，移动设备优先。

l 丰富的组件

表单、下拉菜单、导航、面板、徽章、标签等

l 内置jQuery插件

模态框、工具提示、弹出框、轮播图等。

l 支持动态样式

LESS 、SASS,可以使用变量、嵌套、混合等，编写样式更快、更灵活

l 支持HTML5/CSS3

二、起步

下载Bootstrap

CDN:Content Delivery Network,即内容分发网络，提供稳定快速的资源网络

优化网站：

Js、css等一些库文件，压缩

CDN

解压后，目录呈现这样的结构：

bootstrap/

├── css/

│ ├── bootstrap.css

│ ├── bootstrap.css.map

│ ├── bootstrap.min.css

│ ├── bootstrap-theme.css

│ ├── bootstrap-theme.css.map

│ └── bootstrap-theme.min.css

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

主要分为三大核心目录：css(样式)、js(脚本)、fonts(字体)。

1.css 目录中有四个 css 后缀的文件，其中包含 min 字样的，是压缩版本，一般使用这个；不包含的属于没有压缩的，可以学习了解 css 代码的文件；而 map 后缀的文件则是css 源码映射表，在一些特定的浏览器工具中使用。

2.js 目录包含两个文件，是未压缩和压缩的 js 文件。

3.fonts 目录包含了不同后缀的字体文件。

准备

开发工具：Hbuild

测试工具：Firfox chrome （自带响应式设计模式）

基本模板

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</body>

</html>

注意：控制台报错：

源映射错误：TypeError: NetworkError when attempting to fetch resource. 源 URL：file:///E:/Bootstrap/code/css/bootstrap.css 源映射 URL：bootstrap.css.map[详细了解]

如果不将bootstrap.css.map和bootstrap.css放在一个目录下将报源映射错误

栅格系统

Bootstrap 的栅格系统，提供了一套响应式、移动设备优先的流式栅格系统。

一．移动设备优先

有一份非常重要的 meta，用于设置屏幕和设备等宽以及是否运行用户缩放，及缩放比例的问题。

二．布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。由于 padding 等

属性的原因，这两种容器类不能相互嵌套。

.container//固定容器

.container-fluid//100%宽度

栅格系统中，浏览器会随着屏幕的大小的增减自动分配最多 12 列。通过一系列的行(row)

与列(column)的组合来创建页面布局。工作原理如下：

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100%宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。

3.你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

4.类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。

5.栅格系统中的列是通过指定 1 到 12 的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。

6.如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

.col1{

background:red;

}

.col2{

background:#666;

}

.col3{

background:blue;

}

.col4{

background:green;

}

</style>

</head>

<body>

</div>

<hr/>

</div>

<hr/>

</div>

<hr/>

</div>

<hr/>

</div>

</body>

</html>

列偏移、列排序、列嵌套

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

.row div{

background:#ccc;

border: 1px solid red;

}

</style>

</head>

<body>

</div>

<hr/>

</div>

<hr/>

</div>

</div>

</body>

</html>

排版样式

1.页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 行高设置为 1.428(即

20px)；<p>段落元素被设置等于 1/2 行高(即 10px)；颜色被设置为#333。

2.标题

Bootstrap 分别对 h1 ~ h6 进行了 CSS 样式的重构，并且还支持普通内联元素定义 class=(.h1 ~ h6)来实现相同的功能。

注：Bootstrap字体颜色、字体样式、行高均被固定了，从而保

证了统一性，而原生的会根据系统内置的首选字体决定，颜色是最黑色。

在 h1 ~ h6 元素之间，还可以嵌入一个 small 元素作为副标题.

h1 ~ h3 下 small 元素的大小只占父元素的 65%，那么通过计算，h1 ~ h3 下的 small 为 23.4px、19.5px、15.6px；h4 ~ h6 下 small 元素的大小只占父元素的 75% ,分别为：13.5px、10.5px、9px。在 h1 ~ h6 下的 small 样式也进行了改变，颜色变成淡灰色：#777，行高为 1，粗度为 400。

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<span class="h1">span下的h1标题</span>

<hr/>

</div>

<hr/>

<span class="mark">span下的mark</span><br/>

<del>被删除的文本</del><br/>

<s>无用的文本</s><br/>

<ins>插入的文本</ins>

<u>带下划线的文本</u><br/>

<span class="small">span下的小号文本</span><br/>

<strong>着重强调的文本</strong><br/>

<b>用于高亮单词或短语，不带有任何着重的意味</b><br/>

<hr/>

<p style="border:1px solid red;width:30px" class="text-nowrap">超出后不换行</p>

<hr/>

<p class="text-lowercase">hello world!</p>//小写

<p class="text-uppercase">hello world!</p>//大写

<p class="text-capitalize">hello horld!</p>//首字母大写

<hr/>

<!--缩略语

class="initialism"复写html5的abbr

-->

中国北京天安门

</address>

<p>钢铁是咋样练成的？</p>

</blockquote>

<p>钢铁是咋样练成的？</p>

</blockquote>

<hr/>

<p>钢铁是咋样练成的？</p>

</blockquote>

<!--列表

list-unstyled：移除默认样式（无序列表不加小圆点）

list-inline：内联（设置为一行）

-->

<ul>

</ul>

</ul>

<hr/>

<!--水平排列描述列表

dl-horizontal:dt和dd水平排列

-->

<dd>是一款游戏</dd>

</dl>

<hr/>

press <kbd>ctrl + ,</kbd>

<hr/>

<pre><p>Please input...</p></pre>

</body>

</html>

代码样式

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<code>Console.log()</code>表示在控制台输出信息<br/>

请按<kbd>ctrl+s</kbd>进行保存

<hr/>

var a=10;

var b=20;

return a+b;

var a=10;

var b=20;

return a+b;

var a=10;

var b=20;

return a+b;

var a=10;

var b=20;

return a+b;

var a=10;

var b=20;

return a+b;

var a=10;

var b=20;

return a+b;

</pre>

var <var>abc</var>=10;

</body>

</html>

表格

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<!--表格

.table:实现基本的表格样式

.table-striped:条纹状表格(让<tbody>里的行产生一行隔一行加单色背景效果) 注：表格效果需要基于基本格式.table

. table-bordered:带边框的表格

.table-hover:让<tbody>下的表格悬停鼠标实现背景效果

-->

<thead>

<!--状态类

可以单独设置每一行/列的背景样式

active:鼠标悬停在行或单元格上

success:标识成功或积极的动作

info:标识普通的提示信息或动作

warning:标识警告或需要用户注意

danger:表示危险或潜在的带来负面影响的动作

-->

</tr>

</thead>

<tbody>

</tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

</body>

</html>

表单

<!DOCTYPE html>

<head>

<style>

</style>

</head>

<body>

<form>

</div>

</div>

</form>

<hr/>

<!--内联表单

(表单元素居于一行)

-->

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</form>

<hr/>

</div>

</div>

</form>

<hr/>

<form>

阅读服务协议

</textarea>

<!--

复选框

disabled:设置禁用

-->

<label>

<input type="checkbox" disabled>吃饭

</label>

</div>

<label>

<input type="checkbox">睡觉

</label>

</div>

<label>

<input type="checkbox">打豆豆

</label>

</div>

<!--

设置内联样式

-->

<input type="checkbox" disabled>睡觉

</label>

<input type="checkbox">打豆豆

</label>

<!--

设置下拉列表

-->

</select>

</form>

<hr/>

<!--校验状态

Has-success:成功状态

Has-error:失败状态

Has-warning:警告状态

添加额外的图标

glyphicon-ok：成功状态

glyphicon-warning-sign：警告状态

glyphicon-remove：错误状态

注意：图标显示在文本框中需要加上.has-feedback和.form-control-feedback

-->

</div>

</div>

</form>

<hr/>

</body>

</html>

按钮

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<button class="btn btn-default">button按钮</button>

<a href="#" class="btn btn-default" role="button">超链接按钮</a>

<br/>

<!--预定义样式、尺寸

样式：btn-default,btn-success,btn-info,btn-warning,btn-danger,btn-primary,

btn-link

尺寸：btn-lg >默认>btn-sm>btn-xs

btn-block:块级按钮（占整行）

-->

<button class="btn btn-primary ">首选项按钮</button>

<button class="btn btn-info btn-xs">一般信息按钮</button>

<button class="btn btn-default btn-block active">激活状态按钮</button>

<button class="btn btn-default btn-block disabled">禁用状态按钮</button>

<a href="#" class="btn btn-default disabled" role="button">禁用超链接按钮</a>

</body>

</html>

图片

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

img{

width:600px;

}

</style>

</head>

<body>

<!--图片 img-thumbnail自带响应式 img-responsive响应式的

.img-rounded:圆角

.img-circle：圆

.img-thumbnail：缩略图

-->

</body>

</html>

辅助类

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

img{

width:600px;

}

.crd{

width:200px;

}

</style>

</head>

<body>

<p class="text-info">一般文

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

轻松写出优雅的Restful风格API

什么是Restful风格? 为什么要使用它? 怎么写出restful风格的api? 你害怕别人问你这些问题？看完... [阅读全文]
前端的cookie

前端的cookie先自己总结一下（课本的相关具体细节看后面）先提一下：一定不要在 cookie 中存储重要和敏感... [阅读全文]
HTML5+CSS3基础知识汇总 (HTML5篇)

文章目录1. HTML5的介绍2. HTML5的优势3. HTML5前景趋势4. H5 新增语义化标签5.H5 ... [阅读全文]
前端HTML5+CSS3静态页面开发-博文尚美

前端html5+css3静态页面开发-博文尚美项目介绍博文尚美是一个设计网站, 此项目由html + css 布... [阅读全文]
设置a标签的download属性实现下载功能

HTML <a> 元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或... [阅读全文]
HTML5项目实战之旅行社网站——兼容响应式布局

旅行社网站之兼容响应式布局的html文件和css文件。 [阅读全文]
HTML5---Canvas相关内容1

Canvascanvas不能通过css来设置canvas的宽和高获取面板对象canvas的具体步骤页面加载获取面... [阅读全文]
canvas绘制星座（黄道十二宫）

canvas绘制黄道十二宫星座效果图对照图准备工作开始撸代码白嫖作者的代码效果图对照图准备工作（以下所有片段代码... [阅读全文]
HTML和CSS学习部分总结1

HTML和CSS学习部分总结1HTMLform标签input标签type属性select标签CSS常见选择器常见... [阅读全文]
教你玩转CSS响应式设计

目录什么是 Viewport?设置 ViewportCSS 网格视图什么是网格视图?响应式网格视图CSS 媒体查... [阅读全文]