0
点赞
收藏
分享

微信扫一扫

使用Bootstrap搭界面案例以及图标的运用

生命中最美的是成长 2022-04-03 阅读 83
bootstrap

准备工作:

一，案例1，实现搜索书籍页面

使用的Bootstrap组件中的媒体对象(Media object)

 

代码块：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例1:实现搜索书籍页面</title>
		<!-- 引入Bootatrap的CSS -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<!-- 支持手机端 -->
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			.navbar-collapse {
				flex-grow: 0;/*1代表弹性扩大占用父容器剩余空间 设置为0表示不占用  在固定容器中*/
			}
			.ss {
				background-color: #DBDBDA;/* 背景颜色 */
				height: 100px;	/* 高度 */
				margin-top: 20px;/* 上间距 */
				
			}
			.form-group {
				width: 300px;/* 宽度 */
				margin-top: 31px;/* 上间距 */
				margin-left: auto;/* 左边距自适应 自动 */
				margin-right: auto;/* 右边距自适应 自动 */
			}
			.list-group{
				margin-top: 30px;/* 上间距 */
			}
			.media{
				margin-top: 30px;/* 上间距 */
			}
			.media-body p{
				line-height: 15px;/* 行高 */
				letter-spacing: 2px;/* 字符间距 */
			}
		</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">我的购物车</a>
						</li>
					</ul>
				</div>
			</div>
		</nav>
		<!-- 大致思路: 
			第一行 搜索区域
			第二行
				左3 书籍分类
				右9
					上为轮播图
					下位新书上架-以及热门书籍
		 -->
		<!-- 固定容器 栅格系统-->
		<div class="container">
			<!-- 第一行 -->
			<div class="row ss">
				<div class="col">
					<!-- 搜索区域 -->
					<!-- 表单组件 -->
					<form>
						<div class="form-group">
							<!-- 输入框组组件 -->
							<div class="input-group mb-3">
								<input type="text" class="form-control" placeholder="书籍名"
									aria-label="Recipient's username" aria-describedby="button-addon2">
								<div class="input-group-append">
									<button class="btn btn-primary" type="button" id="button-addon2">查询</button>
								</div>
							</div>

						</div>
					</form>
				</div>
			</div>

			<!-- 第二行 -->
			<div class="row">
				<div class="col-3">
					<!-- 书籍分类 -->
					
					<div class="list-group">
					  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
					    书籍分类
					  </button>
					  <button type="button" class="list-group-item list-group-item-action">军事</button>
					  <button type="button" class="list-group-item list-group-item-action">言情</button>
					  <button type="button" class="list-group-item list-group-item-action">科幻</button>
					  <button type="button" class="list-group-item list-group-item-action">动作</button>
					  <button type="button" class="list-group-item list-group-item-action">科技</button>
					  <button type="button" class="list-group-item list-group-item-action">教育</button>
					  <button type="button" class="list-group-item list-group-item-action">社会</button>
					  <button type="button" class="list-group-item list-group-item-action">计算机技术</button>
					  <button type="button" class="list-group-item list-group-item-action">文艺</button>
					  <button type="button" class="list-group-item list-group-item-action">励志</button>
					  <button type="button" class="list-group-item list-group-item-action">青春</button>
					</div>
					
				</div>

				<div class="col-9" >
					<!-- 右9 -->
					<div class="media">
					  <img src="./img/1.png" class="mr-3" alt="...">
					  <div class="media-body">
					    <h5 class="mt-0">冷间谍</h5>
						<p>价格:10元</p>
						<p>作者:zz</p>
						<p>出版社:天津出版社</p>
						<p>简介:内容详细</p>
						<p>
							<button type="button" class="btn btn-danger">加入购物车</button>
							<button type="button" class="btn btn-danger">立即购买</button>
						</p>
					</div>
				</div>
				<div class="media">
					  <img src="./img/2.png" class="mr-3" alt="...">
					  <div class="media-body">
					    <h5 class="mt-0">冷间谍</h5>
						<p>价格:10元</p>
						<p>作者:zz</p>
						<p>出版社:天津出版社</p>
						<p>简介:内容详细</p>
						<p>
							<button type="button" class="btn btn-danger">加入购物车</button>
							<button type="button" class="btn btn-danger">立即购买</button>
						</p>
					</div>
				</div>
				<div class="media">
					  <img src="./img/3.png" class="mr-3" alt="...">
					  <div class="media-body">
					    <h5 class="mt-0">冷间谍</h5>
						<p>价格:10元</p>
						<p>作者:zz</p>
						<p>出版社:天津出版社</p>
						<p>简介:内容详细</p>
						<p>
							<button type="button" class="btn btn-danger">加入购物车</button>
							<button type="button" class="btn btn-danger">立即购买</button>
						</p>
					</div>
				</div>
			</div>

		</div>
		<!-- 一如JQuery的类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入Bootstrap的类库 -->
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

