bootstrap02

最新推荐文章于 2024-08-07 22:13:00 发布
最新推荐文章于 2024-08-07 22:13:00 发布
阅读量1.1k 收藏
点赞数
分类专栏： 前端框架 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hmjcxy/article/details/124482350
版权

Bootstrap 响应式 轮播图 书籍分类 栅格系统
关键词由CSDN通过智能技术生成

大家好！我还是那个小何哈！今天bootstrap02，老样子，先上思维导图

今天的内容相对较少，昨天和大家介绍过了，那就再回顾一下

Bootstrap

W:what 是一个响应式的前端框架  大PC-lg 中PC-md 平板-sm 手机端-xs
W:why 支持响应式 移动端优先 浏览器支持 容易上手
W:where 企业网站、博客、后台、简单简洁的前台页面

H:how
准备工作：下载 解压 引入（2个js  1个css）

组件：导航条 navbar
      表单 form-group 
      输入框组 input-group
      栅格：Grid-system  12列

支持手机端：<meta viewport>

下载Bootstrap

网址：https://v4.bootcss.com/

今日内容（仅供参考）：

从上思维导图可以看出我们一共有五个案例，今天讲第一个案例

案例1：首页轮播图实现

首页轮播呢可以在bootstrap网址里下载，里面资源嘎嘎多

ok，给大家看看代码

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
					<ol class="carousel-indicators">
						<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
						<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
						<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
						<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
					</ol>
					<div class="carousel-inner">
						<div class="carousel-item active">
							<img src="img/lb1.png" class="d-block w-100" alt="...">
						</div>
						<div class="carousel-item">
							<img src="img/lb2.jpg" class="d-block w-100" alt="...">
						</div>
						<div class="carousel-item">
							<img src="img/lb3.jpg" class="d-block w-100" alt="...">
						</div>
						<div class="carousel-item">
							<img src="img/lb4.jpeg" class="d-block w-100" alt="...">
						</div>
					</div>
					<!-- 左右箭头-->
					<button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators"
						data-slide="prev">
						<span class="carousel-control-prev-icon" aria-hidden="true"></span>
						<span class="sr-only">Previous</span>
					</button>
					<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators"
						data-slide="next">
						<span class="carousel-control-next-icon" aria-hidden="true"></span>
						<span class="sr-only">Next</span>
					</button>
				</div>

效果图下：

这个它是可以自动播放的

案例2：首页书籍分类实现 

代码分享如下：

<div class="col-3" style="background-color: palegreen">
									<div class="list-group">
									  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
									    书籍分类
									  </button>
									  <button href="#" type="button" class="list-group-item list-group-item-action">科幻</button>
									  <button href="#" type="button" class="list-group-item list-group-item-action">言情</button>
									  <button href="#" type="button" class="list-group-item list-group-item-action">金融</button>
									  <button href="#" type="button" class="list-group-item list-group-item-action">都市</button> 
									  <button href="#" type="button" class="list-group-item list-group-item-action">玄幻</button>
									  <button href="#" type="button" class="list-group-item list-group-item-action">重生</button>
									  <button href="#" type="button" class="list-group-item list-group-item-action">医疗</button>
									  <button href="#" type="button" class="list-group-item list-group-item-action">悬疑</button>
									</div>
								</div>

效果图如下：

 鼠标点到的分类那边会有高亮显示

案例3：首页新书上架&热门书籍实现

代码如下：

