051_Bootstrap 框架

曾经终败给现在 2023-08-17 15:28 99阅读 0赞

**一，Bootstrap介绍**

Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。

它是为实现快速开发Web应用程序而设计的一套前端工具包。

它支持响应式布局，并且在V3版本之后坚持移动设备优先。

**二，为什么要使用Bootstrap？**

在Bootstrap出现之前：

命名：重复、复杂、无意义（想个名字费劲）

样式：重复、冗余、不规范、不和谐

页面：错乱、不规范、不和谐

在使用Bootstrap之后： 各种命名都统一并且规范化。 页面风格统一，画面和谐。

** 三，Bootstrap下载**

官方地址：[https://getbootstrap.com][https_getbootstrap.com]

中文地址：[https://www.bootcss.com][https_www.bootcss.com]

我们使用V3版本的Bootstrap，我们下载的是用于生产环境的Bootstrap。

**四，Bootstrap环境搭建**

下载后解压的文件目录结构：

bootstrap-3.3.7-dist/
    ├── css  // CSS文件
    │   ├── bootstrap-theme.css  // Bootstrap主题样式文件
    │   ├── bootstrap-theme.css.map
    │   ├── bootstrap-theme.min.css  // 主题相关样式压缩文件
    │   ├── bootstrap-theme.min.css.map
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css  // 核心CSS样式压缩文件
    │   └── bootstrap.min.css.map
    ├── fonts  // 字体文件
    │   ├── glyphicons-halflings-regular.eot
    │   ├── glyphicons-halflings-regular.svg
    │   ├── glyphicons-halflings-regular.ttf
    │   ├── glyphicons-halflings-regular.woff
    │   └── glyphicons-halflings-regular.woff2
    └── js  // JS文件
        ├── bootstrap.js
        ├── bootstrap.min.js  // 核心JS压缩文件
        └── npm.js

处理依赖

由于Bootstrap的某些组件依赖于jQuery，所以请确保下载对应版本的jQuery文件，来保证Bootstrap相关组件运行正常。

**五，Bootstrap 概览**

**概览：[https://v3.bootcss.com/css/][https_v3.bootcss.com_css]**

**1，HTML5 文档类型**

使用 Bootstrap 需要将页面设置为 HTML5 文档类型。

在项目中的每一页都要参照下面的格式进行设置。

<!DOCTYPE html>
    <html lang="zh-CN">
      ...
    </html>

**2，移动设备优先**

Bootstrap 将对移动的设备样式融合进了框架，而不是增加一个文件。所以，Bootstrap是移动设备优先

**2.1，自动适当的适应移动设备**

自动适当的 绘制 和 触屏缩放 需要在 <head> 中添加 viewport 元数据标签

**2.2，在移动设备上禁用其缩放(zooming)功能**

通过为视口（viewport）设置 meta 属性为 `user-scalable=no` 可以禁用其缩放(zooming)功能

更具自己的情况而定！！禁用缩放功能后，用户只能滚动屏幕，让网页看上去更像原生应用的感觉。

**3，网页样式重置（normalize.css）**

各种不同的浏览器的有些默认样式不同，对网页产生影响

**3.1，以前手写重置**

在 <head> 中加入

**3.2，这里用 normalize.css**

**介绍：**为了增强跨浏览器表现的一致性，我们使用了 Normalize.css，这是由 [Nicolas Gallagher][] 和 [Jonathan Neal][] 维护的一个CSS 重置样式库。

**使用：**在 BootCDN 网，搜索 normalize 复制 link 标签放入<head> 中；搜索 ：[https://www.bootcdn.cn/normalize/][https_www.bootcdn.cn_normalize]

**4，布局容器**

介绍：Bootstrap 需要为页面内容和栅格系统包裹一个 `.container` 容器。我们提供了两个作此用处的类。注意，由于 `padding（盒子的属性）` 等属性的原因，这两种 容器类不能互相嵌套。

**4.1，`.container`** 类用于固定宽度并支持响应式布局的容器(效果：网页两边留一定空间)

<div class="container">
         需要此效果的标签都放入这里
    </div>

**4.2，`.container-fluid` **类用于 100% 宽度，占据全部视口（viewport）的容器。(效果：网页两边不留空间，有盒子内边距)

<div class="container-fluid">
        需要此效果的标签
    </div>

**5，栅格系统**

**介绍：**Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

**即：**将一行最多分为12列的布局

**使用：**“行(row)” 必须是包含在`.container` （固定宽度）或 `.container-fluid` （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

**5.1，简单的划分列**

**5.2，移动端与pc端分开设置不同排列**

**6，媒体查询**

**同过 @media 查询所在媒体的屏幕大小**

6.1，设定在指定大小的屏幕内的显示效果

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>媒体查询</title>
        <style>
            .c {
          
                height: 100px;
                width: 100px;
            }
            .c1 {
          
                background-color: red;
            }
    
    /*当打开网页的设备是一个显示器设备，
    并且显示器的宽度小于400px时，
    使用下面的样式覆盖*/
            @media screen and (max-width: 400px) {
          
                .c1 {
                    background-color: green;
                }
            }
        </style>
    
    </head>
    <body>
    <div class="c c1"></div>
    </body>
    <html>

6.2，栅格系统的分割列的分界点

在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。

/* 超小屏幕（手机，小于 768px） */
    /* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
    
    /* 小屏幕（平板，大于等于 768px） */
    @media (min-width: @screen-sm-min) { ... }
    
    /* 中等屏幕（桌面显示器，大于等于 992px） */
    @media (min-width: @screen-md-min) { ... }
    
    /* 大屏幕（大桌面显示器，大于等于 1200px） */
    @media (min-width: @screen-lg-min) { ... }

我们偶尔也会在媒体查询代码中包含 `max-width` 从而将 CSS 的影响限制在更小范围的屏幕大小之内。

@media (max-width: @screen-xs-max) { ... }
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
    @media (min-width: @screen-lg-min) { ... }

min ：最小屏幕大小     max ： 最大屏幕大小

6.3，通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

<table style="width:646px;"> 
 <thead> 
  <tr> 
   <th>&nbsp;</th> 
   <th>超小屏幕&nbsp;<small>手机 (&lt;768px)</small></th> 
   <th>小屏幕&nbsp;<small>平板 (≥768px)</small></th> 
   <th>中等屏幕&nbsp;<small>桌面显示器 (≥992px)</small></th> 
   <th>大屏幕&nbsp;<small>大桌面显示器 (≥1200px)</small></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <th>栅格系统行为</th> 
   <td>总是水平排列</td> 
   <td colspan="3">开始是堆叠在一起的，当大于这些阈值时将变为水平排列C</td> 
  </tr> 
  <tr> 
   <th><code>.container</code>&nbsp;最大宽度</th> 
   <td>None （自动）</td> 
   <td>750px</td> 
   <td>970px</td> 
   <td>1170px</td> 
  </tr> 
  <tr> 
   <th>类前缀</th> 
   <td><code>.col-xs-</code></td> 
   <td><code>.col-sm-</code></td> 
   <td><code>.col-md-</code></td> 
   <td><code>.col-lg-</code></td> 
  </tr> 
  <tr> 
   <th>列（column）数</th> 
   <td colspan="4">12</td> 
  </tr> 
  <tr> 
   <th>最大列（column）宽</th> 
   <td>自动</td> 
   <td>~62px</td> 
   <td>~81px</td> 
   <td>~97px</td> 
  </tr> 
  <tr> 
   <th>槽（gutter）宽</th> 
   <td colspan="4">30px （每列左右均有 15px）</td> 
  </tr> 
  <tr> 
   <th>可嵌套</th> 
   <td colspan="4">是</td> 
  </tr> 
  <tr> 
   <th>偏移（Offsets）</th> 
   <td colspan="4">是</td> 
  </tr> 
  <tr> 
   <th>列排序</th> 
   <td colspan="4">是</td> 
  </tr> 
 </tbody> 
</table>

转载于:https://www.cnblogs.com/eternity-twinkle/p/11563291.html

[https_getbootstrap.com]: https://getbootstrap.com/
[https_www.bootcss.com]: https://www.bootcss.com/
[https_v3.bootcss.com_css]: https://v3.bootcss.com/css/
[Nicolas Gallagher]: https://twitter.com/necolas
[Jonathan Neal]: https://twitter.com/jon_neal
[https_www.bootcdn.cn_normalize]: https://www.bootcdn.cn/normalize/
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20230810/382dfeb6593c44c882b8c84d42ca78dc.png