Bootstrap01-优快云博客

1.它是一个用于快速开发Web应用程序和网站的前端框架

2.概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架

3.为什么要用?

1.移动设备优先

2.浏览器支持

3.容易上手

4.目标----实现网上书城部分界面布局

2.要移入jquery-3.3.1.js：jQuery库【注意：必须在Bootstrap核心库引入之前引入jQuery库】

	<!--
	1. 需要将bootstrap相关脚本导入到页面
	2. 使用bootstrap的栏格系统布局页面
	-->
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<link href="js/bootstrap-5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
	<script type="text/javascript" src="js/bootstrap-5.0.2/jquery-1.12.4.js"></script>
	<script type="text/javascript" src="js/bootstrap-5.0.2/dist/js/bootstrap.js"></script>
	<title></title>
	<style>
	#seacher {
	background: url(images/header_div.png) no-repeat;
	background-size: 100% 100%;
	text-align: center;
	padding-top: 10px;
	height: 100px;
	}
	#seacher > form {
	margin-top: 30px;
	}
	</style>
	</head>
	<body>
	<div class="container">

	<!-- 第一行，放功能导航-->
	<div class="row">

	<!--第一行第一列，占6个栏格-->
	<div class="col-6">
	<span>您好，欢迎来到网上书店</span>
	</div>
	<!--第一行第二列，占6个栏格，同时内容右对齐-->
	<div class="col-6" style="text-align:right;">
	<span id="nev">
	<a href="">登陆</a>\|
	<a href="">注册</a>\|
	<a href="">购物车</a> \|
	<a href="">首页</a>
	</span>
	</div>
	</div>

	<!-- 第二行放查询，只有1列，占全部的12栏格-->
	<div class="row">
	<div class="col-12" id="seacher">
	<form>
	<input type="text">
	<button class="btn btn-primary">查询</button>
	</form>
	</div>
	</div>

	</div>
	</body>
	</html>