DAY64-前端入门-javascript（十）bootstrap

Bootstrap

一、简介

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。

二、安装

1、本地链接

官网下载

2、CDN

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

三、布局容器

• 固定宽度：.container，在缩放时，根据页面宽度在一定范围内保持固定值。

  ​ 小于768px ：padding:0 15px;

  ​ 768px与992px之间：宽度750px

  ​ 992px与1200px之间：宽度970px

• 流式布局：.container-fluid，类用于 100% 宽度，占据全部视口（viewport）的容器

四、响应式布局

• 超小屏幕：小于 768px
• 小屏幕：大于等于 768px
• 中等屏幕：大于等于 992px
• 大屏幕：大于等于 1200px

五、删格系统

1、概念

将父级可用宽度(content)均分为12等份

2、列比

• 超小屏幕：.col-xs-*
• 小屏幕：.col-sm-*
• 中等屏幕：.col-md-*
• 大屏幕：.col-lg-*

注：只设置小屏幕列比会影响大屏幕列比；只设置大屏幕列比小屏幕时会撑满屏幕

3、行

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

4、列偏移

• 超小屏幕：.col-xs-offset-*
• 小屏幕：.col-sm-offset-*
• 中等屏幕：.col-md-offset-*
• 大屏幕：.col-lg-offset-*

六、辅助类

1、 情境背景色

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

2、快速浮动

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

3、快速清浮动

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

4、显隐

<div class="show">...</div>
<div class="hidden">...</div>

七、字体图标

<i class="glyphicon glyphicon-*"></i>

八、组件