thinking_fioa
thinking_fioa

Bootstrap3基础教程

一、Bootstrap3基础教程

@author 鲁伟林
Bootstrap3是目前最受欢迎的前端框架，非常重要。本教材不包括: Bootstrap插件，有关插件知识，请看另一篇博客
参考网址是：http://www.runoob.com/bootstrap/bootstrap-tutorial.html
gitHub地址: https://github.com/thinkingfioa/Notes/tree/master/front-developer/bootstrap3/

特别说明

Bootstrap3中一个标签往往同时有col-xs、col-sm、col-md、col-lg。如何理解，看下解释:

  • 1.col-xs- 超小屏幕 手机(<768px)
  • 2.col-sm- 小屏幕 平板(>=768px)
  • 3.col-md- 中等屏幕 桌面显示器(>=992px)
  • 4.col-lg- 大屏幕 大桌面显示器(>=1200px)

1. Bootstrap简介

Bootstrap是一个快速开发Web应用程序和网站的前端框架。Bootstrap的学习需要先初步了解Html、Css、Javascript基础知识。

1.1 Bootstrap 包含的内容

  • 1.基本结构：Bootstrap提供了一个带有网格系统、链接样式、背景的基本结构
  • 2.CSS：Bootstrap提供多种基本的CSS的常用组件
  • 3.组件：Bootstrap包含了十几个可重用的组件
  • 4.JavaScript插件：Bootstrap包含了十几个自定义的jQuery插件

2. Bootstrap环境安装

Bootstrap安装有两种方法:

  • 1.下载Bootstrap，具体地址：地址
  • 2.使用CDN服务。国内推荐使用：https://www.staticfile.org/ ;国外推荐使用：https://cdnjs.com/

2.1 文件结构

如果下载的是Bootstrap已经编译的版本，解压ZIP文件，将看到下面的文件/目录结构:

Bootstrap3基础教程_第1张图片

如果下载了Bootstrap源代码,那么文件结构如下:

Bootstrap3基础教程_第2张图片

2.2 HTML中使用Bootstrap模版

需要包含jquery.js、bootstrap.min.js、bootstrap.min.css文件，用于让常规的HTML变为使用Bootstrap模版

代码:

    
    Bootstrap模版

二、 Bootstrap CSS

3. Bootstrap CSS概览

本章将学习Bootstrap底层结构的关键部分和一些最佳实践

3.1 HTML5文档类型(Doctype)

Bootstrap中使用了HTML5元素和CSS属性，所以必须使用HTML5文档类型(Doctype)，通常的Bootstrap项目请用以下代码开头

代码:


.....

3.2 移动设备优先

  • 1.Bootstrap3的设计目标是移动设备优先，然后才是桌面设备
  • 2.Bootstrap3开发的网站兼容移动设备，确保适当的绘制和触屏缩放
  • 3.width=device-width属性控制设备宽度，即使不同的设备带有不同的屏幕分辨率，也能保证完美的呈现
  • 4.initial-scale=1.0确保页面加载时，以1:1的比例呈现，不会有任何缩放
  • 5.user-scalable=no禁用其缩放功能
  • 6.maximum-scale=1.0与user-scalable=no同时使用时，用户可以滑动屏幕
代码:

4. Bootstrap 网格系统

Bootstrap提供一套响应式、移动设备优先的流式网格系统，随着不同设备屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列，以自动适配屏幕变化

4.1 Bootstrap网格系统(Grid System)工作原理

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了Bootstrap网格系统如果工作的:

  • 1.行必须放置在.container class内，以便获得适当的对齐(alignment)和内边距(padding)
  • 2.使用行来创建列的水平组
  • 3.内容应该放置在列内，且唯有列可以是行的直接子元素
  • 4.预定义的网格类，比如.row和.col-xs-4，可用于快速创建网格布局。LESS混合类可用于更多的语义布局
  • 5.列通过内边距(padding)来创建内容间的间隙
  • 6.网格系统是通过指定想要横跨的十二个可用的列来创建的。例如：要创建三个相等的列，则使用三个.col-xs-4
特别说明:

Bootstrap3中一个标签往往同时有col-xs、col-sm、col-md、col-lg。如何理解，看下解释:

  • 1.col-xs- 超小屏幕 手机(<768px)
  • 2.col-sm- 小屏幕 平板(>=768px)
  • 3.col-md- 中等屏幕 桌面显示器(>=992px)
  • 4.col-lg- 大屏幕 大桌面显示器(>=1200px)