<div class="row">
										<!-- 右9中第三行新书上架 -->
										<div class="col" style="background-color: coral;">
											<figure class="figure">
											  <img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
											  <figcaption class="figure-caption">冷间谍</figcaption>
											</figure>
										</div>
										<div class="col" style="background-color: coral;">
											<figure class="figure">
											  <img src="img/2.png" class="figure-img img-fluid rounded" alt="...">
											  <figcaption class="figure-caption">第一商会</figcaption>
											</figure>
										</div>
										<div class="col" style="background-color: coral;">
											<figure class="figure">
											  <img src="img/3.png" class="figure-img img-fluid rounded" alt="...">
											  <figcaption class="figure-caption">狂人日记</figcaption>
											</figure>
										</div>
										<div class="col" style="background-color: coral;">
											<figure class="figure">
											  <img src="img/4.png" class="figure-img img-fluid rounded" alt="...">
											  <figcaption class="figure-caption">学文</figcaption>
											</figure>
										</div>
										<div class="col" style="background-color: coral;">
											<figure class="figure">
											  <img src="img/5.png" class="figure-img img-fluid rounded" alt="...">
											  <figcaption class="figure-caption">自动化运维</figcaption>
											</figure>
										</div>
									</div>

效果图如下：

 案例4：首页整合

