什么是bootstrap？如何使用bootstrap？（附移动布局总结）

bootstrap

分享一句话：

别太晚睡，梦会变短。

正文开始！！！

介绍

Bootstrap是基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，可快速开发 Web 应用程序和网站。

响应式布局

以往写响应式布局是这样

借助媒体查询：

@media.screen and (max-width:750px){
	.contrainer{
		background:red
	}
}
@media.screen and (min-width:750px){
	.contrainer{
	}
}

现在用bootstrap:

<div class="container">这样就开启了响应式布局</div>

网格（栅栏）布局

首先：把页面分为12列
其次：根据不同适配器配置对应的属性

设备	属性
超小设备手机（<768px）	.col-xs-
小型设备平板电脑（≥768px）	.col-sm-
中型设备台式电脑（≥992px）	.col-md-
大型设备台式电脑（≥1200px）	.clo-lg-

demo:

<div class="container">
	<div class="row">
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">a</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">b</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">c</div>
	</div>
</div>

列嵌套

<div class="container">
	<div class="row">
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
			<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">ab</div>
			<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">ac</div>
		</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">b</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">c</div>
	</div>
</div>

列偏移

<div class="container">
	<div class="row">
		<div class="col-md-4">b</div>
		<div class="col-md-4 col-md-offset-4">c</div>
	</div>
</div>

列排序（互换）

<div class="container">
	<div class="row">
		<div class="col-md-4 col-push-8">a</div>
		<div class="col-md-8 col-pull-4">b</div>
	</div>
</div>

列隐藏

hidden-xs
hidden-sm
hidden-md
hidden-lg

<div class="container">
	<div class="row">
		<div class="col-md-4 hidden-md">a</div>
		<div class="col-md-8 ">b</div>
	</div>
</div>

列显示

visible-xs
visible-sm
visible-md
visible-lg

<div class="container">
<div class="row">
<div class="col-md-4 visible-md">a</div>
<div class="col-md-8 ">b</div></div>
</div>

移动端布局总结

移动端主流方案

1. 单独制作移动端页面（主流）
2. 响应式页面兼容移动端（其次）

移动端技术选型

1. 流式布局（百分比布局）
2. flex布局（推荐）
3. rem布局（推荐）
4. 响应式布局

建议：选一种为主要技术选型，其他技术作为辅助，叫做混合式技术开发

本篇文章到此结束！谢谢观看！
欢迎关注、点赞、评论、收藏~~~