bootsrtap 讲解

最新推荐文章于 2024-04-27 23:07:09 发布
最新推荐文章于 2024-04-27 23:07:09 发布
阅读量258 收藏
点赞数
分类专栏： 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>

在这里插入图片描述

一个很懒的人
关注
专栏目录
Bootstrap.yml那点事
爱琴孩的博客
04-02 1216
若application.yml 和bootstrap.yml 在同一目录下：bootstrap.yml 先加载 application.yml后加载，bootstrap.yml 用于应用程序上下文的引导阶段。bootstrap.yml 由父Spring ApplicationContext加载。但是spring cloud用上了配置中心，就一个boostrap.yml，且不支持文件名的方式来区分。多个配置以 — 分开，然后通过spring.profiles=环境表示具体的环境配置.。
bootstrap.yml与application.yml详解
yangzhihua的专栏
05-04 8887
bootstrap.yml（bootstrap.properties）用来在程序引导时执行，应用于更加早期配置信息读取，如可以使用来配置application.yml中使用到参数等 application.yml（application.properties)应用程序特有配置信息，可以用来配置后续各个模块中需使用的公共参数等。
Bootstrap基本介绍
热门推荐
m0_68756200的博客
03-31 1万+
Bootstrap 一、Bootstrap是什么 Bootstrap诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架 是一个用于快速开发Web应用程序和网站的前端框架 Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷 概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架 二、为什么要用Bootstrap 因为Bootstrap是一个简洁、直观、强悍的前端开发框架，让web开发更迅速、更容
Bootstrap简述
weixin_71437031的博客
08-18 2924
栅格系统提供了基本的前缀，用于在不同宽度的屏幕中实现不同的排列方式，列的类名可以写多个，也就是可以同时设置.col-、.col-sm-、.col-md-、.co-/g-和.col-xl*类名。组件可以有自己的属性和方法。由于栅格系统就是默认将父元素分成12等份，所以可根据占据的份数来设置子元素的宽度，在设置列的宽度时，只需要在不同的类前缀后面加上栅格数量即可。栅格系统页面的内容可以放入这些创建好的布局容器中，并且会根据父元素盒子（布局容器)尺寸的大小进行适当地调节，从而达到响应式页面布局的效果。...
Ajax的实例以及bootstrap的使用
weixin_67235801的博客
05-04 3815
省市联动与分页面板
Bootsrtap-project
03-18
描述中没有提供具体项目的信息，但我们可以推测"Bootsrtap-project"可能包含了一个典型的Bootstrap项目结构，比如以下几个部分： 1. **index.html**：项目的主入口文件，通常会包含Bootstrap的CDN链接（CSS和JS）...
thinkphp标签实现bootsrtap轮播carousel实例代码
08-31
在本文中，我们将深入探讨如何使用ThinkPHP框架的模板标签来实现Bootstrap的轮播carousel功能。Bootstrap是一款流行的前端开发框架，其轮播组件（carousel）常用于创建动态展示多张图片或内容的交互式界面。...
bootsrtap估计
最新发布
05-19
Bootstrap是一个免费、开源的前端框架，可以帮助您快速设计和开发响应式和移动优先的网站。...它还提供了许多可重用的代码片段和样式表，可以在不破坏布局的情况下轻松地修改。 Bootstrap最初由Twitter的工程师们创建...
bootsrtap 示例
02-05
Bootstrap是一种流行的前端框架，用于快速构建响应式网站和Web应用程序。它提供了一整套CSS样式和JavaScript组件，可以帮助开发者节省大量时间和精力。 一个常见的Bootstrap示例是创建一个响应式的网页布局。...
python+django+bootsrtap+博客+源码+完整
05-30
标题"python+django+bootsrtap+博客+源码+完整"暗示我们将探讨如何使用这些技术构建一个完整的博客系统。首先，让我们深入了解每个组件的关键知识点： 1. Python：作为后端语言，Python在处理数据、逻辑和与数据库...
关于jQuery里prev()的简单操作代码
11-27
prev() 函数被用来匹配元素集的前一个兄弟元素，仅仅只有前一个兄弟元素被选择，其子元素将被忽略。这里给大家介绍jQuery里prev()的简单操作，具体内容如下： 一个朋友提了个需求给我：点击按钮删除input，如果input剩一个，点击按钮全部消失。 很简单的操作，但是你如果不知道jquery里有prev（）这个方法，可能你会走很多弯路。 代码： html <div> <input type="text" placeholder="用户名"> <input type="text" placeholder="用户名"> <input type="text" type="hid
Bootstrap框架 (黑马程序员)
2301_80068547的博客
11-25 7084
栅格系统英文为 "grid systems"，也有人翻译为 "网格系统"，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口 ( viewport ) 尺寸的增加，系统会自动分为最多 12 列。Bootstrap 里面 container 宽度是固定的，但是不同屏幕下，container的宽度不同，我们再把 container 划分为 12 等份。
利用bootstrap实现简单的弹窗
qq_41340666的博客
07-10 1万+
首先引入bootstrap的js库和jquery库 例如： <script src="/js/jquery.min.js"></script> <script src="/js/bootstrap.min.js"></script> 写js方法： 例如： function chstatConfirm(flag, params) {...
BootStrap详解
weixin_45845391的博客
04-27 2819
Bootstrap简介 什么是BootStrap？ BootStrap来自Twitter，是目前最受欢迎的响应式前端框 Bootstrap是基于HTML、CSS、JavaScript的，它简洁灵活，使得Web开发更加快捷 为什么使用Bootstrap？ 移动设备优先：自Bootstrap3起，框架包含了贯穿于整个库移动设备优先的样式。 - 不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中 - 也就是说，针对移动设备的样式融合进了框架的每个角度，而不是增加一个额外的文件
Spring Cloud 配置中心多环境配置bootstrap.yml
m0_67394230的博客
08-24 6265
但是spring cloud用上了配置中心，就一个boostrap.yml，且不支持文件名的方式来区分。多个配置以 — 分开，然后通过spring.profiles=环境表示具体的环境配置.。application-test.yml #测试环境。application-prod.yml #正式环境。application-dev.yml #开发环境。
springboot 获取application参数_SpringCloud微服务之Config：获取配置中心配置
weixin_39805539的博客
12-01 978
前面已经完成了配置中心微服务的搭建，下面我们就需要改造一下用户微服务user-service，配置文件信息不再由微服务项目提供，而是从配置中心获取。如下对user-service工程进行改造。添加依赖在user-service模块中，添加如下依赖:org.springframework.cloudspring-cloud-starter-config修改配置删除user-service模...
java基础48 IO流技术（序列流）
weixin_30729609的博客
07-13 445
本文知识点目录： 1、SequenceInputStream序列流的步骤 2、实例 3、附录（音乐的切割与合并） 1、SequenceInputStream序列流的步骤 1.找到目标文件 2.建立数据输入输出通道 3.建立序列流对象 4.关闭资源 2、实例 1 package com....
jQuery——bootstrap概述
qq_63654439的博客
03-07 1256
ui框架 1、美化页面效果 2、简化布局 3、使用现成的组件和插件 下载bootstrap bootstrap地址：https://www.bootcss.com/ 1、在官网下载bootstrap文件 2、在html文件中引入bootstrap bootstrap样式 1、按钮 <a class="btn btn-default" href="#" role="button">Link</a> <input class="btn btn-
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值