bootstrap学习笔记day01

官网：https://www.bootcss.com/

bootstrap下载

bootstrap响应式页面开发

开发一套页面，适配不同分辨率的上网设备
其对HTML、CSS、JavaScript整体进行了一个封装

组成部分

1.全局css

2.组件

3.js插件

下载完成后，解压

bootstrap的使用步骤

1.导入jQuery-1.11.0min.js文件

<script type="text/javascript" src="../js/jquery-1.11.0.min.js">
			#中间不写内容
</script>
bootstrap在jQuery的基础上做了更为个性化的完善，所以需要先导入jQuery

2.导入bootstrap.css文件

<link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>

3.导入bootstrap.js文件

 <script type="text/javascript" src="../js/bootstrap.js">
		 	#中间不写内容
 </script>

4.创建视口（viewport ）

移动设备优先  <meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width 与当前设备屏幕适配   initial-scale=1 确保网页加载时以1：1比例呈现

视口：在浏览网页时使用的某个设备，如电脑视口，平板视口

5.创建布局容器（为了让页面适配不同的上网设备，需要将代码放在布局容器中）

第一种：.container 类用于固定宽度并支持响应式布局的容器。
<div class="container">
 ...
</div>
第二种：.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器
<div class="container-fluid">
  ...
</div>

在写HTML时，用link方式导入css

<link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>

外部js代码的导入

<script type = "text/javascript" src = "外部js的路径" charset = “utf-8>
						不在这儿写代码
</script>
之后就可以在HTML中直接引用css样式和js

5.媒体查询 ：

分辨率>1200px			 大屏幕
1200px>分辨率>992px      中等屏幕
992px>分辨率>768px       小屏幕
768px>分辨率             超小屏幕

6. 栅格系统：把每一行分成12份，超过12份自动换行

大屏幕       col-lg-n
中等屏幕     col-md-n
小屏幕       col-sm-6
超小屏幕     col-xs-12

代码展示

<div class="container-fluid" >
		<div class="col-lg-1 col-md-3 col-sm-4 col-xs-6" style=" height: 20px; border: 1px solid red;"></div>
		<div class="col-lg-1 col-md-3 col-sm-4 col-xs-6" style=" height: 20px; border: 1px solid red;"></div>
		<div class="col-lg-1 col-md-3 col-sm-4 col-xs-6" style=" height: 20px; border: 1px solid red;"></div>
		<div class="col-lg-1 col-md-3 col-sm-4 col-xs-6" style=" height: 20px; border: 1px solid red;"></div>
		<div class="col-lg-1 col-md-3 col-sm-4 col-xs-6" style=" height: 20px; border: 1px solid red;"></div>
		<div class="col-lg-1 col-md-3 col-sm-4 col-xs-6" style=" height: 20px; border: 1px solid red;"></div>
		<div class="col-lg-1 col-md-3 col-sm-4 col-xs-6" style=" height: 20px; border: 1px solid red;"></div>
		<div class="col-lg-1 col-md-3 col-sm-4 col-xs-6" style=" height: 20px; border: 1px solid red;"></div>
		<div class="col-lg-1 col-md-3 col-sm-4 col-xs-6" style=" height: 20px; border: 1px solid red;"></div>
		<div class="col-lg-1 col-md-3 col-sm-4 col-xs-6" style=" height: 20px; border: 1px solid red;"></div>
		<div class="col-lg-1 col-md-3 col-sm-4 col-xs-6" style=" height: 20px; border: 1px solid red;"></div>
		<div class="col-lg-1 col-md-3 col-sm-4 col-xs-6" style=" height: 20px; border: 1px solid red;"></div>				
</div>	

栅格加强，实现左边两列呈现一个格的效果

	<div class="container-fluid">
		<div class="col-lg-2" style="height: 20px; border: 1px solid red;"></div> #占两列
		<div class="col-lg-10" style="height: 20px; border: 1px solid red;">   #占十列
			<div class="col-lg-1" style="height: 20px; border: 1px solid red;"></div> #对这十列中又分为12个
			<div class="col-lg-1" style="height: 20px; border: 1px solid red;"></div>
			<div class="col-lg-1" style="height: 20px; border: 1px solid red;"></div>
			<div class="col-lg-1" style="height: 20px; border: 1px solid red;"></div>
			<div class="col-lg-1" style="height: 20px; border: 1px solid red;"></div>
			<div class="col-lg-1" style="height: 20px; border: 1px solid red;"></div>
			<div class="col-lg-1" style="height: 20px; border: 1px solid red;"></div>
			<div class="col-lg-1" style="height: 20px; border: 1px solid red;"></div>
			<div class="col-lg-1" style="height: 20px; border: 1px solid red;"></div>
			<div class="col-lg-1" style="height: 20px; border: 1px solid red;"></div>
			<div class="col-lg-1" style="height: 20px; border: 1px solid red;"></div>
			<div class="col-lg-1" style="height: 20px; border: 1px solid red;"></div>
		</div>	
</div>