下面这个代码就是以上整合：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例4：首页整合</title>
		<!--引入bootstrap得CSS  -->
		<meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<style type="text/css">
					.navbar-collapse {
						flex-grow: 0;
						/*1代表弹性扩大占用父容器剩余空间 0代表不占用*/
					}
					.ss{
						height: 100px;
						background-color: #DDCCDD;
						margin-top: 20px;
						
					}
					.form-group{
						width: 300px;
						margin-left: auto;/*自适应*/
						margin-right: auto;/*自适应*/
						margin-top:31px ;
					}
					.figure{
						text-align: center;
						margin-top: 20px;
					}
					/* 列表组 */
					.list-group,#carouselExampleIndicators{
						margin-top: 30px;/* 上间距 */
					}
					/* 指示灯 */
				.carousel-indicators li{
					background-color: blue;
				}
				.xxx{
					background-image: url(img/title_bj.png);
					background-repeat: no-repeat;
					color: white;/* 字体颜色 */
					font-size: 18px;
					margin-top: 20px;
					padding-left: 18px;
				}
				</style>
	</head>
	<body>
		<!-- 分别引入jQuery的js和Bootstrap的js -->
	
		<!-- 导航条组件 -->
		<nav class="navbar navbar-expand-lg navbar-light bg-light">
					<div class="container">
						<a class="navbar-brand" href="#">loki，再见了</a>
						<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup"
						 aria-expanded="false" aria-label="Toggle navigation">
							<span class="navbar-toggler-icon"></span>
						</button>
						<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
							<div class="navbar-nav">
								<a class="nav-link active" href="#">首页 <span class="sr-only">(current)</span></a>
								<a class="nav-link" href="#">登陆</a>
								<a class="nav-link" href="#">注册</a>
								<a class="nav-link disabled">我的购物车</a>
							</div>
						</div>
					</div>
				</nav>
				<!--栅格系统  -->
						<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" style="background-color: palegreen">
									<div class="list-group">
									  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
									    书籍分类
									  </button>
									  <button href="#" type="button" class="list-group-item list-group-item-action">科幻</button>
									  <button href="#" type="button" class="list-group-item list-group-item-action">言情</button>
									  <button href="#" type="button" class="list-group-item list-group-item-action">金融</button>
									  <button href="#" type="button" class="list-group-item list-group-item-action">都市</button> 
									  <button href="#" type="button" class="list-group-item list-group-item-action">玄幻</button>
									  <button href="#" type="button" class="list-group-item list-group-item-action">重生</button>
									  <button href="#" type="button" class="list-group-item list-group-item-action">医疗</button>
									  <button href="#" type="button" class="list-group-item list-group-item-action">悬疑</button>
									</div>
								</div>
								<div class="col-9">
									<!-- 右9-轮播图&新书上架&热门书籍 -->
									<div class="row">
										<div class="col-13">
											<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
												<ol class="carousel-indicators">
													<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
													<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
													<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
													<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
												</ol>
												<div class="carousel-inner">
													<div class="carousel-item active">
														<img src="img/lb1.png" class="d-block w-100" alt="...">
													</div>
													<div class="carousel-item">
														<img src="img/lb2.jpg" class="d-block w-100" alt="...">
													</div>
													<div class="carousel-item">
														<img src="img/lb3.jpg" class="d-block w-100" alt="...">
													</div>
													<div class="carousel-item">
														<img src="img/lb4.jpeg" class="d-block w-100" alt="...">
													</div>
												</div>
												<!-- 左右箭头-->
												<button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators"
													data-slide="prev">
													<span class="carousel-control-prev-icon" aria-hidden="true"></span>
													<span class="sr-only">Previous</span>
												</button>
												<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators"
													data-slide="next">
													<span class="carousel-control-next-icon" aria-hidden="true"></span>
													<span class="sr-only">Next</span>
												</button>
											</div>
										</div>
									</div>
									<div class="xxx">
										新书上架
									</div>
									<div class="row">
										<!-- 右9中第三行新书上架 -->
										<div class="col" style="background-color: coral;">
											<figure class="figure">
											  <img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
											  <figcaption class="figure-caption">冷间谍</figcaption>
											</figure>
										</div>
										<div class="col" style="background-color: coral;">
											<figure class="figure">
											  <img src="img/2.png" class="figure-img img-fluid rounded" alt="...">
											  <figcaption class="figure-caption">第一商会</figcaption>
											</figure>
										</div>
										<div class="col" style="background-color: coral;">
											<figure class="figure">
											  <img src="img/3.png" class="figure-img img-fluid rounded" alt="...">
											  <figcaption class="figure-caption">狂人日记</figcaption>
											</figure>
										</div>
										<div class="col" style="background-color: coral;">
											<figure class="figure">
											  <img src="img/4.png" class="figure-img img-fluid rounded" alt="...">
											  <figcaption class="figure-caption">学文</figcaption>
											</figure>
										</div>
										<div class="col" style="background-color: coral;">
											<figure class="figure">
											  <img src="img/5.png" class="figure-img img-fluid rounded" alt="...">
											  <figcaption class="figure-caption">自动化运维</figcaption>
											</figure>
										</div>
									</div>
				
									<div class="xxx">
										热门书籍
									</div>
				
									<div class="row">
										<!-- 右9中第三行新书上架 -->
										<div class="col" style="background-color: coral;">
											<figure class="figure">
											  <img src="img/6.png" class="figure-img img-fluid rounded" alt="...">
											  <figcaption class="figure-caption">Java</figcaption>
											</figure>
										</div>
										<div class="col" style="background-color: coral;">
											<figure class="figure">
											  <img src="img/7.png" class="figure-img img-fluid rounded" alt="...">
											  <figcaption class="figure-caption">AutoCAD</figcaption>
											</figure>
										</div>
										<div class="col" style="background-color: coral;">
											<figure class="figure">
											  <img src="img/8.png" class="figure-img img-fluid rounded" alt="...">
											  <figcaption class="figure-caption">时光走了你还在</figcaption>
											</figure>
										</div>
										<div class="col" style="background-color: coral;">
											<figure class="figure">
											  <img src="img/9.png" class="figure-img img-fluid rounded" alt="...">
											  <figcaption class="figure-caption">我们仍未知道爱的样子</figcaption>
											</figure>
										</div>
										<div class="col" style="background-color: coral;">
											<figure class="figure">
											  <img src="img/9.png" class="figure-img img-fluid rounded" alt="...">
											  <figcaption class="figure-caption">我们仍未知道爱的样子</figcaption>
											</figure>
										</div>
									</div>
				
				
				
								</div>
								<div class="col">
									3 of 3
								</div>
							</div>
						</div>
		<script type="text/javascript" src="js/jquery-3.3.1.js" charset="UTF-8"></script>
		<script type="text/javascript" src="js/bootstrap.js" charset="UTF-8"></script>
</body>
</html>

效果图如下：

 案例5：实现登录&注册页面

