Big-man的Bootstrap篇(二)

蔚落 2022-06-15 05:16 142阅读 0赞

# Big-man的Bootstrap篇(二) #

## 前言: ##

*  Big-man突然想要去深入地了解一下`Bootstrap`这个应用框架，毕竟很强大的技术需要更加仔细地推敲，才能发现其中蕴含的更强大的能量。

--------------------

## Bootstrap脚本架: ##

*  脚手架简单理解:  
    
    
     *  脚手架是指通过输入**简单指令**帮助Big-man快速搭建好一个基本环境的工具，就比如gulp是**任务自动构建工具**，`gulp-cli`则是以命令行的形式**安装**和**操作**`gulp`的工具。

### 脚手架: ###

*  什么是脚手架:  
    
    
     *  Big-man觉得与其理解**脚手架**， Big-man在这里说说**脚手架**的作用是什么？那就是**为减少重复性工作而做的重复性工作**的工具。

--------------------

## Bootstrap脚本架: ##

### 首先必须是使用`HTML5`文档类型: ###

*  Bootstrap使用的某些**`HTML`元素**和**`CSS`属性**需要文档类型为`HTML5 doctype`。 因此这一`文档类型`必须出现在项目的每个页面的开始部分。

<!DOCTYPE html>
    <html lang="en">
        ...
    </html>

--------------------

### Bootstrap的排版与链接: ###

*  `Bootstrap` 为**屏幕**、**排版**和**链接**设置了**基本的全局样式**。
 *  移除了`body`的 `margin`
 *  设置了 `body` 的背景颜色 `background-color: white`;
 *  使用 `@baseFontFamily`, `@baseFontSize` 和`@baseLineHeight` 属性作为Big-man排版的基础;
 *  通过 `@linkColor` 设置**全局链接颜色**，并且，当链接处于 `:hover` 状态时才会**带有下划线**;
 *  Big-man第一次阅读以上信息的时候也没有理解, 所以需要Big-man个人理解一下。也就是写代码进行操作一下的。

--------------------

### 引用Bootstrap样式： ###

*  `body`的**`margin`属性**被移除了, 并不是说不能设置margin的属性, 你可以自己手动的添加margin的属性和属性值,  
    只是在**bootstrap默认样式中并没有margin的属性设置**。
 *  其他的属性设置也是类似进行修改呈现Big-man想要的效果且不同于`Bootstrap`的样式。
 *  Big-man所认识的女程序员就是在这样的思维下写出了她自己矛盾的页面。默认引入Bootstrap的默认样式就出现了一些她自己无法理解的效果。

--------------------

\#\#\# \*\*栅格化系统示例\*\* : - Bootstrap默认的\*\*栅格系统\*\*为12列 ，形成一个\`940px\`宽的容器，默认\*\*没有启用响应式布局特性\*\* 。 如果加入\*\*响应式布局CSS文件\*\*，栅格系统会自动根据可视窗口的宽度从\`724px\`到\`1170px\`进行\*\*动态调整\*\*。 在可视窗口低于\`767px\`宽的情况下，列将不再固定并且会在垂直方向堆叠. - 对于简单的\*\*两列式布局\*\*，创建一个 \`.row \`容器，并在容器中加入合适数量的\` .span\* \`列即可。由于默认是12列的栅格，所有 \`.span\*\` 列所跨越的栅格数之和最多是\`12\`(或者等于其父容器的栅格数)。

*  这上面展示就是栅格化中的`.span2`和`.span9`两列, 两列的总和是**`12`个栅格**。

--------------------

### **偏移列** : ###

*  把列向右移动可使用`.offset*` 类。 每个类都给**列的左边距**增加了指定单位的列。
 *  例如，`offset4`将`.span4` 右移了4个列的宽度。

--------------------

### **嵌套列** : ###

*  在默认的栅格系统里, 在已有的`.span*`内添加一个新的 `.row` 并加入 `.span*`列，就可实现嵌套. 被嵌套列中的每列列数总和要等于父级列。

<div class="row">
          <div class="span9">
            Level 1 column
            <div class="row">
              <div class="span6">Level 2</div>
              <div class="span3">Level 2</div>
            </div>
          </div>
        </div>

*  所以`.span6`和`.span3`并不是总的宽度, 因为总的宽度(12列)相当于是`.span9`的总宽度。

--------------------

### **流式栅格系统** : ###

*  **流式栅格系统**对每一列的宽度使用百分比而不是像素数量。它和固定栅格系统一样拥有响应式布局的能力，这就保证它能对**不同的分辨率**和**设备**做出适当的调整。

--------------------

### **基本的流式栅格HTML代码片段** : ###

*  将`.row` 替换为 `.row-fluid`就能让任何一行**“流动”**起来。
 *  应用于**每一列的类不用改变**，这样能方便的在**流式**与**固定栅格**之间切换.。

--------------------

### **流式栅格的偏移** : ###

*  定义方式和固定网格系统相同 : 给任何想偏移的列添加 `.offset*` 即可.

--------------------

### **流式嵌套布局** : ###

*  和**固定栅格的嵌套**有一点不同 : 被**嵌套的列数之和要等于`12`**。
 *  这是因为**流式栅格**使用**百分比**来设置每列的宽度.

<div class="row-fluid">
          <div class="span12">
            Fluid 12
            <div class="row-fluid">
              <div class="span6">
                Fluid 6
                <div class="row-fluid">
                  <div class="span6">Fluid 6</div>
                  <div class="span6">Fluid 6</div>
                </div>
              </div>
              <div class="span6">Fluid 6</div>
            </div>
          </div>
        </div>

> JackDan9 Thinking