Bootstrap笔记【一】

水深无声 2021-09-17 02:46 378阅读 0赞

## 【一】简介 ##

1、什么是Bootstrap?

Bootstrap是一个用于快速开发web应用程序的和网站的前端框架。

Bootstrap是基于HTML、CSS、JavaScript的。

2、为什么使用Bootstrap？

易上手，Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

*  它为开发人员创建接口提供了一个简洁统一的解决方案。
 *  它包含了功能强大的内置组件，易于定制。
 *  它还提供了基于 Web 的定制。
 *  它是开源的。

3、Bootstrap的下载路径：[http://getbootstrap.com/2.3.2/getting-started.html][http_getbootstrap.com_2.3.2_getting-started.html]、

4、一个使用Bootstrap的HTML模板

<!DOCTYPE html>
    <html>
       <head>
          <title>Bootstrap 模板</title>
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          
          <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
     
          
          
          
       </head>
       <body>
          <h1>Hello, world!</h1>
     
          
          <script src="https://code.jquery.com/jquery.js"></script>
          
          <script src="js/bootstrap.min.js"></script>
       </body>
    </html>

## 【二】 Bootstrap CSS ##

Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，需要使用 HTML5 文档类型（Doctype）。

<!DOCTYPE html>
    <html>
    ....
    </html>

如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型（Doctype），可能会面临一些浏览器显示不一致的问题，甚至可能面临一些特定情境下的不一致，以致于您的代码不能通过 W3C 标准的验证。

\#万维网联盟（外语缩写：*W3C*）*标准*不是某一个*标准*，而是一系列*标准*的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。

### 移动设备优先 ###

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 **viewport meta** 标签，如下所示：

*width* 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 *device-width* 可以确保它能正确呈现在不同设备上。

*initial-scale=1.0* 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。

通常情况下，*maximum-scale=1.0* 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。

### 响应式图像 ###

通过添加 *img-responsive* class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。

接下来让我们看下这个 class 包含了哪些 css 属性。

在下面的代码中，可以看到*img-responsive* class 为图像赋予了 max-width: 100%; 和 height: auto; 属性，可以让图像按比例缩放，不超过其父元素的尺寸。

.img-responsive {
      display: block;
      height: auto;
      max-width: 100%;
    }

这表明相关的图像呈现为 *block*。当您把元素的 display 属性设置为 block，以块级元素显示。

设置 *height:auto*，相关元素的高度取决于浏览器。

设置 *max-width* 为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。

如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center。

### 全局显示、排版和链接 ###

基本的全局显示：

body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 14px;
      line-height: 1.428571429;
      color: #333333;
      background-color: #ffffff;
    }

第一条规则设置 body 的默认字体样式为 *"Helvetica Neue", Helvetica, Arial, sans-serif*。

第二条规则设置文本的默认字体大小为 14 像素。

第三条规则设置默认的行高度为 1.428571429。

第四条规则设置默认的文本颜色为 \#333333。

最后一条规则设置默认的背景颜色为白色。

排版：

使用 @font-family-base、 @font-size-base 和 @line-height-base 属性作为排版样式。

链接样式：

通过属性 @link-color 设置全局链接的颜色。

a:hover,
    a:focus {
      color: #2a6496;
      text-decoration: underline;
    }
    
    a:focus {
      outline: thin dotted #333;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
    }

所以，当鼠标悬停在链接上，或者点击过的链接，颜色会被设置为 \#2a6496。同时，会呈现一条下划线。

除此之外，点击过的链接，会呈现一个颜色码为 \#333 的细的虚线轮廓。另一条规则是设置轮廓为 5 像素宽，且对于基于 webkit 浏览器有一个 *-webkit-focus-ring-color* 的浏览器扩展。轮廓偏移设置为 -2 像素。

容器（Container）：

.container {
       padding-right: 15px;
       padding-left: 15px;
       margin-right: auto;
       margin-left: auto;
    }

把 container 的左右外边距（margin-right、margin-left）交由浏览器决定。

请注意，由于内边距（padding）是固定宽度，默认情况下容器是不可嵌套的。

.container:before,
    .container:after {
      display: table;
      content: " ";
    }

这会产生伪元素。设置 *display* 为 *table*，会创建一个匿名的 table-cell 和一个新的块格式化上下文。*:before* 伪元素防止上边距崩塌，*:after* 伪元素清除浮动。

如果 *conteneditable* 属性出现在 HTML 中，由于一些 Opera bug，围绕上述元素创建一个空格。这可以通过使用 *content: " "* 来修复。

.container:after {
      clear: both;
    }

它创建了一个伪元素，并确保了所有的容器包含所有的浮动元素。

Bootstrap 3 CSS 有一个申请响应的媒体查询，在不同的媒体查询阈值范围内都为 container 设置了max-width，用以匹配网格系统。

@media (min-width: 768px) {
       .container {
          width: 750px;
    }

Bootstrap浏览器/设备支持

Bootstrap 可以在最新的桌面系统和移动端浏览器中很好的工作。

旧的浏览器可能无法很好的支持。

<table> 
 <tbody> 
  <tr> 
   <th>&nbsp;</th> 
   <th>Chrome</th> 
   <th>Firefox</th> 
   <th>IE</th> 
   <th>Opera</th> 
   <th>Safari</th> 
  </tr> 
  <tr> 
   <td><strong>Android</strong></td> 
   <td>YES</td> 
   <td>YES</td> 
   <td>不适用</td> 
   <td>不适用</td> 
   <td>不适用</td> 
  </tr> 
  <tr> 
   <td><strong>iOS</strong></td> 
   <td>YES</td> 
   <td>不适用</td> 
   <td>不适用</td> 
   <td>不适用</td> 
   <td>YES</td> 
  </tr> 
  <tr> 
   <td><strong>Mac OS X</strong></td> 
   <td>YES</td> 
   <td>YES</td> 
   <td>不适用</td> 
   <td>YES</td> 
   <td>YES</td> 
  </tr> 
  <tr> 
   <td><strong>Windows</strong></td> 
   <td>YES</td> 
   <td>YES</td> 
   <td>YES*</td> 
   <td>YES</td> 
   <td>不适用</td> 
  </tr> 
 </tbody> 
</table>

\* Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器

###  Bookstrap网格系统 ###

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。简单地说，网页设计中的网格用于组织内容，让网站易于浏览，并降低用户端的负载。

[http_getbootstrap.com_2.3.2_getting-started.html]: http://getbootstrap.com/2.3.2/getting-started.html