weixin_30808693
weixin_30808693

Bootstrap

一、Bootstrap简介

1、Bootstrap是什么？

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

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

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

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

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

的开源框架。

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

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

 

Bootstrap官网：http://www.getbootstrap.com

中文网：http://www.bootcss.com

版本：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 （自带响应式设计模式）

基本模板

  

    

    

    

    

    

    <span style="font-family:'宋体';">基本模板</span><span style="font-family:Calibri;">

 

    

    

    

 

    

    

  

  

    

你好，世界！

    

    

    

    

  

注意：控制台报错：

源映射错误：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)的组合来创建页面布局。工作原理如下：

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

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

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

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

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

  

    

    

    

    <span style="font-family:'宋体';">栅格系统</span><span style="font-family:Calibri;">

    

    

    

    

    

    

 

 

  

  

  

col1

col2

col3

col4

 

col1

col2

col3

col4

 

col1

col2

col3

col4

 

col1

col2

col3

col4

 

  

 

列偏移、列排序、列嵌套

  

    

    

    

    <span style="font-family:'宋体';">栅格系统</span><span style="font-family:Calibri;">

    

    

    

    

    

    

 

 

  

  

  

col1

col2

col3

 

col1

col2

col3

 

col1

col2

col3

col4

col2

  

排版样式

1.页面主体

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

20px)；

段落元素被设置等于 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。

  

    

    

    

    <span style="font-family:'宋体';">排版样式</span><span style="font-family:Calibri;">

    

    

    

    

    

    

  

  

标题1小标题1

标题2小标题2

标题3

标题4

标题5

标题6

span下的h1标题

标题1页头组件

突出（lead）段落

段落

 

普通文本

标记文本

span下的mark

被删除的文本

无用的文本

插入的文本

带下划线的文本

小号文本

span下的小号文本

着重强调的文本

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

斜体文本

用于发言、技术词汇

 

左对齐

右对齐

居中对齐

两端对齐

超出后不换行

 

hello world!

//小写

hello world!

//大写

hello horld!

//首字母大写

 

百度

阿里">阿里巴巴

 

中国北京天安门

 

钢铁是咋样练成的？

百度百科

钢铁是咋样练成的？

百度百科

钢铁是咋样练成的？

百度百科

  • 无序列表1

  • 无序列表2

  • 无序列表3

  • 无序列表1

  • 无序列表2

  • 无序列表3

LOL

是一款游戏

 

press   ctrl   +   ,

Please   input...

 

  

 

代码样式

  

    

    

    

    <span style="font-family:'宋体';">代码样式</span><span style="font-family:Calibri;">

    

    

    

    

    

    

  

  

Console.log()表示在控制台输出信息

List

请按ctrl+s进行保存

 
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;

 

var abc=10;

  

表格

  

    

    

    

    <span style="font-family:'宋体';">表格</span><span style="font-family:Calibri;">

    

    

    

    

    

    

  

  

编号 姓名 性别 年龄 地址
1 张三 男 20 北京
2 李四 女 19 上海
3 马云 男 18 杭州

  

表单

表单

请输入邮箱" disabled>

请输入密码">

请输入邮箱">

请输入密码">

$

请输入金额"/>

.00

请输入性别">

请输入年龄">

请输入关键字">

请输入邮箱">

请输入密码">

吃饭

睡觉

打豆豆

 

睡觉

打豆豆

        

请输入邮箱" >

请输入密码">

  

按钮

  

    

    

    

    按钮

    

    

    

    

    

    

  

  

按钮"/>

超链接按钮


  

禁用超链接按钮

 

图片

  

    

    

    

    <span style="font-family:'宋体';">图片</span><span style="font-family:Calibri;">

    

    

    

    

    

    

  

  





  

 

辅助类

  

    

    

    

    <span style="font-family:'宋体';">辅助类</span><span style="font-family:Calibri;">

    

    

    

    

    

    

  

  

默认文本（柔和灰）

首选文本（主要蓝）

成功文本（成功绿）

一般文本（信息蓝）

危险文本（危险红）

警告文本（警告黄）

 

首选项情景背景色

成功情景背景色

一般情景背景色

警告情景背景色

危险情景背景色

 

左浮动

crd

右浮动

居中

显示段落

 

响应式工具

  

    

    

    

    响应式工具

    

    

    

    

    

    

  

  

中等屏幕时显示为块状

小屏幕时显示为内联

abc

  

图标

263个图标

可以使用或标签来使用

  

    

    

    

    <span style="font-family:'宋体';">图标</span><span style="font-family:Calibri;">

    

    

    

    

    

    

  

  


  

下拉菜单

 

声明式用法的关键核心：

1.外围容器使用 class="dropdown"包裹；

2.内部点击按钮事件绑定 data-toggle="dropdown"；

3.菜单元素使用  class="dropdown-menu"。

 

  

    

    

    

    <span style="font-family:'宋体';">下拉菜单</span><span style="font-family:Calibri;">

    

    

    

    

    

    

  

  



  

 

按钮组

  

    

    

    

    <span style="font-family:'宋体';">按钮组</span><span style="font-family:Calibri;">

    

    

    

    

    

    

  

  

  

