bootsrtap 讲解

最新推荐文章于 2023-03-16 15:12:56 发布
最新推荐文章于 2023-03-16 15:12:56 发布
阅读量223 收藏
点赞数
分类专栏： Java 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43715360/article/details/113775095
版权
1、概述

在这里插入图片描述

2、响应式页面案例

bootstrap官网：link.
在这里插入图片描述

3、bootstrap组成
  • 全局css的样式
  • 组件
  • js插件
4、格栅系统
  • 格栅系统简介
    在这里插入图片描述
  • 媒体查询功能
    在这里插入图片描述
  • 代码示例
    在这里插入图片描述
4、排版

在这里插入图片描述

  • 示例代码：
    在这里插入图片描述
    在这里插入图片描述
5、表格

在这里插入图片描述

  • 示例代码：
    在这里插入图片描述
    在这里插入图片描述
6、表单（官网超级详细）
7、按钮

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 按钮示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
		<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.min.css" />
	</head>
	<body>
		<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<div class="btn btn-success">测试按钮</div>
		<button>这是个按钮</button>
		
		<div class="btn-group" data-toggle="buttons">
			<label class="btn btn-primary">
		        <input type="radio" name="options" id="option1"> 选项 1
		    </label>
					<label class="btn btn-primary">
		        <input type="radio" name="options" id="option2"> 选项 2
		    </label>
					<label class="btn btn-primary">
		        <input type="radio" name="options" id="option3"> 选项 3
		    </label>
		</div>
	</body>
</html>

在这里插入图片描述

8、按钮

在这里插入图片描述

  • 示例：
    在这里插入图片描述
    在这里插入图片描述
9、导航栏
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
		<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.min.css" />
	</head>
	<body>
		<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>

		<script type="text/javascript">
			$(function(){
				$("ul li").each(function(){
					$(this).click(function(){
						$(this).attr("class","active");
						$("ul li:not(this)").removeAttr("class");
					});
				})
			})
		</script>
		<img src="logo.jpg" class="img-responsive img-circle">

		<li role="presentation" class="active">
			<a href="#" data-toggle="tab">系别</a>
		</li>
		<ul class="nav nav-tabs">
			<li role="presentation" class="active">
				<a href="#" data-toggle="tab">分类</a>
			</li>
			<li role="presentation">
				<a href="#" data-toggle="tab">图片</a>
			</li>
			<li role="presentation">
				<a href="#" data-toggle="tab">视频</a>
			</li>
		</ul>

		<div id="myTabContent" class="tab-content">
			<div class="tab-pane fade in active" id="h5">
				<p>中文系<br>考古系<br>数学系</p>
			</div>
			<div class="tab-pane fade" id="java">
				<p>java是高级语言，是最好的语言</p>
			</div>
			<div class="tab-pane fade" id="android">
				<p>android是最受大众欢迎的智能机品牌</p>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

10、分页

在这里插入图片描述

  • 示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
		<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.min.css" />
	</head>
	<body>
		<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>

		<nav aria-label="Page navigation">
			<ul class="pagination">
				<li>
					<a href="#" aria-label="Previous">
						<span aria-hidden="true">上页</span>
					</a>
				</li>
				<li>
					<a href="test.html">1</a>
				</li>
				<li>
					<a href="#">2</a>
				</li>
				<li>
					<a href="#">3</a>
				</li>
				<li>
					<a href="#">4</a>
				</li>
				<li>
					<a href="#" aria-label="Next">
						<span aria-hidden="true">下页</span>
					</a>
				</li>
			</ul>
		</nav>
	</body>
</html>

在这里插入图片描述

11、缩略图

在这里插入图片描述

  • 示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
		<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.min.css" />
	</head>
	<body>
		<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>

		<div class="container" style="margin-top: 30px;">
			<div class="row">
				<div class="col-md-4">
					<a href="#" class="thumbnail"> <img src="logo.jpg"></a>
					<div class="caption">
						<h4 class="text-center">HTML入门</h4>
						<h6 class="text-center">html是最好的静态网页语言</h6>
					</div>
				</div>
				
				<div class="col-md-4">
					<a href="#" class="thumbnail"> <img src="logo.jpg"></a>
					<div class="caption">
						<h4 class="text-center">CSS入门</h4>
						<h6 class="text-center">CSS是最好的样式语言</h6>
					</div>
				</div>
				
				<div class="col-md-4">
					<a href="#" class="thumbnail"> <img src="logo.jpg"></a>
					<div class="caption">
						<h4 class="text-center">JS入门</h4>
						<h6 class="text-center">CSS是最好的样式语言</h6>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

