前端基础06 Bootstrap框架

时间 2019-11-05

原文原文链接

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

Bootstrap下载

中文地址：http://www.bootcss.com/前端

Bootstrap环境搭建linux

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

概览

设置全局CSS样式；基本的HTML元素都可以经过class设置样式并获得加强效果；还有先进的栅格系统。bootstrap

移动设备优先

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

<meta name="viewport" content="width=device-width, initial-scale=1">

Normalize.css

为了加强跨浏览器表现的一致性，咱们使用了 Normalize.css
再也不须要手动指定margin: 0之类的
下载地址：https://www.bootcdn.cn/normalize/前端框架

布局容器

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

<div class="container">
  ...
</div>

栅格系统

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

简介

栅格系统用于经过一系列的行（row）与列（column）的组合来建立页面布局，你的内容就能够放入这些建立好的布局中。
若是多于12列，那么一行放不下，会放到第二行

图例：

图例代码：

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

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

.col-md-

列偏移

使用 .col-md-offset- 类能够将列向右侧偏移。这些类实际是经过使用 选择器为当前元素增长了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
示例图：

示例代码：

<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）的顺序。
示例图：

示例代码：

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

使用备注

快速浮动

<div class="pull-left">...</div>
<div class="pull-right">...</div>