登录代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例5：实现登录&注册页面</title>
		<meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<style type="text/css">
			form{
				width: 300px;/* 宽度 */
				text-align: center;/* 文本居中 */
				margin-left: auto;/* 左间距自适应 */
				margin-right: auto;/* 右间距自适应 */
				margin-top: 100px;/* 上间距 */
			}
			form button{
				width: 300px;/* 宽度 */
				margin-bottom: 20px;/* 下间距 */
			}
		</style>
	</head>
	<body>
		<form>
		  <div class="form-group">
		    <label for="exampleInputEmail1">用户登录</label>
		    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
		    <small id="emailHelp" class="form-text text-muted"></small>
		  </div>
		  <div class="form-group">
		    <label for="exampleInputPassword1"></label>
		    <input type="password" class="form-control" id="exampleInputPassword1">
		  </div>
		  <div class="form-group form-check">
		    <input type="checkbox" class="form-check-input" id="exampleCheck1">
		    <label class="form-check-label" for="exampleCheck1">Remember me</label>
		  </div>
		  <button type="submit" class="btn btn-primary">登录</button>
		  <div class="form-group ">
		    <label class="form-check-label" for="exampleCheck1">&copy;2017-2022</label>
		  </div>
		</form>
		<script type="text/javascript" src="js/jquery-3.3.1.js" charset="UTF-8"></script>
		<script type="text/javascript" src="js/bootstrap.js" charset="UTF-8"></script>
	</body>
</html>

效果图如下：

 今天讲的这些框架都是往bootstrap网址下找到，小伙伴可以去找哦，框架超多~

今天的分享到这里了，我是小何，下期再见！！！！

