Bootstrap学习实践笔记（三）

最新推荐文章于 2021-03-30 23:26:37 发布
最新推荐文章于 2021-03-30 23:26:37 发布
阅读量463 收藏
点赞数
分类专栏： bootstrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FED_AF/article/details/106226251
版权

一、警告提示框

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>警告提示框</title>
	<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
	<h1>警告提示框及链接样式</h1><hr>
	<div class="alert alert-primary" role="alert">主-<a class="alert-link" href="#">框内的链接</a></div>
	<div class="alert alert-secondary" role="alert">次-<h4 class="alert-heading" href="#">框内的标题</h4></div>
	<div class="alert alert-success" role="alert">成功-<p class="mb-0" href="#">框内的段落</p></div>
	<div class="alert alert-danger" role="alert">危险-<hr>框内的分隔符</div>
	<div class="alert alert-warning" role="alert">警告-可以在右上角定义一个.close关闭按钮效果，则需要在容器中引用.alert-dismissible类</div>
	<div class="alert alert-info" role="alert">信息-警告按钮上要增加data-dismiss="alert" 触发 JavaScript 动作，同时使用button元素，以确保在所有设备上都能获得正确的行为响应。</div>
	<div class="alert alert-light" role="alert">亮-要在关闭警报时生成警报提示，请确保添加.fade和.show样式</div>
	<div class="alert alert-dark alert-dismissable fade show" role="alert">暗-<button class="close" data-dismiss="alert">&times;</button></div>
	<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
	<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
	<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>

二、徽章

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>徽章</title>
	<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
	<h1>外服</h1>
	<h5>使用badge实现效果，使用badge-secondary为徽章指定样式<span class="badge badge-secondary">徽章</span></h5>
	<hr><h1>内用</h1>
	<button type="button" class="btn btn-primary">
		使用badge实现效果，使用badge-secondary为徽章指定样式
		<span class="badge badge-light">徽章</span>
	</button>
	<hr><h1>情景变化</h1>
	<span class="badge badge-primary">主</span>
	<span class="badge badge-secondary">次</span>
	<span class="badge badge-success">成功</span>
	<span class="badge badge-danger">危险</span>
	<span class="badge badge-warning">警告</span>
	<span class="badge badge-info">信息</span>
	<span class="badge badge-light">亮</span>
	<span class="badge badge-dark">暗</span>
	<hr><h1>胶囊形</h1>
	<span class="badge badge-pill badge-primary">主</span>
	<span class="badge badge-pill badge-secondary">次</span>
	<span class="badge badge-pill badge-success">成功</span>
	<span class="badge badge-pill badge-danger">危险</span>
	<span class="badge badge-pill badge-warning">警告</span>
	<span class="badge badge-pill badge-info">信息</span>
	<span class="badge badge-pill badge-light">亮</span>
	<span class="badge badge-pill badge-dark">暗</span>
	<hr><h1>应用到链接上</h1>
	<a href="#" class="badge badge-primary">主</a>
	<a href="#" class="badge badge-secondary">次</a>
	<a href="#" class="badge badge-success">成功</a>
	<a href="#" class="badge badge-danger">危险</a>
	<a href="#" class="badge badge-warning">警告</a>
	<a href="#" class="badge badge-info">信息</a>
	<a href="#" class="badge badge-light">亮</a>
	<a href="#" class="badge badge-dark">暗</a>
	<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
	<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
	<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>

三、面包屑导航

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>面包屑导航</title>
	<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
	<nav>
		<ol class="breadcrumb">
			<li class="breadcrumb-item active">Home</li>
		</ol>
	</nav>

	<nav>
		<ol class="breadcrumb">
			<li class="breadcrumb-item"><a href="#">Home</a></li>
			<li class="breadcrumb-item active">Library</li>
		</ol>
	</nav>
	<nav>
		<ol class="breadcrumb">
			<li class="breadcrumb-item"><a href="#">Home</a></li>
			<li class="breadcrumb-item"><a href="#">Library</a></li>
			<li class="breadcrumb-item active">Data</li>
		</ol>
	</nav>
	<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
	<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
	<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>