效果图：

 二，案例二：实现购物车页面布局

使用的Bootstrap页面布局中的表格(Tables)和Bootstrap组件中的按钮和模态框

页面布局中的表格

 带轮廓线的按钮

模态框

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例2:实现购物车页面布局</title>
		<!-- 一如Bootatrap的CSS -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<!-- 支持手机端 -->
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			.navbar-collapse {
				flex-grow: 0;/*1代表弹性扩大占用父容器剩余空间 设置为0表示不占用  在固定容器中*/
			}
			.ss {
				background-color: #DBDBDA;/* 背景颜色 */
				height: 100px;	/* 高度 */
				margin-top: 20px;/* 上间距 */
				
			}
			.form-group {
				width: 300px;/* 宽度 */
				margin-top: 31px;/* 上间距 */
				margin-left: auto;/* 左边距自适应 自动 */
				margin-right: auto;/* 右边距自适应 自动 */
			}
			.list-group{
				margin-top: 30px;/* 上间距 */
			}
			.table{
				margin-top: 30px;/* 上间距 */
			}
			.table thead{
				color: white;/* 字体颜色 */
			}
			.table tr{
				text-align: center;/* 水平居中 */
			}
			.table tr input{
				text-align: center;/* 水平居中 */
			}
			.yy{
				text-align: center;/* 水平居中 */
			}
			.yy button{
				height: 30px;
				line-height: 10px;
			}
		</style>
	</head>
	<body>
		
		<!-- 模态框的html代码 -->
		<!-- Modal -->
		<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		  <div class="modal-dialog modal-dialog-centered">
		    <div class="modal-content">
		      <div class="modal-header">
		        <h5 class="modal-title" id="exampleModalLabel">核对订单</h5>
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
		          <span aria-hidden="true">&times;</span>
		        </button>
		      </div>
		      <div class="modal-body">
		        后期放订单详细
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-primary">确定</button>
				 <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
		      </div>
		    </div>
		  </div>
		</div>
		
		<!-- 导航条组件 -->
		<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">我的购物车</a>
						</li>
					</ul>
				</div>
			</div>
		</nav>
		<!-- 大致思路: 
			第一行 搜索区域
			第二行
				左3 书籍分类
				右9
					上为轮播图
					下位新书上架-以及热门书籍
		 -->
		<!-- 固定容器 栅格系统-->
		<div class="container">
			<!-- 第一行 -->
			<div class="row ss">
				<div class="col">
					<!-- 搜索区域 -->
					<!-- 表单组件 -->
					<form>
						<div class="form-group">
							<!-- 输入框组组件 -->
							<div class="input-group mb-3">
								<input type="text" class="form-control" placeholder="书籍名"
									aria-label="Recipient's username" aria-describedby="button-addon2">
								<div class="input-group-append">
									<button class="btn btn-primary" type="button" id="button-addon2">查询</button>
								</div>
							</div>

						</div>
					</form>
				</div>
			</div>

			<!-- 第二行 -->
			<div class="row" >
				<div class="col-3">
					<!-- 书籍分类 -->
					
					<div class="list-group">
					  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
					    书籍分类
					  </button>
					  <button type="button" class="list-group-item list-group-item-action">军事</button>
					  <button type="button" class="list-group-item list-group-item-action">言情</button>
					  <button type="button" class="list-group-item list-group-item-action">科幻</button>
					  <button type="button" class="list-group-item list-group-item-action">动作</button>
					  <button type="button" class="list-group-item list-group-item-action">科技</button>
					  <button type="button" class="list-group-item list-group-item-action">教育</button>
					  <button type="button" class="list-group-item list-group-item-action">社会</button>
					  <button type="button" class="list-group-item list-group-item-action">计算机技术</button>
					  <button type="button" class="list-group-item list-group-item-action">文艺</button>
					  <button type="button" class="list-group-item list-group-item-action">励志</button>
					  <button type="button" class="list-group-item list-group-item-action">青春</button>
					</div>
					
				</div>

				<div class="col-9" >
					
					<table class="table">
					  <thead>
					    <tr class="bg-primary">
					      <th scope="col" >书名</th>
					      <th scope="col">单价</th>
					      <th scope="col">数量</th>
					      <th scope="col">小计</th>
						  <th scope="col">操作</th>
					    </tr>
					  </thead>
					  <tbody>
					    <tr>
					      <th scope="row">冷间谍</th>
					      <td>18</td>
					      <td><input type="text" value="2"/></td>
					      <td>36</td>
						   <td><input type="button" value="删除" /></td>
					    </tr>
					   <tr>
					     <th scope="row">冷间谍</th>
					     <td>18</td>
					     <td><input type="text" value="2"/></td>
					     <td>36</td>
					      <td><input type="button" value="删除" /></td>
					   </tr>
					  </tbody>
					</table>
					<p class="yy">
					<button type="button" class="btn btn-outline-primary">清空购物车</button>
					<button type="button" class="btn btn-outline-primary">继续购物</button>
					<button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#exampleModal">点我结算</button>
					</p>
				</div>
			</div>

		</div>
		<!-- 一如JQuery的类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入Bootstrap的类库 -->
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