糖心何包蛋·
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap基础入门(第二篇)
a_Keri的博客
03-11 1295
Bootstrap基础入门(二)一、Bootstrap预定义样式风格概念：在一些标签或者组件中用来描述状态的class类常见的预定义样式风格类primary(首选项)success(成功)info(一般信息)wraning(警告)danger(危险)    3.常用预定义样式风格类的标签或组件"*"：代表primary，success,info,wraning,danger按钮样式：btn-*背景...
Bootstrap4 定制自己的颜色和风格
切糕的技术博客
02-25 1万+
https://math-digital.cn/blog/2
bootstrap小知识点
Primary_Insist的博客
11-10 601
快速开发响应式网页 使用3版本 用于生产环境的bootstrap 引入 <link rel=”stylesheet”href+”./bootstrap-3.4.1-dist/css/bootstrap.css”> 版心：container 随视口宽度变化有margin有默认的左右15px的padding值 去除版心左右的内边距，在容器中添加一个.row类、 .row元素有一个-15px的margin从而抵...
Bootstrap常见组件的类名-CSS
qq_59185329的博客
08-24 340
Bootstrap常见组件的类名-CSS
Bootstrap组件——【按钮（预定义样式类、边框颜色、大小、激活和禁用状态 、按钮标签）、按钮组（定义按钮组、工具栏按钮组、大小、嵌套按钮、垂直排列）、下拉菜单（定义下拉菜单、下拉菜单样式）】
m0_69034993的博客
11-07 4991
使用.btn-outline-*类可以没置按钮的边框，*可以从prirnary、secondary、success、danger.warning、info、light和dark中进行选择。Bootstrap提供了btn来定义按钮，btn定义了基本的按钮样式类。Bootstrap提供了.btn-group-lg，.btn-group-sm类作用在.btn-group类的容器，可以控制按钮组下的每个子按钮，实现样式缩放。使用.btn-lg、.btn-sm类样式，可分别实现大规格按钮、小规格按钮的定义。
bootstrap中主题颜色的修改影响到的基本工具类的样式
qq_42372534的博客
08-20 1039
1.在bootstrap.css中搜索primary,发现有以.xxx-primary开头的类有 .table-primary，影响表格的background-color .btn-primary，影响按钮的background-color和border-color .bg-primary,影响background-color .text-primary,影响字体颜色color .border-primary，边框颜色 2. bootstrap的主题色名称 共有8个 priamry secondary
bootstrap标签 label 六大类型（default，primary，success，info，warning，danger）
懒虫的博客
05-26 9914
标签 label 【六大类型：default;primary;success;info;warning;danger;】 <span class="label label-default">默认标签</span> <span class="label label-primary">主要标签</span> <span class="label label-success">成功标签</span> <span class="labe
bootstrap 按钮的几种颜色属性 和表格右侧的操作选项
weixin_42217374的博客
02-03 8573
bootstrap 按钮的7种颜色属性 分别是白色，浅蓝色，深蓝色，绿色，黄色，红色，黑色。 对应的class为 btn,（白色） btn btn-primary,（浅蓝色） btn btn-info,（深蓝色） btn btn-success,（绿色） btn btn-warning,（黄色） btn btn-danger,（红色） btn btn-inverse（黑色） Bootstrap Table 列参数columns使用总结 columns: [{ field: 'rem
知识回顾
Cg_Companion_Xi的博客
11-09 1170
** 一．Bootstrap 简介 Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT  移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。  浏览器支持：所有的主流浏览器都支持 Bootstrap。  **容易上手：**只要具备 HTML 和...
bootstrap——css样式（五、按钮和图片）
zaichuanguanshui的专栏
01-18 5213
1、预定义样式的按钮 bootstrap为我们设计了一些按钮样式<button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-succe
Bootstrap 样式之 元素背景颜色
热门推荐
cvper's world !
03-06 6万+
在Bootstrap中既有文本颜色的样式也有元素背景颜色的样式，我们先来看看元素背景的颜色有哪几种？一共五种背景色：分别是 bg-primary   bg-success    bg-info     bg-warning     bg-danger代码：&lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;m...
Bootstrap3基础 btn-primary/warning... 三类按钮的六种样式
weixin_34343000的博客
03-17 2472
  内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor   Visual Studio Code 1.32.1     typesetting   Markdown   code <!DOCTYPE html> ...
Bootstrap入门（导航条&栅格系统）
Bugxiu_fu的博客
05-06 1264
在这里小编给各位友友们道个歉；这段时间小编偷懒，不过，后续会慢慢给大家补上，感谢一直在背后支持着小编的家人们。 那么接下来，老规矩，咱们先来看看今天内容的思维导图。 一、Bootstrap是一个前端开发框架。简单点说就是别人写好的效果封装起来。 1、Bootstrap是2011年Twitter团队为了方便维护PC端和手机端二研发的一个响应式前端框架。 ​ 2、用于快速开发Web应用程序和网站的前端框架 ​ 3、Bootstrap是基于HTML、CSS、JS的，简介灵活，使W...
HTML-05新浪新闻-正文-排版
程小白的博客
08-03 211
【代码】【无标题】
HTML学习笔记——用HTML记录学习过程4——非主体结构元素
qq_47968354的博客
08-07 106
非主体结构元素主要是为了表达逻辑结构或者附加信息的元素。
Html详解——Vue基础
最新发布
敲厉害的燕宝的博客
08-07 705
是一种用来。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。正如标题所示，本文将对 HTML 及其功能做一个基本介绍。HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。
【html】用html和JavaScript实现一个调色盘（可以用来生成纯色桌面背景）
weixin_56334307的博客
08-04 881
1.通过JavaScript 常见三个滑动条，设置范围（0-255），分别表示 r g b2.将 r g b 转为颜色，并设置为画布的背景颜色3.通过浏览器开发者工具截取节点屏幕截图并保存4.设为桌面背景。
胖东来企业文化指导手册.pptx
08-07
胖东来企业文化指导手册.pptx
[毕业设计]基于PHP与MySQL的学生成绩查看系统.zip
08-07
[毕业设计]基于PHP与MySQL的学生成绩查看系统
bootstrap datetimepicker 参数
07-27
例如，disabledDates: ["2022-01-01", "2022-01-02"]。 5. useCurrent：设置是否在初始化时将当前日期作为默认值。默认为 true。 6. showTodayButton：是否显示 "Today" 按钮，用于快速选择当前日期。 7. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值