四、按钮

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>按钮</title>
	<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
	<h1>基本用法</h1>
	<button class="btn btn-primary">主</button>
	<button class="btn btn-secondary">次</button>
	<button class="btn btn-success">成功</button>
	<button class="btn btn-danger">危险</button>
	<button class="btn btn-warning">警告</button>
	<button class="btn btn-info">信息</button>
	<button class="btn btn-light">亮</button>
	<button class="btn btn-dark">暗</button>
	<button class="btn btn-link">链接</button>
	<hr><h1>其他元素</h1>
	<a class="btn btn-primary" href="#" role="button">a</a>
	<button class="btn btn-primary">button</button>
	<input class="btn btn-primary" type="button" value="input[type='button']">
	<input class="btn btn-primary" type="submit" value="input[type='submit']">
	<input class="btn btn-primary" type="reset" value="input[type='reset']">
	<hr><h1>轮廓按钮</h1>
	<button class="btn btn-outline-primary">主</button>
	<button class="btn btn-outline-secondary">次</button>
	<button class="btn btn-outline-success">成功</button>
	<button class="btn btn-outline-danger">危险</button>
	<button class="btn btn-outline-warning">警告</button>
	<button class="btn btn-outline-info">信息</button>
	<button class="btn btn-outline-light">亮</button>
	<button class="btn btn-outline-dark">暗</button>
	<hr><h1>尺寸规格</h1>
	<button class="btn btn-outline-primary btn-lg">btn btn-primary btn-lg</button>
	<button class="btn btn-secondary btn-sm">btn btn-secondary btn-sm</button>
	<button class="btn btn-success btn-block">btn btn-success btn-block</button>
	<hr><h1>按钮状态</h1>
	<a href="#" class="btn btn-primary active" role="button">该a拥有焦点</a>
	<a href="#" class="btn btn-primary " role="button">该a可用没有焦点</a>
	<a href="#" class="btn btn-primary disabled" role="button">该a不可用</a>
	<button href="#" class="btn btn-primary active">该button拥有焦点</button>
	<button href="#" class="btn btn-primary">该button可用没有焦点</button>
	<button href="#" class="btn btn-primary" disabled>该button不可用</button>
	<button class="btn btn-info" data-toggle="button">点击切换按钮状态样式</button>
	<hr><h1>复选框和单选框</h1>
	<div class="btn-group" data-toggle="buttons">
		<label class="btn btn-secondary active">
			<input type="checkbox" autocomplete="off" checked>复选框和单选框的样式只能通过click事件更新
		</label>
		<label class="btn btn-secondary">
			<input type="checkbox" autocomplete="off">如果使用reset按钮或者js改变checked属性
		</label>
		<label class="btn btn-secondary">
			<input type="checkbox" autocomplete="off">则需要手动改变状态样式
		</label>
	</div>
	<div class="btn-group btn-group-toggle" data-toggle="buttons">
		<label class="btn btn-warning active">
			<input type="radio" autocomplete="off" name="options" checked>使用btn-group-toggle属性可以去掉选框
		</label>
		<label class="btn btn-warning">
			<input type="radio" autocomplete="off" name="options">目前不稳定
		</label>
		<label class="btn btn-warning">
			<input type="radio" autocomplete="off" name="options">仅仅是用于改变样式
		</label>
	</div>
	<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
	<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
	<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script></body>
</html>