效果图1:

注：那个清空购物车本来是和其它文本框一样的是鼠标移上后的效果因为用来按钮的轮廓线效果 

效果图2

注：这是点击了我要结算之后的效果是用的是Boootstrp中的模态框效果

三,图标的基本使用

图标的下载:点我下载

 3.1，进入Bootstrap管网之后点击图标库

3.2，然后点击安装

3.3，然后点就下载最新版的zip.压缩包 

注：这里我们下载Source code(zip)也就是第二个第一个是所有图标 然后第二个包含了第一个里面的内容第三个可以不用管

 下载了之后:

 3.4，解压完之后打开

3.5，然后把font整体copy到我们要用的项目里

使用方法
<button class="btn btn-primary" type="button" id="button-addon2"><i class="bi bi-search"></i></button>

注：在使用之前必须引入图标的Css

<!-- 引入图标库的css -->
<link rel="stylesheet" type="text/css" href="font/bootstrap-icons.css"/>

效果图:

 

四，图标具体使用方法:

4.1进入Bootstrap官网

4.2打开官网之后点击图标库(右上角能进行查找)

 4.3然后点击我想用的图标点进去

 最后直接copy放到要用的文本框里就行了(可以只用图标字体 也可以直接复制html代码)

例如:
<button class="btn btn-primary" type="button" id="button-addon2"><i class="bi bi-alarm"></i></button>
举报

相关推荐

使用Bootstrap搭界面案例

java

CSS精灵图的使用与字体图标的运用

csscss3前端

Java Icon图标的使用

icojavaide

FlinkSql的窗口使用以及运用案例

FlinkFlinksql窗口函数大数据

小程序svg图标的转换使用

图标微信开发移动开发

iconfont字体图标的使用方法

csscss3前端icohtml虚拟化云计算

iconfont 字体图标的使用方法

css前端html

CSS 之 iconfont 字体图标的使用

harmonyos华为android鸿蒙鸿蒙系统ArkTSArkUI

favicon图标的制作

htmlfaviconcss3csshtml5Html/CSS前端开发

前端字体图标的追加

前端cssvscodevisual studio codehtml
0 条评论