ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

bootsrtap 讲解

2021-02-10 11:33:02  阅读：153  来源： 互联网

标签：... bootstrap 示例 bootsrtap 表单 按钮 modal 讲解


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,示例,bootsrtap,表单,按钮,modal,讲解
来源： https://blog.csdn.net/weixin_43715360/article/details/113775095

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有