五、按钮组

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>按钮组</title>
	<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
	<h1>基本用法</h1>
	<div class="btn-group">
		<button class="btn btn-secondary">左</button>
		<button class="btn btn-secondary">中</button>
		<button class="btn btn-secondary">右</button>
	</div>
	<hr><h1>组合用法</h1>
	<div class="btn-toolbar">
		<div class="btn-group mr-2">
			<button class="btn btn-secondary">1</button>
			<button class="btn btn-secondary">2</button>
			<button class="btn btn-secondary">3</button>
			<button class="btn btn-secondary">4</button>
		</div>
		<div class="btn-group mr-2">
			<button class="btn btn-secondary">5</button>
			<button class="btn btn-secondary">6</button>
			<button class="btn btn-secondary">7</button>
		</div>
		<div class="btn-group">
			<button class="btn btn-secondary">8</button>
		</div>
	</div>
	<div class="btn-toolbar mb-3 mt-3">
		<div class="btn-group mr-2">
			<button class="btn btn-secondary">1</button>
			<button class="btn btn-secondary">2</button>
			<button class="btn btn-secondary">3</button>
			<button class="btn btn-secondary">4</button>
		</div>
		<div class="input-group">
			<div class="input-group-prepend">
				<div class="input-group-text">@</div>
			</div>
			<input type="text" class="form-control">
		</div>
	</div>
	<hr><h1>大小规格和尺寸缩放</h1>
	<p>一个btn-toolbar中的所有btn-group大小都相同，如果不同，会选择最大的那个覆盖其他</p>
	<div class="btn-group btn-group-lg">
		<button class="btn btn-secondary">大</button>
		<button class="btn btn-secondary">大</button>
		<button class="btn btn-secondary">大</button>
	</div>
	<div class="btn-group">
		<button class="btn btn-secondary">中</button>
		<button class="btn btn-secondary">中</button>
		<button class="btn btn-secondary">中</button>
	</div>
	<div class="btn-group btn-group-sm">
		<button class="btn btn-secondary">小</button>
		<button class="btn btn-secondary">小</button>
		<button class="btn btn-secondary">小</button>
	</div>
	<hr><h1>嵌套</h1>
	<div class="btn-group">
		<button class="btn btn-secondary">1</button>
		<button class="btn btn-secondary">2</button>
		<div class="btn-group">
			<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">下拉菜单</button>
			<div class="dropdown-menu">
				<a class="dropdown-item" href="#">条目一</a>
				<a class="dropdown-item" href="#">条目二</a>
			</div>
		</div>
	</div>
	<hr><h1>垂直排列</h1>
	<div class="btn-group-vertical">
		<button class="btn btn-secondary">按钮</button>
		<div class="btn-group-vertical">
			<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">下拉菜单</button>
			<div class="dropdown-menu">
				<a href="#" class="dropdown-item">条目一</a>
				<a href="#" class="dropdown-item">条目二</a>
			</div>		
		</div>
		<button class="btn btn-secondary">按钮</button>
	</div>

	<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
	<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
	<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>

六、卡片

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>卡片</title>
	<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
	<h1>基本用法</h1><br>
	<div class="row">
		<div class="col-2">
			<div class="card bg-primary">
				<div class="card-body">
					<h5 class="card-title">卡片标题</h5>
					<h6 class="card-subtitle mb-2 text-muted">卡片副标题</h6>
					<p class="card-text">内容</p>
					<a href="#" class="card-link">卡片链接</a>
				</div>
			</div>
			<br>
			<div class="card bg-secondary">
				<div class="card-body">
					<p class="card-text">内容</p>
				</div>
				<img class="card-img-bottom" src="Koala.jpg" alt="图片加载失败">
			</div>
		</div>
		<div class="col-2">
			<div class="card">
				<ul class="list-group list-group-flush">
					<li class="bg-success list-group-item">张三</li>
					<li class="bg-success list-group-item">李四</li>
					<li class="bg-success list-group-item">罗翔</li>
				</ul>
			</div>
			<br>
			<div class="card text-center">
				<h5 class="card-header">页眉</h5>
				<div class="card-header bg-transparent">页眉</div>
				<div class="card-body">
					<h5 class="card-title">卡片标题</h5>
					<p class="card-text">内容</p>
					<a href="#" class="btn btn-primary">卡片链接</a>
				</div>
				<div class="card-footer text-muted">2天前</div>
			</div>
		</div>
		<div class="col-2">
			<div class="card bg-warning">
				<img class="card-img-top" src="Koala.jpg" alt="图片加载失败">
				<div class="card-body">
					<h5 class="card-title">卡片标题</h5>
					<p class="card-text">内容</p>
				</div>
				<ul class="list-group list-group-flush">
					<li class="bg-warning list-group-item">张三</li>
					<li class="bg-warning list-group-item">李四</li>
					<li class="bg-warning list-group-item">罗翔</li>
				</ul>
				<div class="card-body">
					<a href="#" class="card-link">卡片链接</a>
				</div>
			</div>
		</div>
		<div class="col-2">
		</div>
	</div>
	<hr><h1>导航</h1>
	<div class="row">
		<div class="col-3">
			<div class="card text-center bg-info">
				<div class="card-header">
					<ul class="nav nav-tabs card-header-tabs">
						<li class="nav-item">
							<a class="nav-link active" href="#">一</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">二</a>
						</li>
						<li class="nav-item">
							<a class="nav-link disabled" href="#">三</a>
						</li>
					</ul>
				</div>
				<div class="card-body">
					<h5 class="card-title">标题</h5>
					<p class="card-text">内容</p>
					<a href="#" class="btn btn-primary">链接</a>
				</div>
			</div>
		</div>
		<div class="col-3">
			<div class="card text-center bg-dark">
				<div class="card-header">
					<ul class="nav nav-pills card-header-pills">
						<li class="nav-item">
							<a class="nav-link active" href="#">一</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">二</a>
						</li>
						<li class="nav-item">
							<a class="nav-link disabled" href="#">三</a>
						</li>
					</ul>
				</div>
				<div class="card-body">
					<h5 class="card-title">标题</h5>
					<p class="card-text">内容</p>
					<a href="#" class="btn btn-primary">链接</a>
				</div>
			</div>
		</div>
	</div>
	<hr><h1>图像叠加覆盖</h1>
	<div class="card text-white w-25">
		<img class="card-img" src="Koala.jpg" alt="图片加载失败">
		<div class="card-img-overlay" style="background-color: #000;opacity: 0.5">
			<h5 class="card-title">标题</h5>
			<p class="card-text">内容</p>
		</div>
	</div>





	<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
	<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
	<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>