12、模态框
<!DOCTYPE html>
<html>

	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
		<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.min.css" />
	</head>

	<body>
		<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>

		<script type="text/javascript">
			$('#exampleModal').on('show.bs.modal', function(event) {
				var button = $(event.relatedTarget) // Button that triggered the modal
				var recipient = button.data('whatever') // Extract info from data-* attributes
				// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
				// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
				var modal = $(this)
				modal.find('.modal-title').text('New message to ' + recipient)
				modal.find('.modal-body input').val(recipient)
			})
		</script>
		<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button> ...more buttons...

		<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="exampleModalLabel">登陆界面</h4>
					</div>
					<div class="modal-body">
						<form>
							<div class="form-group">
								<label for="usrname" class="control-label">用户名：</label>
								<input type="text" class="form-control" id="usrname" name="usrname">
							</div>
							<div class="form-group">
								<label for="message-text" class="control-label">密码：</label>
								<input type="password" class="form-control" id="usrpass" name="usrpass">
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
						<button type="button" class="btn btn-primary">Send message</button>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>

在这里插入图片描述

13、轮播图
<!DOCTYPE html>
<html>

	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
		<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.min.css" />
		<style type="text/css">
			.carousel {
				width: 525px;
				height: 525px;
			}
			
			.item img {
				width: 525px;
				height: 525px;
			}
		</style>
	</head>

	<body>
		<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript">
			$('.carousel').carousel({
				interval: 500;
			})
		</script>
		<div class="container">
			<div class="row">
				<div class="col-md-12">

					<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>
							<li data-target="#carousel-example-generic" data-slide-to="3"></li>
						</ol>

						<!-- Wrapper for slides -->
						<div class="carousel-inner" role="listbox">
							<div class="item active">
								<img src="pic/1.jpg" alt="...">
								<div class="carousel-caption">
									...
								</div>
							</div>
							<div class="item">
								<img src="pic/2.jpg" alt="...">
								<div class="carousel-caption">
									...
								</div>
							</div>
							<div class="item">
								<img src="pic/3.jpg" alt="...">
								<div class="carousel-caption">
									...
								</div>
							</div>
							<div class="item">
								<img src="pic/4.jpg" alt="...">
								<div class="carousel-caption">
									...
								</div>
							</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>

在这里插入图片描述

