Bootstrap学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网_首页】

其他 2021-02-11 10:19:39 阅读次数: 0
  1. Bootstrap学习笔记01【快速入门、栅格布局】【day01】
  2. Bootstrap学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网】【day01】

目录

03 Bootstrap_全局CSS样式

Bootstrap_全局CSS样式_按钮

Bootstrap_全局CSS样式_表格

04 Bootstrap_组件和插件

Bootstrap_组件_导航条&分页条

导航条

分页条

Bootstrap_插件_轮播图

05 案例_黑马旅游网

案例_黑马旅游网_分析

扫描二维码关注公众号，回复： 12476549 查看本文章

案例_黑马旅游网_页眉部分

案例_黑马旅游网_主体&页脚部分

主体部分

页脚部分

黑马旅游网——首页代码

03 Bootstrap_全局CSS样式

Bootstrap_全局CSS样式_按钮

如果你觉得xxx样式可以，从官网上 复制过来，就完事了 ~

   

CSS样式和JS插件

全局CSS样式：
    * 按钮：class="btn btn-default"
    * 图片：
        *  class="img-responsive"：图片在任意尺寸都占100%（响应式）
        *  图片形状
            *  <img src="..." alt="..." class="img-rounded"> ：方形
            *  <img src="..." alt="..." class="img-circle">  ：圆形
            *  <img src="..." alt="..." class="img-thumbnail"> ：相框
    * 表格
    * 表单
2. 组件：
    * 导航条
    * 分页条
3. 插件：
    * 轮播图

  

Bootstrap_全局CSS样式_表格

CSS样式和JS插件

1. 全局CSS样式：
    * 按钮：class="btn btn-default"
    * 图片：
        *  class="img-responsive"：图片在任意尺寸都占100%（响应式）
        *  图片形状
            *  <img src="..." alt="..." class="img-rounded"> ：方形
            *  <img src="..." alt="..." class="img-circle">  ：圆形
            *  <img src="..." alt="..." class="img-thumbnail"> ：相框
    * 表格
        * table
        * table-bordered：表格边框
        * table-hover：表格悬浮变色
    * 表单
        * 给表单项添加：class="form-control" 
2. 组件：
    * 导航条
    * 分页条
3. 插件：
    * 轮播图

  

04 Bootstrap_组件和插件

Bootstrap_组件_导航条&分页条

导航条

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Bootstrap HelloWorld</title>

		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">

		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<script src="js/jquery-3.2.1.min.js"></script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script src="js/bootstrap.min.js"></script>
	</head>
	<body>
		<nav class="navbar navbar-inverse">
			<div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<!-- 定义汉堡按钮 -->
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
					 aria-expanded="false">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#">首页</a>
				</div>

				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
						<li><a href="#">Link</a></li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown
								<span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a href="#">Action</a></li>
								<li><a href="#">Another action</a></li>
								<li><a href="#">Something else here</a></li>
								<li role="separator" class="divider"></li>
								<li><a href="#">Separated link</a></li>
								<li role="separator" class="divider"></li>
								<li><a href="#">One more separated link</a></li>
							</ul>
						</li>
					</ul>
					<ul class="nav navbar-nav navbar-right">
						<li><a href="#">Link</a></li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown
								<span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a href="#">Action</a></li>
								<li><a href="#">Another action</a></li>
								<li><a href="#">Something else here</a></li>
								<li role="separator" class="divider"></li>
								<li><a href="#">Separated link</a></li>
							</ul>
						</li>
					</ul>
				</div><!-- /.navbar-collapse -->
			</div><!-- /.container-fluid -->
		</nav>
	</body>
</html>

