使用 Bootstrap

引言

1. 掌握Boostrap的基本用法
2. 学会前端的快速制作
3. 学会页面渲染思想

Bootstrap 简介

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。它是一个 CSS/HTML 框架。Bootstrap 提供了优雅的 HTML 和 CSS规范。Bootstrap 一经推出后颇受欢迎，一直是 GitHub 上的热门开源项目。

为什么使用 Bootstrap？

• 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
• 浏览器支持：所有的主流浏览器都支持 Bootstrap。
• 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
• 响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
• 它为开发人员创建接口提供了一个简洁统一的解决方案。
• 它包含了功能强大的内置组件，易于定制。
• 它还提供了基于 Web 的定制。
• 它是开源的。

Bootstrap 环境安装

• 下载 Bootstrap
  您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。
• Bootstrap 包的内容
  基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
  CSS：Bootstrap 自带以下特性，全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。
  组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
  JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。
  定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

Bootstrap 网格系统

• Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
  响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

  
  
  

  Bootstrap网格系统

• Bootstrap 网格系统（Grid System）的工作原理网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：
  行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
  使用行来创建列的水平组。
  内容应该放置在列内，且唯有列可以是行的直接子元素。
  预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
  列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，
  表示第一列和最后一列的行偏移。
  网格系统是通过指定您想要横跨的十二个可用的列来创建的。
  例如，要创建三个相等的列，则使用三个 .col-xs-4。

  
  
  

  Bootstrap网格选项

基本的网格结构

   

      

      
      
   
   
...

• ...
  元素被添加，确保居中和最大宽度。

媒体查询的用法

• 媒体查询简介
  媒体查询是CSS3 的新特性
  媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。
  实例
  如果文档宽度小于 300 像素则修改背景颜色(background-color):

@media screen and (max-width: 800px) {
 body {
 background-color:lightblue;
 }
}

语法：@media [not] 媒体类型 and (媒体特性…) {你的样式}
EX : @media screen and (min-width:600px) and (max-width:900px){…..}

• 媒体查询的设备类型

  
  
  

  媒体查询的设备类型
• 媒体查询的媒体特性
  媒体特性也就是设备特性

1. 最大宽度max-width @media screen and (max-width:480px)
2. 最小宽度min-width @media screen and (min-width:900px)
3. 多个媒体特性使用 @media screen and (min-width:600px) and (max-width:900px)
4. 设备屏幕的输出宽度Device Width
 
5. not关键词 使用关键词“not”是用来排除某种制定的媒体类型 @media not print and (max-width: 1200px){样式代码}
6. only关键词, only用来指定某种特定的媒体类型
/*在不支持媒体查询的浏览器中解析到带only的媒体查询时，会将only视为媒体类型。（由于没有only这种媒体类型，因此将不会被应用）*/
media="only"

Bootstrap 表格

有了Bootstrap，只需写好html内容结构，加上Bootstrap写好的专用于表格的类样式即可实现精美的效果

表格样式

行列样式

     
    
      
    
    




    

        

            
名称
        
    
    

        

            
Sachin
        
    

Bootstrap 字体图标

Bootstrap 捆绑了 200 多种字体格式的字形。

• 首先让我们先来理解一下什么是字体图标?
  字体图标是在 Web 项目中使用的图标字体。虽然，Glyphicons Halflings 需要商业许可，但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。

• 获取字体图标
  我们已经在 环境安装 章节下载了 Bootstrap 3.x 版本，并理解了它的目录结构。在 fonts 文件夹内可以找到字体图标，它包含了下列这些文件：
  glyphicons-halflings-regular.eot
  glyphicons-halflings-regular.svg
  glyphicons-halflings-regular.ttf
  glyphicons-halflings-regular.woff
  相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css 和 bootstrap-min.css 文件上。

字体图标使用示例：

 User

• 全部的字体图标
  http://w3c.3306.biz/bootstrap_glyphicons/show-31-95-1.html

附A: 如何学习Bootstrap

基本样式	组件	插件
按钮	字体	模态窗口
表单	下拉菜单	可切换导航栏
表格	导航栏	提示工具
图片	分页	折叠
文本	标签	轮播
背景	徽章
布局	超大屏幕
.	副标题
.	缩略图
.	警告
.	进度条
.	面板
.	嵌入效果

附B: 特效

---

面包屑导航

  
First

  
Second

  
Third

进度条

    

        

            10% 完成（危险）
        
    

轮播图

    
    

        

        

        

    
    
    

        

            
        
        

            
        
        

            
        
    
    
    
        
        Previous
    
    
        
        Next
    

模态框

    测试模态框




    

        

            

                
                    ×
                
                

                    模态框（Modal）标题
                
            
            

                在这里添加一些文本
            
            

                关闭
                
                
                    提交更改