左

中

右

  

按钮式下拉菜单

  

    

    

    

    <span style="font-family:'宋体';">按钮式下拉菜单</span><span style="font-family:Calibri;">

    

    

    

    

    

    

  

  

  

输入框组

  

    

    

    

    <span style="font-family:'宋体';">输入框组</span><span style="font-family:Calibri;">

    

    

    

    

    

    

  

  

@

@163.com

http://

.com

  

导航

  

    

    

    

    <span style="font-family:'宋体';">导航</span><span style="font-family:Calibri;">

    

    

    

    

    

    

  

  

  

导航条

  

    

    

    

    <span style="font-family:'宋体';">导航条</span><span style="font-family:Calibri;">

    

    

    

    

    

    

  

  

请输入关键字">

Welcome to China

 

  

路径导航

  

    

    

    

    <span style="font-family:'宋体';">路径导航</span><span style="font-family:Calibri;">

    

    

    

    

    

    

  

  

    

  1. 首页

  2. 新闻

  3. 体育

  4. 马拉松

  

分页

  

    

    

    

    <span style="font-family:'宋体';">分页</span><span style="font-family:Calibri;">

    

    

    

    

    

    

  

  

  

标签

  

    

    

    

    <span style="font-family:'宋体';">标签</span><span style="font-family:Calibri;">

    

    

    

    

    

    

  

  

中国北京朝阳区

中国北京朝阳区

中国北京朝阳区

中国北京朝阳区

中国北京朝阳区

中国北京朝阳区

  

徽章

  

    

    

    

    <span style="font-family:'宋体';">徽章</span><span style="font-family:Calibri;">

    

    

    

    

    

    

  

  

未读消息5

巨幕

巨幕组件主要是展示网站的关键性区域。

 

  

    

    

    

    <span style="font-family:'宋体';">巨幕</span><span style="font-family:Calibri;">

    

    

    

    

    

    

  

  

    

Hello World

This is my First Demo

Lean More

Hello World

This is my First Demo

Lean More

  

缩略图

  

    

    

    

    缩略图

    

    

    

    

    

    

  

  

图片

关于这张图片的详情

点击进入

图片

关于这张图片的详情

点击进入

图片

关于这张图片的详情

点击进入

图片

关于这张图片的详情

点击进入

  

 

警告框

  

    

    

    

    <span style="font-family:'宋体';">警告框</span><span style="font-family:Calibri;">

    

    

    

    

    

    

  

  

不允许的操作

×

不允许的操作

不允许的操作

不允许的操作请下载

  

Well组件

可以实现简单的嵌入效果。

  

    

    

    

    well组件

    

    

    

    

    

    

  

  

        

Bootstrap

  

进度条组件

进度条组件为当前工作流程或动作提供时时反馈。

 

  

    

    

    

    进度条

    

    

    

    

    

    

  

  

        

        

         60%

        

        

        

        

        

        

         0%

        

        

        

        

        

        

         60%

        

        

        

        

        

        

         60%

        

        

        

        

        

        

         60%

        

        

        

        

        

        

         20%

        

        

         40%

        

        

         40%

        

        

  

 

媒体对象

  

    

    

    

    媒体对象

    

    

    

    

    

    

  

  

  

  

  

  

  

  

  

标题

  

企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有17种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。

   企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有17种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。

  

  

  

  

  

  

  

标题

  

企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有17种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。

   企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有17种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。

  

  

  

  

  

  

  

  

  

      

  •   

      

      

      

      

    标题

      

    企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有17种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。

       企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有17种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。

      

      

      

      

      

      

      

    标题

      

    企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有17种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。

       企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有17种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。

      

      

      

      

      

      

      

    标题

      

    企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有17种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。

       企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有17种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。

      

      

     

      

      

      

      

    标题

      

    企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有17种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。

       企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有17种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。

      

      

     

      

      

    •   

  •   

    标题

      

    企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有17种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。

       企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有17种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。

      

        

        

      

        

    •  

      

  

列表组

  

    

    

    

    列表组

    

    

    

    

    

    

  

  

  

  

      

  • 1.第一页

    •   

  • 2.第二页

    •   

  • 3.第三页

    •   

  • 4.第四页

    •   

  

  

      

  • 1.第一页

    •   

  • 2.第二页10

    •   

  • 3.第三页

    •   

  • 4.第四页

    •   

  

  

  

   1.第一页

   2.第二页10

   3.第三页

   4.第四页

  

  

    

  

  

  

  

  

 

  

  

  

  

  

列表标题

  

详细内容

  

   2.第二页10

   3.第三页

   4.第四页

  

  

  

 

 

面板

  

    

    

    

    <span style="font-family:'宋体';">面板</span><span style="font-family:Calibri;">

    

    

    

    

    

    

  

  

    

学生信息

 

编号 姓名 性别 年龄 出生地
1 张三 男 20 中国北京

 

底部

    

头部信息

内容区

  • 第一个

  • 第二个

  • 第三个

  • 第四个

底部

  

响应式嵌入组件

根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定内容的尺寸，能够在各种设备上缩放。

这些规则可以直接用于