小白学前端------------简单了解BootStrap

一.BootStrap

1.UI框架

• 包含CSS,JS特效插件的工具集,快速开发网页
• 经典的UI框架:BootStrap,JQueryUI,MeiziUI…

2.BootStrap

• 用于生产环境(CSS\JavaScript)
• 源码(LESS) (LESS是CSS预处理器)
• SASS(SASS也是CSS预处理器)

3.CDN服务

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

4.响应式布局

4.1手机屏幕的分辨率

• 现在绝大部分手机视网膜屏幕,有物理分辨率和渲染分辨率
  • iphone8 物理分辨率750 * 1334 渲染分辨率:375 * 667
• 手机浏览器为了让没有做响应式处理的网页能够正常显示,自动进行缩放.视口的大小通常会设置位980px

4.2媒体查询

@media (min-width) {
    选择器 {
        
    }
    选择器 {
        
    }
}

媒体特性:
min-width
min-height
max-width
max-height
width
height
......

4.3 视口

让手机浏览器无法进行缩放操作
<meta  name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0">

5.布局

5.1 栅格系统

.container

<768px				100%		超小屏幕	xs
768px<= <992		750px		小屏幕		 sm
992px<=	<1200px		970px		中等屏幕	md
>=1200px			1170px		大屏幕		lg

行和列

行	.row
列	col-xs-*    col-sm-*   col-md-*   col-lg-*
把父元素分为12份,指定多少份就可以了


<div class="container">
  <div class="row">
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">文本内容</div>
  </div>
</div>

实例：流式布局容器

将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

5.2 表格

.table					表格
.table-striped 			斑马条纹
.table-bordered			边框
.table-hover			鼠标悬停
.table-condensed		紧缩表格
.sucess					标识成功或积极的动作
.ingfo					标识普通的提示信息或动作
.active					鼠标悬停在行或单元格上时所设置的颜色
.wranning				标识警告或需要用户注意
.danger					标识危险或潜在的带来负面影响的动作

5.3表单

.form-horizontal   水平排列表单
.form-group
.form-control
.control-label