Bootstrap
1. Bootstrap 简介
1. 基本信息
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。
Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC
(微软全国广播公司
)的Breaking News都使用了该项目。
国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来
2. 版本形态
目前使用较广的是版本2、3和4，其中2的最新版本的是2.3.2，3的最新版本是3.4.1，4的最新版本是4.4.1
在2018年1月下旬，Bootstrap团队发布了Bootstrap 4 正式版，4的最主要变化包括以下方面:
从 Less 迁移到 Sass改进网格系统缺省弹性框支持Dropped wells, thumbnails, and panels for cards合并所有 HTML resets 到一个新的模块中:Reboot全新自定义选项不再支持 IE8重写所有的 JavaScript 插件改进工具提示和 popovers 的自动定位改进文档其他大量改进
3. 包含内容
基本结构:
Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
CSS:
Bootstrap 自带以下特性:全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。
组件:
Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
JavaScript 插件:
Bootstrap包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。
定制:
您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。
4. 支持组件
Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站，其中包括以下组件:
下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等
5. 支持插件
Bootstrap自带了13个jQuery插件，这些插件为Bootstrap中的组件赋予了"生命"。其中包括:
模式对话框、标签页、滚动条、弹出框等。
6. 框架代码
可以对Bootstrap中所有的CSS变量进行修改，依据自己的需求裁剪代码。
7. 应用案例
Less 是一个 CSS 预处理器，让 CSS 具有动态性。另一方面，Bootstrap 是一个快速开发 Web App 和站点的工具包。这样，您可以在 CSS 中使用 Bootstrap 的 Less 变量、mixins(混合)和 nesting(嵌套)。
以上内容参考网站: https://baike.so.com/doc/5866541-7589096.html
2. 基本使用
该框架已经帮你写好了很多页面样式，你如果需要使用，只需要下载它对应文件，之后直接cv拷贝即可
在使用Bootstrap的时候所有的页面样式都只需要你通过class来调节即可
版本选择建议使用v3版本：https://v3.bootcss.com/
1. 注意
bootstrap的js代码是依赖于jQuery的，也就意味着你在使用Bootstrap动态效果的时候，一定要导入jQuery
2. 布局容器
<div
class="container">
左右两侧有留白
</div
>
<div
class="container-fluid">
左右两侧没有留白
</div
>
3. 栅格系统
<div
class="row"></div
>
写一个row就是将所在的区域划分成
12份
<div
class="col-md-6 "> 获取你所要的份数
4. 栅格参数
.col
-xs
- .col
-sm
- .col
-md
- .col
-lg
-
<div
class="col-md-8 c1 col-md-offset-2"></div
>
5. 排版
bootstrap将所有原生的HTML标签的文本字体统一设置成了肉眼可以接受的样式
效果一样，但是标签表达的意思不一样（语义）
6. 表格
<table
class="table table-hover table-striped table-bordered">
<tr
class="success">
<td
>1</td
>
<td
>jason
</td
>
<td
>123</td
>
<td
>study
</td
>
</tr
>
<tr
class="active">...</tr
>
<tr
class="success">...</tr
>
<tr
class="warning">...</tr
>
<tr
class="danger">...</tr
>
<tr
class="info">...</tr
>
7. 表单
<div
class="container">
<div
class="col-md-8 col-md-offset-2">
<h2
class="text-center">登陆页面
</h2
>
<form action
="">
<p
>username
:<input type="text" class="form-control"></p
>
<p
>password
:<input type="text" class="form-control"></p
>
<p
>
<select name
="" id="" class="form-control">
<option value
="">111</option
>
<option value
="">222</option
>
<option value
="">333</option
>
</select
>
</p
>
<textarea name
="" id="" cols
="30" rows
="10" class="form-control"></textarea
>
<input type="submit">
</form
>
</div
>
</div
>
class="form-control"
"""
<input type="checkbox">222
<input type="radio">333
checkbox和radio我们一般不会给它加form-control，直接使用原生的即可
"""
<p
class="has-error">
username
:
<input type="text" class="form-control">
</p
>
8. 按钮
<a href
="https://www.baidu.com/" class="btn btn-primary">点我
</a
>
<button
class="btn btn-danger">按我
</button
>
<button
class="btn btn-default">按我
</button
>
<button
class="btn btn-success">按我
</button
>
<button
class="btn btn-info">按我
</button
>
<button
class="btn btn-warning">按我
</button
>
<button
class="btn btn-warning btn-lg">按我
</button
>
<button
class="btn btn-warning btn-sm">按我
</button
>
<button
class="btn btn-warning btn-xs">按我
</button
>
<input type="submit" class="btn btn-primary btn-block">
通过给按钮添加
.btn
-block 类可以将其拉伸至父元素
100%的宽度，而且按钮也变为了块级（block）元素
9. 图表
<h2
class="text-center">登陆页面
<span
class="glyphicon glyphicon-user"></span
></h2
>
<style
>
span
{
color
: greenyellow
;
}
</style
>
10. 导航条
<nav
class="navbar navbar-inverse">
<nav
class="navbar navbar-default">
11. 分页器
<nav aria
-label
="Page navigation">
<ul
class="pagination">
<li
>
<a href
="#" aria
-label
="Previous">
<span aria
-hidden
="true">«
;</span
>
</a
>
</li
>
<li
class="active"><a href
="#">1</a
></li
>
<li
><a href
="#">2</a
></li
>
<li
><a href
="#">3</a
></li
>
<li
><a href
="#">4</a
></li
>
<li
><a href
="#">5</a
></li
>
<li
>
<a href
="#" aria
-label
="Next">
<span aria
-hidden
="true">»
;</span
>
</a
>
</li
>
</ul
>
</nav
>
12. 弹框
https
://lipis
.github
.io
/bootstrap
-sweetalert
/
swal
('你还好吗?')
undefined
swal
('你还好吗?','我不好，想你了!')
undefined
swal
('你还好吗?','我不好，想你了!','success')
undefined
swal
('你还好吗?','我不好，想你了!','warning')
undefined
swal
('你还好吗?','我不好，想你了!','error')
undefined
swal
('你还好吗?','我不好，想你了!','info')
undefined
