Bootstrap
标签：
JavaScript
一、简介
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
凡是使用过Bootstrap的开发者，都不在乎做这么两件事情：复制and粘贴。
它用于开发响应式布局、移动设备优先的 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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
View Code
引入：
<head> <!-- 在head标签上部导入bs的css --> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"> <!-- 再导入自定义修改的css --> <link rel="stylesheet" href="css/my.css"></head><body><!-- html代码结构 --> ... <!--bs的脚本依赖于jq, 所以要提前导入jq--><!--脚本逻辑尽量放在html结构之下--><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-3.3.1.js"></script><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="bootstrap-3.3.7-dist/js/bootstrap.js"></script></body>
三、布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器
<div class="container"> ...</div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器
<div class="container-fluid"> ...</div>
固定宽度：.container
流式布局：.container-fluid
<!--总结; 两种容器(container | container-fluid)默认都有左右15px padding--><!--固定宽度容器(采用响应式布局)--><div class="container"> <!-- 行: .row, 可以取消容器的默认左右15px padding--> <div class="row"> <h1 class="bg-info">标题</h1> </div></div><!--动态宽度布局(采用流式布局)--><div class="container-fluid"> <div class="row"> <h1 class="bg-info">标题</h1> </div></div>
四、响应式布局
概念：开发了一种自适应写法，即一次开发，处处显示！
超小屏幕：小于 768px
小屏幕：大于等于 768px
中等屏幕：大于等于 992px
大屏幕：大于等于 1200px
五、删格系统
1、概念
将父级可用宽度(content)均分为12等份！
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
[object Object] 栅格参数： [object Object]
使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。
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>
八、组件
官方文档
Time the study pain is temporary,has not learned the pain is life-long.
点击查看更多内容
1人点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