前端基础(6)：BootStrap

（一）BootStrap

查询BootStrap官方文档是最有效并且最靠谱的学习方式

（1）简介

• BootStrap是什么
  • 一个开源的Web前端框架
  • 集合HTML/CSS/JavaScript
• 为什么要使用BootStrap
  • 使用BootStrap可以开发出适配多端的网页（电脑端、手机、平板），也就是网页的兼容性很好
• 使用版本：用于生产环境的BootStrap
• 在使用前需要导入的文件
  • 导入bootstrap.css
  • 导入jQuery.js
  • 导入bootstrap.js
  • <meta name="viewport" content="width=device-width, initial-scale=1">添加在head标签中保证移动设备优先
  • 将所有的内容放置在布局容器中:

  <div class="container">
   ...
  </div>
  

（2）栅格系统

• 栅格系统
  • 作用：让网页自动适应屏幕的大小
• 网页默认分为12列，col-lg-1表示当超大屏幕的时候一个元素占据屏幕中的一列（所以此时一行最多可以显示12个相同的元素）
• 类前缀（取决于屏幕的分辨率，具体数据需要查询BootStrap官方文档）
  • col-lg
  • col-md
  • col-sm
  • col-xs

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

• hidden-xs：在最小屏幕的时候隐藏元素

BootStrap CSS文档查询：https://v3.bootcss.com/css/#grid-options

（3）BootStrap组成

• BootStrap组成

  • 全局CSS样式
  • 组件
  • Javascript插件

• BootStrap将常用的CSS样式封装成了类，可以直接使用，比如

	<del>nothing</del>  //删除文字效果
	<u>I am the follower</u> //文字下划线效果

• 使用BootStrap例子：
  • Button按钮（可以将超链接封装成Button的样式）
  • 进度条
  • 轮播图
  • 栅格系统
• 具体参考https://v3.bootcss.com/components/ BootStrap组件

			<button type="button" class="btn btn-primary active">Primary Button active</button>
			<button type="button" class="btn btn-primary ">Primary Button not-active</button>
			<button type="button" class="btn btn-primary btn-lg"> Large Primary Button</button>

结论：使用BootStrap可以打造出适配于移动端的网站，并且有很多成熟的封装类可以直接使用