Bootstrap_01(入门)

最新推荐文章于 2023-08-17 21:33:29 发布

YL-IP.man

最新推荐文章于 2023-08-17 21:33:29 发布

阅读量204

点赞数

文章标签： bootstrap 前端 javascript

本文链接：https://blog.csdn.net/qq_65186994/article/details/124518019

版权

Bootstrap前段开发框架是一个用于快速开发Web应用程序的前Duang框架

可以让HTML、CSS、JS使用Web时开发更加快捷

概述：BOotstrap是一个建立一个页面，就可以在三个终端（pc端，平板，手机）更完美的展示

响应式前段的框架

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>查询</title>
		<style type="text/css">
			.aa{
				background-color: blue;/* 背景颜色 */
				color: wheat;/* 字体颜色 */
				border: 0px;/* 去除边框 */
				width: 50px;/* 设置宽度 */
				height: 30px;/* 设置长度 */
				border-radius: 5px;/* 设置边框圆角 */
			}
		</style>
		<!-- 支持手机端 -->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 引入Bootstrap的CSS样式 -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
	</head>
	<body>
		<!-- 固定容器 -->
		<div class="container">
			<button class="aa">查询</button>
			<hr color="#0000FF" />
			<!-- Bootstrap按钮 -->
			<button class="btn btn-danger">搜索</button>
			<button class="btn-outline-success">搜索</button>
		</div>
		
		
		
		
		
		
		<!-- 引入JQuery的类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript"></script>
		<!-- 引入Bootstrap的类库 -->
		<script src="js/bootstrap.js" type="text/javascript"></script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Bootstrap实现</title>
		<!-- 引入Bootstrap的样式 -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<style type="text/css">
			.navbar-collapse {
				flex-grow: 0;
				/* 弹性扩大 占用父容器剩余空间 0代表不占用 */
			}
		</style>
	</head>
	<body>
		<!-- 导航区域 -->
		<nav class="navbar navbar-expand-lg navbar-light bg-light">
			<div class="container">
				<a class="navbar-brand" href="#">欢迎来到德莱联盟</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
				 aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarNav">
					<ul class="navbar-nav">
						<li class="nav-item active">
							<a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">登录</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">注册</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">我的购物车</a>
						</li>
					</ul>
				</div>
			</div>
		</nav>
		<!-- 开始用栅格搭建主页框架 -->
		<div class="container">
			<!-- 第一行1列 搜索区域 -->
			<div class="row" style="background-color: #F5DEB3;">
				<div class="col">
					搜索区域
				</div>
			</div>
		</div>
		<!-- 第二行1列 搜索区域 -->
		<div class="row" style="background-color: blue;">
			<div class="col-3" style="background-color: blueviolet;">
				左三为书籍分类
			</div>
			<div class="col-9" style="background-color: cyan;">
				右九为轮播图&新书上架以及热门书籍
			</div>

			<!-- 右九中轮播图 -->
			<div class="row">
				<div class="col">
					轮播图
				</div>
			</div>
			<!-- 右九中第二行 新书上架 五列 -->
			<div class="row">
				<div class="col">
					1新书上架
				</div>
				<div class="col">
					2新书上架
				</div>
				<div class="col">
					3新书上架
				</div>
				<div class="col">
					4新书上架
				</div>
				<div class="col">
					5新书上架
				</div>
				
			</div>




		</div>
		</div>

		<!-- 分别引入jQuery和Bootstrap的类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
		<script src="js/bootstrap.js" type="text/javascript" charset="UTF-8"></script>
	</body>
</html>

YL-IP.man

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap_01(入门)

Bootstrap前段开发框架是一个用于快速开发Web应用程序的前Duang框架可以让HTML、CSS、JS使用Web时开发更加快捷概述：BOotstrap是一个建立一个页面，就可以在三个终端（pc端，平板，手机）更完美的展示响应式前段的框架<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>查询</title> <style
复制链接

扫一扫