5. Bootstrap 排版

使用Bootstrap的排版特性，可以创建标题、段落、列表及其他内联元素

5.1 标题(h1-h6)

Bootstrap定义了所有的HTML标题(h1到h6)的样式。提醒：使用Bootstrap模版时，需要使用3个文件:bootstrap.min.css、bootstrap.min.js、jquery.min.js。后面的代码样例将省略头

代码：



    
    Bootstrap
    
    
    


    
我是标题1 h1

    
我是标题2 h2

    
我是标题3 h3

    
我是标题4 h4

    
我是标题5 h5

    
我是标题6 h6

5.2 内联子标题(small)

如果需要向任何标题添加一个内联子标题，需要在元素两旁添加或者添加.small class。将得到一个字号更小、颜色更浅的文本。

代码:

    
我是标题1 h1 副标题h1.1

    
我是标题2 h2

    
我是标题3 h3 副标题h3.1

    
我是标题4 h4

5.3 引导主体副本(lead)

使用class="lead"来给段落添加强调文本，得到更大更粗、更高的文本。

代码:

    
引导主体副本

    

        这是一个演示引导主体副本用法的实例。
        这是一个演示引导主体副本用法的实例。

5.4 强调

Bootstrap提供了一些用于强调文本的类

  • 1.small: 文本为父文本大小的85%
  • 2.strong: 设置文本变粗体
  • 3.em: 文本斜体
  • 4.class="text-left": 向左对齐
  • 5.class="text-center": 居中对齐
  • 6.class="text-right": 向右对齐
  • 7.class="text-muted": 文本内容减弱
  • 8.class="text-primary": primary class效果
  • 9.class="text-success": success class效果
  • 10.class="text-info": info class效果
  • 11.class="text-warning": warning class效果 
  • 12.class="text-danger": danger class效果
代码:


    本行内容-small

    本行内容-strong

    本行内容-em

    
本行内容-left

    
本行内容-center

    
本行内容-right

    
本行内容-muted

    
本行内容-primary

    
本行内容-success

    
本行内容-info

    
本行内容-warning

    
本行内容-danger

5.5 缩写（abbr)

  • 1.Bootstrap利用元素样式，定义缩写效果：底部有一条虚线边框+鼠标悬停提示完整文本
  • 2.利用class=".initialism"来得到更小字体的文本
代码:

    WWW

    TF

5.6 地址(Address)

使用

标签，可以用来在网页上显示联系信息。

代码:

    

        Some Company, Inc.
        007 street

        Some City, State XXXXX

        P:1373814XXXX

    

    

        Email: 
        [email protected]

5.7 引用(Blockquote)

  • 1.使用默认的
    来显示引用
  • 2.默认的
    是左对齐
  • 3.class="pull-right"是定义右对齐
代码:

    

        一个带有源标题的引用
        Someone famous in Source Title
    

    

        一个向右对齐的标题引用
        Someone famous in Source Title

5.8 列表

Bootstrap 支持有序列表、无序列表和定义列表

  • 1.class="list-unstyled": 未定义样式列表
  • 2.class="list-inline":将所有列表项放置同一行
代码:

    
有序列表

    
    
        
  1. Item 1
    2. 
        
  2. Item 2
    3. 
        
  3. Item 3
    4. 
    

    
无序列表

    
    
        
  • Item 1
    • 
        
  • Item 2
    • 
        
  • Item 3
    • 
    

    
未定义样式列表

    
    
        
  • Item 1
    • 
        
  • Item 2
    • 
        
  • Item 3
    • 
    

    
内联列表

        
    
        
  • Item 1
    • 
        
  • Item 2
    • 
        
  • Item 3
    • 
    

    
定义列表

    

        
Description 1

        
Item 1

        
Description 2

        
Item 2

    

    
水平的定义列表

    

        
Description 1

        
Item 1

        
Description 2

        
Item 2

6. Bootstrap 代码

Bootstrap允许使用两种方式显示代码:

  • 1.第一种是标签。如果想要内联显示代码，就应该使用标签
  • 2.第二种是
    标签。如果想要用独立的块元素显示代码，则使用
    标签
  • 3.开始和结束标签，请使用unicode变体: <(<);和>(>)