七、轮播效果

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>轮播图</title>
	<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
	<div class="row">
		<div class="col-3">
			<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>
				</ol>
				<div class="carousel-inner">
					<div class="carousel-item active">
						<img src="Desert.jpg" class="d-block w-100" alt="图片加载失败">
					</div>
					<div class="carousel-item">
						<img src="Jellyfish.jpg" class="d-block w-100" alt="图片加载失败">
					</div>
					<div class="carousel-item">
						<img src="Lighthouse.jpg" class="d-block w-100" alt="图片加载失败">
					</div>
				</div>
				<a class="carousel-control-prev" href="#carouselExampleIndicators" data-slide="prev">
					<span class="carousel-control-prev-icon" aria-hidden="true"></span>
					<span class="sr-only">Previous</span>
				</a>
				<a class="carousel-control-next" href="#carouselExampleIndicators" data-slide="next">
					<span class="carousel-control-next-icon" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				</a>
			</div>
		</div>
		<div class="col-3">
			<h1 class="text-left">左边：推拉式</h1><br><br><br><br><br><br><br><br><br><br>
			<h1 class="text-right">右边：交替式，有字幕</h1>
		</div>
		<div class="col-3">
			<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
				<ol class="carousel-indicators">
					<li data-target="#carouselExampleFade" data-slide-to="0" class="active"></li>
					<li data-target="#carouselExampleFade" data-slide-to="1"></li>
					<li data-target="#carouselExampleFade" data-slide-to="2"></li>
				</ol>
				<div class="carousel-inner">
					<div class="carousel-item active">
						<img src="Desert.jpg" class="d-block w-100" alt="图片加载失败">
						<div class="carousel-caption d-none d-md-block">
							<h5>第一张图</h5>
							<p>清明上河图</p>
						</div>
					</div>
					<div class="carousel-item">
						<img src="Jellyfish.jpg" class="d-block w-100" alt="图片加载失败">
						<div class="carousel-caption d-none d-md-block">
							<h5>第二张图</h5>
							<p>春树秋霜图</p>
						</div>
					</div>
					<div class="carousel-item">
						<img src="Lighthouse.jpg" class="d-block w-100" alt="图片加载失败">
						<div class="carousel-caption d-none d-md-block">
							<h5>第三张图</h5>
							<p>小鸡啄米图</p>
						</div>
					</div>
				</div>
				<a class="carousel-control-prev" href="#carouselExampleFade" data-slide="prev">
					<span class="carousel-control-prev-icon" aria-hidden="true"></span>
					<span class="sr-only">Previous</span>
				</a>
				<a class="carousel-control-next" href="#carouselExampleFade" data-slide="next">
					<span class="carousel-control-next-icon" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				</a>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
	<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
	<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
	<script type="text/javascript" charset="UTF-8">
		$('.carousel').carousel({
			interval: 1000, // 指定自动切换间隔，为false时不自动切换
			keyboard: false, // 如果为true可以通过左右方向键进行切换控制，前提是切换按钮获得焦点。
			pause: "hover", // 鼠标悬停时暂停切换，false关闭该功能
			ride: false, // 在用户手动循环第一个项目后自动播放传送带， 如果“carousel”则加载时自动播放传送带。
			wrap: true // true是无限循环，false是循环一次
		})
	</script>
</body>
</html>

