Bootstrap 前端开发框架

思维导图：

 什么是Bootstrap?
    ①.诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架
    ②.是一个用于快速开发Web应用程序和网站的前端框架
    ③.Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷
    概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架

为什么要使用Bootstrap？
    ①.响应式设计（Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机）
    ②.移动设备优先
    ③.浏览器支持
    ④.容易上手

页面中引入库
    ①.下载Bootstrap库   https://v4.bootcss.com/
    bootstrap.css：Bootstrap核心样式【添加到head标签中】

    以下【添加到</body>之前】
    jquery-3.3.1.js：jQuery库【注意：必须在Bootstrap核心库引入之前引入jQuery库】
    bootstrap.js：Bootstrap核心库
    

栅格系统-Grid system 
    概念：Bootstrap提供了一套响应式、移动设备优先的流式网格系统
特点：会随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列
    网格系统策略图
    搭建首页整体框架

案例演示：

代码展示：

<!-- 栅格 -->
		<div class="container">
			<div class="row" style="background-color: pink;" >
				<div class="col">
					<form class="form-group">
						<div class="input-group mb-3">
							<input type="text" class="form-control" placeholder="请输入书名" />
							<button class="btn btn-primary">查询</button>
						</div>
					</form>
				</div>
			</div>
			<!-- 第二行 -->
			<div class="row" >
				<div class="col-3" style="background-color: bisque;">
					菜单
				</div>
				<div class="col-9">
					轮播图
					<div class="row" style="background-color: aqua;">
						<div class="col">
							n
							
						</div>
						<div class="col">
							n
							
						</div>
						<div class="col">
							n
							
						</div>
						<div class="col">
							n
							
						</div>
						<div class="col">
							n
							
						</div>
					</div>
					
					<div class="row" style="background-color: cadetblue;">
						<div class="col">
							n
							
						</div>
						<div class="col">
							n
							
						</div>
						<div class="col">
							n
							
						</div>
						<div class="col">
							n
							
						</div>
						<div class="col">
							n
							
						</div>
					</div>
					
				</div>
			</div>
						
				</div>

图片展示： 

今天的内容就分享到这啦！