分页条

  

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Bootstrap HelloWorld</title>

		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">

		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<script src="js/jquery-3.2.1.min.js"></script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script src="js/bootstrap.min.js"></script>
	</head>
	<body>
		<nav aria-label="Page navigation">
			<ul class="pagination">
				<li class="disabled">
					<a href="#" aria-label="Previous">
						<span aria-hidden="true">&laquo;</span>
					</a>
				</li>
				<li><a href="#">1</a></li>
				<li class="active"><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
				<li><a href="#">5</a></li>
				<li>
					<a href="#" aria-label="Next">
						<span aria-hidden="true">&raquo;</span>
					</a>
				</li>
			</ul>
		</nav>
	</body>
</html>

Bootstrap_插件_轮播图

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Bootstrap HelloWorld</title>

		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">

		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<script src="js/jquery-3.2.1.min.js"></script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script src="js/bootstrap.min.js"></script>
	</head>
	<body>
		<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
			<!-- Indicators -->
			<ol class="carousel-indicators">
				<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
				<li data-target="#carousel-example-generic" data-slide-to="1"></li>
				<li data-target="#carousel-example-generic" data-slide-to="2"></li>
			</ol>

			<!-- Wrapper for slides -->
			<div class="carousel-inner" role="listbox">
				<div class="item active">
					<img src="img/banner_1.jpg" alt="...">
				</div>
				<div class="item">
					<img src="img/banner_2.jpg" alt="...">
				</div>
				<div class="item">
					<img src="img/banner_3.jpg" alt="...">
				</div>
			</div>

			<!-- Controls -->
			<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
	</body>
</html>

05 案例_黑马旅游网

案例_黑马旅游网_分析

案例_黑马旅游网_页眉部分

  

案例_黑马旅游网_主体&页脚部分

主体部分

页脚部分

黑马旅游网——首页代码

  

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<title>Bootstrap HelloWorld</title>
	<!-- Bootstrap -->
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<script src="js/jquery-3.2.1.min.js"></script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<script src="js/bootstrap.min.js"></script>
	<style>
		.paddtop {
			padding-top: 10px;
		}
		.search-btn {
			float: left;
			border: 1px solid #ffc900;
			width: 90px;
			height: 35px;
			background-color: #ffc900;
			text-align: center;
			line-height: 35px;
			margin-top: 15px;
		}
		.search-input {
			float: left;
			border: 2px solid #ffc900;
			width: 400px;
			height: 35px;
			padding-left: 5px;
			margin-top: 15px;
		}
		.jx {
			border-bottom: 2px solid #ffc900;
			padding: 5px;
		}
		.company {
			height: 40px;
			background-color: #ffc900;
			text-align: center;
			line-height: 40px;
			font-size: 8px;
		}
	</style>