八、折叠面板

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>折叠面板</title>
	<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
	<h1>两种实现方式</h1>
	<p>
		<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">带href的a</a>
		<button class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample">带data-target的button</button>
	</p>
	<div class="collapse" id="collapseExample">
		<div class="card card-body">使用卡片实现的内容</div>
	</div>
	<hr><h1>多目标控制</h1>
	<p>
		<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1"">第一部分</a>
		<button class="btn btn-primary" data-toggle="collapse" data-target="#multiCollapseExample2">第二部分</button>
		<button class="btn btn-primary" data-toggle="collapse" data-target=".multi-collapse">全部显示/隐藏</button>
	</p>
	<div class="row">
		<div class="col">
			<div class="collapse multi-collapse" id="multiCollapseExample1">
				<div class="card card-body">全部显示/隐藏实际上是把所有的状态置反</div>
			</div>
		</div>
		<div class="col">
			<div class="collapse multi-collapse" id="multiCollapseExample2">
				<div class="card card-body">先显示1，再点全部显示/隐藏，会隐藏1显示2</div>
			</div>
		</div>
	</div>
	<hr><h1>手风琴折叠范例</h1>
	<div class="accordion bg-dark w-25" id="accordionExample">
		<div class="card">
				<div class="card-header bg-dark text-light" id="headingOne" data-toggle="collapse" data-target="#collapseOne"><h2 class="m-auto">标题1</h2></div>
			<div id="collapseOne" class="collapse show" data-parent="#accordionExample">
				<div class="card-body">第1部分</div>
			</div>
		</div>
		<div class="card">
				<div class="card-header bg-dark text-light" id="headingOne" data-toggle="collapse" data-target="#collapseTwo"><h2 class="m-auto">标题2</h2></div>
			<div id="collapseTwo" class="collapse" data-parent="#accordionExample">
				<div class="card-body">第2部分</div>
			</div>
		</div>
		<div class="card">
				<div class="card-header bg-dark text-light" id="headingOne" data-toggle="collapse" data-target="#collapseThree"><h2 class="m-auto">标题3</h2></div>
			<div id="collapseThree" class="collapse" data-parent="#accordionExample">
				<div class="card-body">第3部分</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
	<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
	<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>

 

