Bootstrap-简介与基本使用

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>
# 后续在使用bootstrap做页面的时候 先写一个div class=container,之后在div内部书写页面

3. 栅格系统

<div class="row"></div>
写一个row就是将所在的区域划分成12份

<div class="col-md-6 ">  获取你所要的份数
# 在使用bootstrap的时候 脑子里面一定要做12的加减法

4. 栅格参数

.col-xs-	.col-sm-	.col-md-	.col-lg-
# 针对不同的显示器 bootstrap会自动选择对应的参数
# 如果想要兼容所有的显示器 全部加上即可

# 在一行如何移动位置
<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>

# 针对表单标签 加样式就用form-control
	class="form-control"
"""
<input type="checkbox">222
<input type="radio">333
checkbox和radio我们一般不会给它加form-control，直接使用原生的即可
"""

# 针对报错信息 可以加has-error（input的父标签加）
<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">&laquo;</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">&raquo;</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