前端基础06 Bootstrap框架

骑猪看日落 2022-01-16 21:13 273阅读 0赞

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

# Bootstrap下载 #

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

中文地址：[http://www.bootcss.com/][http_www.bootcss.com]

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相关组件运行正常。

# 概览 #

设置全局CSS样式；基本的HTML元素均可以通过class设置样式并得到增强效果；还有先进的栅格系统。

## 移动设备优先 ##

Bootstrap 是移动设备优先的  
为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。

## Normalize.css ##

为了增强跨浏览器表现的一致性，我们使用了 Normalize.css  
不再需要手动指定margin: 0之类的  
下载地址：[https://www.bootcdn.cn/normalize/][https_www.bootcdn.cn_normalize]

## 布局容器 ##

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器  
.container 类用于固定宽度并支持响应式布局的容器。

# 栅格系统 #

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

## 简介 ##

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。  
如果多于12列，那么一行放不下，会放到第二行

图例：  
![前端基础06 Bootstrap框架][06 Bootstrap]

图例代码：

**栅格参数**  
中等屏幕 桌面显示器 (≥992px)

.col-md-

## 列偏移 ##

使用 .col-md-offset- *类可以将列向右侧偏移。这些类实际是通过使用*  选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。  
示例图：  
![前端基础06 Bootstrap框架][06 Bootstrap 1]  
示例代码：

<div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
    </div>
    <div class="row">
      <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
      <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
    </div>
    <div class="row">
      <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
    </div>

## 列排序 ##

通过使用 .col-md-push- *和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。  
示例图：  
![前端基础06 Bootstrap框架][06 Bootstrap 2]  
示例代码：

# 使用备注 #

## 快速浮动 ##

转载于:https://blog.51cto.com/dzm911/2370183

[https_getbootstrap.com]: https://getbootstrap.com
[http_www.bootcss.com]: http://www.bootcss.com/
[https_www.bootcdn.cn_normalize]: https://www.bootcdn.cn/normalize/
[06 Bootstrap]: https://s1.51cto.com/images/blog/201903/28/664d41b6bbf3ef73e5bf989a3a2e693c.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[06 Bootstrap 1]: https://s1.51cto.com/images/blog/201903/28/2d0b59ea8aea329ff8c786c4f4c633ef.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[06 Bootstrap 2]: https://s1.51cto.com/images/blog/201903/28/f358d247fb7440b8005f29e1b464ffb9.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=