FED_AF
关注
专栏目录
bootstrap学习日志
weixin_48610566的博客
09-02 857
bootstrap学习文档
第五周学习周记——学习BootStrap
jix_Hu的博客
04-23 358
第五周学习周记前言一、BootStrap样式1. BootStrap表格2. BootStrap按钮3. BootStrap图片二、BootStrap组件和插件1. 导航栏2. 页面标题3. 列表组4. 多媒体对象总结 前言 在上一周初步了解了BootStrap的基本介绍后，这一周将进一步学习BootStrap的相关内容。 一、BootStrap样式 Bootstrap支持以两种方式显示代码： 第一种是code标签，用来内联显示代码； 第二种是pre标签，用来显示为一个独立的块元素或者代码有多行。 1.
Bootstrap学习实践笔记（一）
FED_AF的博客
05-19 702
利用栅格系统布局
Bootstrap学习笔记(实习第2天)
http://kingim.cn/
01-06 1726
1、学习网站： http://www.bootcss.com/ 2、页面中加入下面代码即可调用bootstrap。 3、基本模版                                4、兼容低版本的IE浏览器 http://www.bootcss.com/p/bsie/ 5
我的bootstrap日记（二）
dgatnpdezomwb6598的博客
11-23 244
<!-- glyphicon字体图标 glyphicon字体图标 --><span class="glyphicon glyphicon-search"></span> <!-- 空span标签 --> <!-- 下拉菜单 下拉菜单 下拉菜单 下拉菜单 下拉菜单 下拉菜单 --><div class="dro...
bootstrap学习笔记
06-17
在“Bootstrap学习笔记”中，作者强调了为什么应该使用Bootstrap，并介绍了其包内容和如何通过在线实例快速上手。学习笔记中还包含了关于Bootstrap环境的安装指南，包括如何下载Bootstrap和理解其文件结构。作者建议...
bootstrap基础知识学习笔记
09-01
Bootstrap 基础知识学习笔记主要涵盖了以下几个核心概念： 1. **引入 Bootstrap**：在 HTML 文件中，你需要引入 Bootstrap 的 CSS 和 JavaScript 文件。这通常包括 jQuery（因为 Bootstrap 的某些组件依赖于它）。...
HTML，CSS，bootStrap学习笔记.zip
最新发布
11-08
资源简介《HTML，CSS，Bootstrap学习笔记》是一个综合性的学习资源包，旨在帮助初学者和进阶开发者全面掌握前端开发的基础知识和技能。本资源包涵盖了HTML、CSS和Bootstrap这三个前端开发的核心领域，通过详细的笔记...
Bootstrap学习实践笔记（四）
FED_AF的博客
05-24 585
组件：下拉菜单、表单、大块屏、列表组、媒体对象、弹出模态框 、导航栏、分页、POP提示 、进度条、滚动监听、旋转特效、弹出提示框、提示冒泡
bootstrap学习笔记之初识bootstrap
10-22
为了更好地学习和应用Bootstrap，建议通过官方文档或中文网了解详细信息，实践操作并逐步掌握各个组件的用法。此外，不断探索和研究社区中丰富的插件和扩展，将使你的Bootstrap项目更具特色和功能。 总之，...
2019-06-11 Java学习日记之Bootstrap
weixin_33911824的博客
06-11 139
什么是响应式页面? 适应不同的分辨率显示不同的样式，提高用户的体验 BootStrap结构： 　　全局CSS 　　　　boosStrap中已经定义好了一套CSS的样式表 　　组件 　　　　bootStrap定义的一套按钮，导航条等组件 　　JS插件 　　　　bootStrap定义了一套JS的插件，这些插件已经默认实现了很多种效果 BootStrap的布局容器： .contain...
学习周记4——关于Bootstrap的学习
qq_48999927的博客
03-30 211
Bootstrap简介 Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 有以下几个特点： 移动设备优先 浏览器支持 容易上手：只要具备 HTML 和 CSS 的基础知识、 响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。 Bootstrap网格系统 ...
Bootstrap学习实践笔记（二）
FED_AF的博客
05-19 365
排版、图片、表格
Bootstrap学习实践笔记（五）
FED_AF的博客
05-25 618
公共样式：边框、清除浮动、颜色、Display显示属性、嵌入、Flex弹性布局、Float浮动属性、溢出、固顶(底)及定位、阴影、规格与尺寸、spacing间隔规范（Margin与Padding间距处理）、文本处理、垂直对齐、显示或隐藏(能见度)处理
我的bootstrap日记
dgatnpdezomwb6598的博客
11-22 157
<!-- 常用格式 --><div class="container"> <div class="row"> <div class="col-md-4"></div> <div class="col-md-4"></div> <div class="col-md-4"></div&...
bootstrap学习笔记-html5
12-22
这个“bootstrap学习笔记-html5”压缩包文件显然包含了有关如何使用Bootstrap和HTML5进行网页设计的资料，非常适合初学者入门。接下来，我们将深入探讨这两个重要主题。 HTML5（超文本标记语言第五版）是网页开发的...
Bootstrap 学习日志（一）
weixin_30443731的博客
07-27 586
跟着师傅，自学了两周的前端开发，慢慢的从几乎零基础开始学起，发现前端开发真的比之前想象的要有趣的多，难度也大的多 当然难度并非代码逻辑上的难度，而是根据你需要制作的网页，选择最合适的主题，最合适的配色，等等等等 我觉得也能通过这次学习收获不少之前只写代码的“码农生活”之外的其他更有意义的东西 话不多说 回归主体 Bootstrap是Twitter退出的一个基于JQu...
Bootstrap小日记
珍妮的小罐君
12-26 490
1：关于列偏移 之前不知道列偏移可以用来做什么布局，后来仔细参读了Bootstrap文档，细心的发现列偏移其实可以用来为当前元素增加外边距；Bootstrap中有一个.col-md-offset-*的类可以将该元素向右偏移，比如：col-md-4则该元素向右偏移了4列，需要注意的是，Bootstrap中的栅格系统默认是将整个页面分为12列，如果需要元素使用col-md-offset-*，你需要注...
bootstrap table 个人心得
weixin_34387284的博客
08-18 94
一、table元素 <table id="blackTable" ></table> 就这么多就够了，一定要有id或者class 二、table js初始化 function initSmsTable(){ var url = "/sms/plan/list"; $('#smsTable').bootstrapTable({ ...
Bootstrap 学习日志（二）
weixin_30687587的博客
07-27 308
忙活两天的成果如下 算是把整个系统的大致界面整出来了 依次说一下具体使用了Bootstrap的什么功能吧 PS.界面仿照了Themeforest 上面的 Minoral 主体 地址http://tattek.com/minoral/datatables.html 代码太长了，由左上到右下进行文字叙述吧 ①最上方是我的Header条以及一个标志区...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值