Bootstrap-简介与基本使用

1.Bootstrap 简介

    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中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站，其中包括以下组件:

​ 下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等

4.布局容器

<div class="container">
    	居中
</div>

<div class="container-fluid">
			占满屏幕
</div>
# 后续在使用bootstrap做页面的时候 先写一个div class=container,之后在div内部书写页面

5.栅格系统

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

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

6.栅格参数

 7.按钮

Bootstrap 内置了几种预定义的按钮样式，每种样式都有自己的语义目的，并添加了一些额外的按钮includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

<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）元素