一个很懒的人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap入门（一）
qq_62331938的博客
04-27 2205
前言 大家好！我是九歌，今天我要分享的内容是Bootstrap的入门，首先老规矩先上思维导图。 提示：以下是本篇文章正文内容，下面案例可供参考 一、Bootstrap 学习一门新的技术我们终究都逃不过三个W。What,Why,Where。 1.What——Bootstrap是什么？ Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript开发的简洁、直观、强悍...
Bootstrap02-组件库
qq_60478234的博客
04-01 658
这次的内容主要是以Bootstrap案例来讲解。 案例1：首页轮播图实现 主页轮播图的效果及代码展示： 1.在Bootstrap中使用的组件是轮播-Carousel 不知道的点这里 进入之后点中文文档 往下滑看到组件库点它，之后你就找下Carousel这样你就找到了。 2.效果图： 3.代码： ...
Bootstrap基本介绍
热门推荐
m0_68756200的博客
03-31 1万+
Bootstrap 一、Bootstrap是什么 Bootstrap诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架 是一个用于快速开发Web应用程序和网站的前端框架 Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷 概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架 二、为什么要用Bootstrap 因为Bootstrap是一个简洁、直观、强悍的前端开发框架，让web开发更迅速、更容
学习响应式BootStrap来写融职教育网站，Bootsrtap第十三天讲师列表栏目
god953的博客
07-29 205
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>融职教育</title> <!-- 移动设备优先--> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
学习响应式BootStrap来写融职教育网站，Bootsrtap第十四天，PK模块的开发
god953的博客
07-29 193
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>融职教育</title> <!-- 移动设备优先--> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
3.Bootstrap详解
Junsunnyl的博客
10-01 1633
文章目录Bootstrap简单入门1.bootstrap简介1.1 什么是Bootstrap？1.2 为什么使用 Bootstrap？1.3 下载与使用2.Bootstrap的使用2.1 表格2.1.1 丰富的标签2.1.2 好看的类样式2.1.3 情景色类样式2.1.4 响应式表格2.2 表单2.2.1 表单布局2.2.1.1 默认布局2.2.1.2 内联布局2.2.2 表单控件2.2.2.1 输入框2.2.2.2 文本框2.2.2.3 复选框2.2.2.4 复选按钮2.2.2.5 单选框2.2.2.6
[Web]如何利用Boostrap框架搭建一个还可以的静态网站
代码中枢：软件工程理论与实践的桥梁
06-20 1132
0.首言 0.1.完善后的效果 0.2.环境 ‘1.开发工具 ：Hbulider 2.框架版本：Boostrap 3 1.关于Boostrap 1.1.Boostrap是什么？ 定义 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出
WEB前端网页设计-Bootstrap 导航元素
君逍遥o
03-16 735
它们使用相同的标记和基类 .nav。Bootstrap 也提供了一个用于共享标记和状态的帮助器类。改变修饰的 class，可以在不同的样式间进行切换。
四十七、使用bootstrap中的选项卡制作产品特色页面
付之一笑的专栏
01-08 1101
一、bootstrap参考链接 参考链接：https://v3.bootcss.com/javascript/#tabs 参考链接：https://v3.bootcss.com/components/#media 参考链接：https://v3.bootcss.com/components/#breadcrumbs 二、效果与代码 效果 兼容PC端、移动端 代码 index.html <!DOCTYPE html> <html lang="en"> <head
Bootsrtap-project
03-18
Bootsrtap-project
thinkphp标签实现bootsrtap轮播carousel实例代码
08-31
给大家介绍thinkphp标签实现bootsrtap轮播carousel实例代码，非常不错，具有参考借鉴价值，需要的的朋友参考下
paging bootsrtap_bootstrap_
10-03
lesson 6 bootstrap page management in boot strap
bootsrtap 响应式布局前端框架
07-11
互相学习
Response 实现重定向
一个很懒的人
02-02 6199
1.重定向： 重定向作用在客户端，客户端将请求发送给服务器后，服务器响应给客户端一个新的请求地址，客户端重新发送新请求。 重定向数据传递： 重定向特点： 重定向是客户端行为。 重定向是浏览器做了至少两次的访问请求。 重定向浏览器地址改变。 重定向两次跳转之间传输的信息会丢失(request范围)。 重定向可以指向任何的资源，包括当前应用程序中的其他资源、同一个站点上的其他应用程序中的资源、其他站点的资源。 重定向特点： 当两个Servlet需要传递数据在同一个站点上的其他应用程序中的资源时.
Feign及熔断注解、配置熔断时间
一个很懒的人
05-30 3134
1.描述 Feign接口调用注册中心服务，一般默认超时时间为：1秒，超过一秒钟会超时报错 2. 更改默认超时时间（开启Feign熔断） 更改配置文件：application.yml 添加注解 配置代码： feign: hystrix: enabled: true #开启Feign的熔断功能 client: config: default: connectTimeout: 5000 #连接超时时间2秒 readTimeout: 50.
Service层控制事务
一个很懒的人
01-31 2874
1.Service业务逻辑层： 1.业务概述： 代表用户完成的一个业务功能，可以由一个或多个DAO的调用组成。(软件所提供的一个功能都叫业务) 2.Service开发流程 2.事务： 在JDBC中，在Service层实现事务需要以下几个步骤： 获得Connection对象开始事务–提交或回滚–关闭连接。其事务策略是 获得Connection对象开始事务: connection.setAutoCommit(false);//true等价于1,false等价于0，将自动提交事务改为手动提交事务 .
Request 详解
一个很懒的人
02-01 2207
1.Request对象： 在Servlet中用来处理客户端请求需要用doGet或doPost方法的request对象 2.get和post请求区别： get请求 get提交的数据会放在URL之后，以?分割URL和传输数据，参数之间以&相连 get方式明文传递，数据量小,不安全 效率高,浏览器默认请求方式为GET请求 对应的Servlet的方法是doGet post请求 post方法是把提交的数据放在HTTP包的Body中 密文传递数据,数据量大,安全 效率相对没有GET高 对应的S.
Response 详解！！！
一个很懒的人
02-02 1845
1.Response 对象： response对象用于响应客户请求并向客户端输出信息。 2.Response 主要方法： 3.Response 乱码问题： 原因： 如果输出内容包含中文，则出现乱码，因为服务器默认采用ISO8859-1编码响应内容 解决方式一： 解决方式二： 4.示例代码： protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOE.
bootsrtap估计
最新发布
05-19
Bootstrap是一个免费、开源的前端框架，可以帮助您快速设计和开发响应式和移动优先的网站。...它还提供了许多可重用的代码片段和样式表，可以在不破坏布局的情况下轻松地修改。 Bootstrap最初由Twitter的工程师们创建...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值