代码:

    
<header>作为内联元素被包围

    

        如果需要将代码作为一个独立的块元素，需要使用标签:pre
    

    
        <article>
            <h1>Article Heading</h1>
        </article>

7. Bootstrap 表格

Bootstrap提供了一个清晰的创建表格的布局。Bootstrap支持的一些表格元素如下表:

、
标签 描述
为表格添加基础样式
表格标题行的容器元素，用来标识表格列
表格主体中的表格行的容器元素
一组出现在单行上的表格单元格的容器元素
默认的表格单元格
特殊的表格单元格，用来标识列或行。必须在内使用
关于表格存储内容的描述或总结

7.1 表格类

下列样式可用于表格:

  • 1.(.table): 为任意添加基本样式(只有横向分割线)
  • 2.(.table-striped): 为
    • 内添加斑马线形式条纹
  • 3.(.table-bordered): 为所有表格的单元格添加边框
  • 4.(.table-hover): 在
    • 内的任一行启用鼠标悬停状态
  • 5.(.table-condensed): 让表格更加紧凑
    • 代码:
    姓名表格
    # Firstname
    1 luweilin
    2 thinking_fioa
    3 pppp

    7.2

、类

下列类可用于表格的行或单元格

  • 1.(.active): 将悬停的颜色应用于行或单元格
  • 2.(.success): 表示成功的操作
  • 3.(.info): 表示信息变化的操作
  • 4.(.warning): 表示一个警告的操作
  • 5.(.danger): 表示一个危险的操作
代码:

    

        
表格

        

            所有属性都用上来:
        

        

            编号表格:
            
                

                    #
                    Firstname
                

            
            
                

                    1
                    luweilin-active
                

                

                    2
                    thinking_fioa-success
                

                

                    3
                    pppp-info
                

                

                    4
                    tzj-warning
                

                

                    5
                    lbf-danger

7.3 响应式表格

通过将任意的.table包在.table-responsive内，可以让表格滚动，以适应小型设备和大型设备

代码:

    

        

            表格

8. Bootstrap表单

Bootstrap通过一些简单的HTML标签和扩展的类即可创建出不同样式的表单

8.1 表单布局

Bootstrap提供了下列类型的表单布局：

  • 1.垂直表单(默认)
  • 2.内联表单
  • 3.水平表单

8.2 垂直或基本表单