</head>
<body>
	<!-- 1.页眉部分-->
	<header class="container-fluid">
		<div class="row">
			<img src="img/top_banner.jpg" class="img-responsive">
		</div>
		<div class="row paddtop">
			<div class="col-md-3">
				<img src="img/logo.jpg" class="img-responsive">
			</div>
			<div class="col-md-5">
				<input class="search-input" placeholder="请输入线路名称">
				<a class="search-btn" href="#">搜索</a>
			</div>
			<div class="col-md-4">
				<img src="img/hotel_tel.png" class="img-responsive">
			</div>
		</div>
		<!--导航栏-->
		<div class="row">
			<nav class="navbar navbar-default">
				<div class="container-fluid">
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header">
						<!-- 定义汉堡按钮 -->
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
							data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<a class="navbar-brand" href="#">首页</a>
					</div>
					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav">
							<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
							<li><a href="#">Link</a></li>
							<li><a href="#">Link</a></li>
							<li><a href="#">Link</a></li>
							<li><a href="#">Link</a></li>
							<li><a href="#">Link</a></li>
						</ul>
					</div><!-- /.navbar-collapse -->
				</div><!-- /.container-fluid -->
			</nav>
		</div>
		<!--轮播图-->
		<div class="row">
			<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
				<!-- Indicators -->
				<ol class="carousel-indicators">
					<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
					<li data-target="#carousel-example-generic" data-slide-to="1"></li>
					<li data-target="#carousel-example-generic" data-slide-to="2"></li>
				</ol>
				<!-- Wrapper for slides -->
				<div class="carousel-inner" role="listbox">
					<div class="item active">
						<img src="img/banner_1.jpg" alt="...">
					</div>
					<div class="item">
						<img src="img/banner_2.jpg" alt="...">
					</div>
					<div class="item">
						<img src="img/banner_3.jpg" alt="...">
					</div>
				</div>
				<!-- Controls -->
				<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
					<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
					<span class="sr-only">Previous</span>
				</a>
				<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
					<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				</a>
			</div>
		</div>
	</header>
	<!-- 2.主体部分-->
	<div class="container">
		<div class="row jx">
			<img src="img/icon_5.jpg">
			<span>黑马精选</span>
		</div>
		<div class="row paddtop">
			<div class="col-md-3">
				<div class="thumbnail">
					<img src="img/jiangxuan_3.jpg" alt="">
					<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
					<font color="red">&yen; 699</font>
				</div>
			</div>
			<div class="col-md-3">
				<div class="thumbnail">
					<img src="img/jiangxuan_3.jpg" alt="">
					<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
					<font color="red">&yen; 699</font>
				</div>
			</div>
			<div class="col-md-3">
				<div class="thumbnail">
					<img src="img/jiangxuan_3.jpg" alt="">
					<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
					<font color="red">&yen; 699</font>
				</div>
			</div>
			<div class="col-md-3">
				<div class="thumbnail">
					<img src="img/jiangxuan_3.jpg" alt="">
					<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
					<font color="red">&yen; 699</font>
				</div>
			</div>
		</div>
		<div class="row jx">
			<img src="img/icon_6.jpg">
			<span>国内游</span>
		</div>
		<div class="row paddtop">
			<div class="col-md-4">
				<img src="img/guonei_1.jpg">
			</div>
			<div class="col-md-8">
				<div class="row">
					<div class="col-md-4">
						<div class="thumbnail">
							<img src="img/jiangxuan_3.jpg" alt="">
							<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
							<font color="red">&yen; 699</font>
						</div>
					</div>
					<div class="col-md-4">
						<div class="thumbnail">
							<img src="img/jiangxuan_3.jpg" alt="">
							<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
							<font color="red">&yen; 699</font>
						</div>
					</div>
					<div class="col-md-4">
						<div class="thumbnail">
							<img src="img/jiangxuan_3.jpg" alt="">
							<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
							<font color="red">&yen; 699</font>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-4">
						<div class="thumbnail">
							<img src="img/jiangxuan_3.jpg" alt="">
							<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
							<font color="red">&yen; 699</font>
						</div>
					</div>
					<div class="col-md-4">
						<div class="thumbnail">
							<img src="img/jiangxuan_3.jpg" alt="">
							<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
							<font color="red">&yen; 699</font>
						</div>
					</div>
					<div class="col-md-4">
						<div class="thumbnail">
							<img src="img/jiangxuan_3.jpg" alt="">
							<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
							<font color="red">&yen; 699</font>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 3.页脚部分-->
	<footer class="container-fluid">
		<div class="row">
			<img src="img/footer_service.png" class="img-responsive">
		</div>
		<div class="row company">
			江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882
		</div>
	</footer>
</body>
</html>

加油~

猜你喜欢

转载自blog.csdn.net/weixin_44949135/article/details/113775470
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
周排行
购置笔记本常识
从源码看Spring Security之采坑笔记（Spring Boot篇）
大数据学习——高可用配置案例
如何避免选择不专业的建站公司?
Euclid's Game HDU - 1525（博弈）
面试笔记（六）---Js实现eventHandler
Windows 实例搭建的 FTP 在外网无法连接和访问
设计模式 : 桥接模式
USB 设备驱动开发之几个重要结构体分析
14-p14_sqrt求平方根
每日归档
更多
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022