BootStrap入门
2018-10-27 本文已影响0人
61etj
BootStrap
敏捷响应式框架，自带了多种样式，利用栅格系统对不同分辨率的的设备进行适配。
-
引入文件
<head> <meta http-equiv="X-UA-Compatible" content="IE=edge">//声明文档兼容模式，表示使用IE浏览器最新模式 <meta name="viewport" content="width=device-width,initial-scale=1，user-scale=no">//设置视口宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>,设置移动用户是否可以缩放网页yes/no <link href="bootstrap.css" rel="stylesheet"> </head> <script src="jquery.js" />//jquery文件 <script src="bootstrap.js" />//jquery文件 -
创建栅格系统，顶级需要被类为container或container-fluid包裹的div
<div class="container"></div>//固定宽度 <div class="container-fluid"></div>//全屏 -
创建行
<div class="row"></div>注意每行最多分配12列
-
创建列
<div class="col-xs-12 col-sm-6 col-md-8" hidden-lg></div>以下的数字代表列的权重，创建列分别为改列分配好各种比例的类来适配不同设备
1. 类col-xs-数字(超小屏幕 手机 <768px)
2. col-sm-数字(小屏幕 平板 >=768px)
3. col-md-数字(中等屏幕 显示器 >=992px)
4. col-lg-数字(>=1200px)
5. hidden-lg 宽度为lg时隐藏
引入
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">//声明文档兼容模式，表示使用IE浏览器最新模式
<meta name="viewport" content="width=device-width,initial-scale=1，user-scale=no">//设置视口宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>,设置移动用户是否可以缩放网页yes/no
<link href="bootstrap.css" rel="stylesheet">
</head>
<script src="jquery.js" />//jquery文件
<script src="bootstrap.js" />//jquery文件
//所有内容必须被以下两个div包裹，这两者不可嵌套
<div class="container"></div>//固定宽度
<div class="container-fluid"></div>//全屏
viewport
概念
设备屏幕上能用来显示网页的哪一块区域,因为像素问题，所以这块区域的大小一般会固定住，所以网页有可能超出这块区域，也可能小于这块区域，当设置好视口宽度时，网页会按比例放入这块区域中
自带样式
栅格系统
BootStrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口的尺寸的增加，系统会分配最多12列。
栅格系统需要预先将所有网页元素分成多个块，再将每个块使用 类col-xs-数字(超小屏幕 手机 <768px),col-sm-数字(小屏幕 平板 >=768px),col-md-数字(中等屏幕 显示器 >=992px)，col-lg-数字(>=1200px) 定义好在不同宽度时占用的大小
//举例
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8"></div>
<div class="col-xs-6 col-md-4"></div>
</div>
//以上代码将决定 在xs模式下第一个div占一行占一行,第二个占第二行一半，sm模式下两个div对半分占一行，md模式下两个div占一行，比例为2:1
//偏移 col-ma-offset-3 偏移三个
//visible-xs-*//<768显示其余隐藏，类似还有sm,md,lg，*代表block,inline,inline-block
//hidden-xs//隐藏xs 以此类推sm,md,lg