基本的表单结构是Bootstrap自带的，下面列出创建一个基本表单的步骤：

  • 1.向父
    元素添加role="form"
  • 2.把标签和控件放在一个带有class .form-group的
    中。这是获取最佳间距所必需的
  • 3.向所有的文本元素、

    8.8 复选框(Checkbox)和单选框(Radio)

    • 1.checkbox提供用于从列表中选择若干个选项，而radio限制用户只能选择一个选项
    • 2.使用class .checkbox-inline或.radio-inline，控制它们显示在同一行
    代码:

    8.9 选择框(Select)

    选择框允许用户从多个选项中进行选择，默认情况下只能选择一个选项

    • 1.使用

      8.10 静态控件

      当需要在一个水平表单内的表单标签后放置纯文本时，需要在

      上使用class .form-control-static

      代码:
      
    
      
        
        
      [email protected]

      8.11 表单控件状态

      • 1.输入框焦点：当输入框(input)接收到focus时，输入框的轮廓会被移除，同时应用box-shadow
      • 2.禁用的输入框input：使用属性disabled禁用输入框
      • 3.禁用的字段集fieldset：对
        添加disabled属性来禁用
        内的所有控件
      • 4.验证状态：对父元素简单的添加适当的class(.has-warning、has-error或.has-success)即可验证
      代码:

      8.12 表单控件大小

      使用class .input-lg和.col-lg-* 来设置表单的高度和宽度

      • 1.input-lg: 放大表单高度
      • 2.input-sm: 缩小表单高度
      • 3.col-lg-*: 表示在大屏幕上占用几个格子。如: col-sm-10表示在小屏幕该div占用10个列的宽度

      8.13 表单帮助文本(help-block)

      表单控件可以在输入框input上有一个块级帮助文本，使用.help-block来占用整个宽度的内容块

      代码：
      
    帮助文本实例
    
    说明文档

      9. Bootstrap 按钮

      任何带有class .btn的元素都会继承圆角灰色按钮。下列样式同样适用于、

      9.1 按钮状态

      Bootstrap提供了激活、禁用等按钮状态的class

      • 1.激活状态(active)：激活状态呈现被压的外观(深色的背景、深色的边框、阴影)
      • 2.禁用状态(disabled)：禁用一个按钮时，它的颜色会变淡50%，并失去渐变
      代码:

      10. Bootstrap 图片

      Bootstrap提供了三个对图片应用的简单样式的class：

      • 1.img-rounded：将图片变成圆角，通过添加border-radius:6px来实现
      • 2.img-circle：将图片变成圆形，通过添加border-radius：50%来实现
      • 3.img-thumbnail：添加内边框效果，通过内边距(padding)和一个灰色的边框来实现
      • 4.img-responsive：让图片支持响应式设计。图片可以很好的扩展到父元素。使用max-width:100%和height:auto来实现

      11. Bootstrap 辅助类

      Bootstrap定义了诸多辅助类

      11.1 文本

      不同的类展示不同的文本颜色。包括链接标签文本也起同样的效果

      • 1.text-muted：文字变弱的样式
      • 2.text-primary
      • 3.text-success
      • 4.text-info
      • 5.text-warning
      • 6.text-danger
      代码：

      11.2 背景

      不同的类展示不同的背景颜色。如果是链接，鼠标移上去文本会变暗

      • 1.bg-primary
      • 2.bg-success
      • 3.bg-info
      • 4.bg-warning
      • 5.bg-danger
      代码:
      
    
      使用bg-danger样式文本
      
    链接文本使用bg-danger

      11.3 其他

      • 1.pull-left：元素浮动在左边
      • 2.pull-right：元素浮动在右边
      • 3.center-block：设置元素为display:block并居中显示
      • 4.clearfix：清除浮动
      • 5.show：强制元素显示
      • 6.hidden：强制元素隐藏
      • 7.sr-only：除了屏幕阅读器外，其他设备上隐藏元素
      • 8.sr-only-focusable：与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)
      • 9.text-hide：将页面元素所包含的文本内容替换为背景图
      • 10.close：显示关闭按钮
      • 11.caret：显示下拉式功能

      11.4 关闭标签

      使用class close得到关闭标签。

      代码:

      二、Bootstrap 布局组件

      12. Bootstrap 字体图标(Glyphicons)

      字体图标是在Web项目中使用的图标字体。可以在fonts文件夹内找到字体图标。字体图标列表：字体图标

      12.1 用法

      如需要使用图标，只需使用下列代码即可。

      代码:

      12.2 带有字体图标的导航栏

      代码:

      12.3 定制字体图标和尺寸

      代码:

      13. Bootstrap 下拉菜单(Dropdowns)

      Bootstrap下拉菜单是可切换的，是以列表格式显示链接的上下文菜单

      代码:

      13.1 选项

      • 1.pull-right(对齐)：通过向dropdown-menu中添加class .pull-right来向右对齐下拉菜单
      • 2.dropdown-header(标题)：使用dropdown-header向下拉菜单的标签区域添加标题
      • 3.dropup：指定向上弹出的下拉菜单
      • 4.disabled：下拉菜单中的禁用项
      • 5.divider：下拉菜单中的分割线

      14. Bootstrap 按钮组

      按钮组允许多个按钮被折叠在同一行

      • 1.btn-group：用于形成基本的按钮组，在btn-group中放置一系列带有class .btn按钮
      • 2.btn-tooler：用于将几组
        结合在一起
      • 3.btn-group-lg(btn-group-sm,btn-group-xs)：整个按钮组的大小控制
      • 4.btn-group-vertical：让一组按钮垂直堆叠显示

      14.1 基本按钮组(btn-group)

      btn-group用于形成按钮组，位于同一行中。

      代码：

      14.2 按钮工具栏(btn-toolbar)

      btn-toolbar用于将几个按钮组合并在一起

      代码:

      14.3 按钮的大小(btn-gruop-sm)

      btn-group-sm用于控制按钮大小，如：

      14.4 嵌套

      可以在一个按钮组内嵌套另一个按钮组，如果下拉菜单和一系列的按钮组使用时，则用到

      代码:

      14.5 垂直的按钮组(btn-group-vertical)

      使用btn-group-vertical来让按钮垂直显示

      15. Bootstrap 按钮下拉菜单

      Bootstrap支持向按钮添加下拉菜单，具体代码可参考14.4中的

      15.1 分割的按钮下拉菜单(divider)

      使用class .divider来实现分割下拉。代码:

    • 15.2 按钮下拉菜单的大小(btn-lg)

      使用class .btn-lg、btn-sm和btn-xs来指定按钮大小

      代码：

      15.3 按钮上拉菜单(dropup)

      菜单也可以往上拉，只需要在class .btn-group中添加class .dropup

      16. Bootstrap 输入框组(form-control)

      使用输入框组，可以很容易向基于文本的输入框添加作为前缀和后缀的文本或按钮。向form-control添加前缀或后缀元素的基本步骤如下:

      • 1.把前缀或后缀元素放在一个带有class .input-group中的
        中
      • 2.添加class .input-group-addon的中添加前缀内容
      • 3.补充input元素输入框
      代码：
      
    前缀内容

      16.1 输入框组的大小

      添加表单大小(input-group-lg、input-group-sm)来改变输入框组的大小

      代码：
       
      
        
      
            
      
                @

      16.2 复选框和单选框插件

      可以将复选框和单选框作为输入框的前缀或后缀元素

      代码:

      16.3 按钮插件

      可以将按钮作为输入框组的前缀或后缀元素。此时，不需要使用class .input-group-addon，而使用class .input-group-btn来包裹按钮

      代码:

      17. Bootstrap 导航元素

      Bootstrap提供用于定义导航元素的一些选项。使用相同的标记和基类.nav

      17.1 表格导航或标签(nav-tabs)

      创建一个标签式的导航菜单：

      • 1.以一个带有class .nav的无序列表开始
      • 2.添加class .nav-tabs
      代码:

      17.2 胶囊式的导航菜单(nav-pills)

      如果需要将标签改成胶囊式，只需要将class .nav-pills替换class .nav-tabs即可

      代码:

      17.3 垂直的胶囊式导航菜单(nav-stacked)

      在使用calss .nav和class .nav-pills的同时使用class .nav-stacked，让胶囊垂直堆叠

      代码:

      17.4 两端对齐的导航(nav-justified)

      当屏幕宽度大于768px时，在使用表格式导航(nav nav-tabs)和胶囊式导航(nav nav-pills)时，请同时使用class .nav-justified。以让导航的长度和父元素等宽。

      17.5 禁用链接(disabled)

      对每个class .nav添加class .disabled，则会创建一个灰色的链接

      代码:

      17.6 带有下拉菜单的标签

      向一个标签添加下拉菜单的步骤如下:

      • 1.以一个带有class .nav的无序列表开始
      • 2.添加class nav-tabs
      • 3.添加带有.dropdown-menu的无序列表
      代码：

      17.7 动态标签

      与tab-pane和data-toggle="tab"(或data-toggle="pill")一同使用，设置标签页对应的内容随标签切换而更改

      代码：
      

      
    
      
        首页，欢迎你
    
      
    
      
        iMac页面
    
      
    
      
        iPhone页面
    
      
    
      
        iWatch页面

      18. Bootstrap 导航栏

      Bootstrap导航栏包含了站点名称和基本导航定义样式

      18.1 默认的导航栏

      创建一个默认导航栏的基本步骤:

      代码:

      18.2 响应式的导航栏

      响应式的导航栏是指点击某按钮后，展开菜单。

      代码:

      18.3 导航栏中的表单(navbar-form)

      导航栏中的表单使用class .navbar-form，其确保了表单适当的垂直对齐和在较窄的窗口中折叠行为。

      代码:

      18.4 导航栏中的按钮(navbar-btn)

      可以使用class .navbar-btn向不在

      元素中添加

      18.5 导航栏中的文本(navbar-text)

      使用class .navbar-text向导航栏中添加文本字符串。通常与

      标签一起使用，确保适当的前导和颜色

      代码:

      18.6 结合图标的导航链接

      在常规的导航栏中使用常用的图标，更多图标请参见图标地址

      代码：

      18.7 组件对齐方式

      • 1.navbar-left：向左对齐导航栏中的元素
      • 2.navbar-right：向右对齐导航栏中的元素

      18.8 固定到顶部(navbar-fixed-top)

      Bootstrap导航栏可以动态定位。导航栏固定在顶部，让它成为随着页面一起滚动的静态导航栏。使用class .navbar-fixed-top。如：