bootsrtap 讲解

2024-03-24 14:17:28

1、概述

bootsrtap 讲解

2、响应式页面案例

bootstrap官网：link.
bootsrtap 讲解

3、bootstrap组成

  • 全局css的样式
  • 组件
  • js插件

4、格栅系统

  • 格栅系统简介
    bootsrtap 讲解
  • 媒体查询功能
    bootsrtap 讲解
  • 代码示例
    bootsrtap 讲解

4、排版

bootsrtap 讲解

  • 示例代码：
    bootsrtap 讲解
    bootsrtap 讲解

5、表格

bootsrtap 讲解

  • 示例代码：
    bootsrtap 讲解
    bootsrtap 讲解

6、表单（官网超级详细）

7、按钮

bootsrtap 讲解
bootsrtap 讲解
bootsrtap 讲解
bootsrtap 讲解

  • 按钮示例：
<!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>

bootsrtap 讲解

8、按钮

bootsrtap 讲解

  • 示例：
    bootsrtap 讲解
    bootsrtap 讲解

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>

bootsrtap 讲解

10、分页

bootsrtap 讲解

  • 示例：
<!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>

bootsrtap 讲解

11、缩略图

bootsrtap 讲解

  • 示例：
<!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>

bootsrtap 讲解

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>

bootsrtap 讲解

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>

bootsrtap 讲解

上一篇：bootstrap模态框视频，图片，页面


下一篇：uniapp 生成二维码