12、Bootstrap官网地址（基本模板、栅格系统、重构首页、jQuery完成注册页面表单校验）

最新推荐文章于 2024-01-10 22:14:58 发布
最新推荐文章于 2024-01-10 22:14:58 发布
阅读量1.1k 收藏 3
点赞数 1
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangbo_csdn/article/details/119651299
版权

Web目录标题

1、Bootstrap官网地址

Bootstrap

2、bootstrap基本模板

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css" crossorigin="anonymous">

  </head>
  <body>
	  <div class="container-fluid">
		<h1>你好，世界！</h1>
	  </div>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="../js/jquery-1.11.0.js" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js" crossorigin="anonymous"></script>
  </body>
</html>

3、bootstrap栅格系统

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css" crossorigin="anonymous">
	<style type="text/css">
		div{
			border: 1px solid red;
		}
	</style>
  </head>
  <body>
	  <div class="container-fluid">
		<div class="row">
			<div class="col-md-4 col-sm-5 col-xs-6 ">1</div>
			<div class="col-md-4 col-sm-2 hidden-xs">2</div>
			<div class="col-md-4 col-sm-5 col-xs-6 ">3</div>
		</div>
	  </div>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="../js/jquery-1.11.0.js" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js" crossorigin="anonymous"></script>
  </body>
</html>

在这里插入图片描述

4、bootstrap重构首页

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap重构首页</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css" crossorigin="anonymous">
	<style type="text/css">
		.header {
			margin-top: 10px;
			margin-left: 110px;
		}
		#proSpan {
			font-size: 30px;
		}
		
		
		.ad {
			margin-top: 10px;
		}
		.footer {
			text-align: center;
			margin-bottom: -10px;
		}
		/* 修改bootstrap默认样式 */
		.list-inline > li {
			padding-left: 0px;
			padding-right: 0px;
		}
		/* 修改bootstrap默认样式 */
		.btn {
			padding: 6px 5px;
		}
		.big {
			width: 100%;
			height: 360px;
		}
		.middle {
			width: 100%;
			height: 170px;
		}
		.proName {
			text-align: center;
			margin-top: 5px;
		}
		.proPrice {
			text-align: center;
			color: red;
			margin-top: 5px;
			margin-bottom: 5px;
		}
	</style>
  </head>
  <body>
	  <div class="container">
		<!-- header logo部分 -->
		<div class="row">
			<div class="col-md-4 col-sm-5 col-xs-6 ">
				<img src="../img/logo2.png"/>
			</div>
			<div class="col-md-4 col-sm-2 hidden-xs">
				<img src="../img/header.png"/>
			</div>
			<div class="col-md-4 col-sm-5 col-xs-6 ">
				<ul class="list-inline header">
					<li><a class="btn btn-link" href="#">登录</a></li>
					<li><a class="btn btn-link" href="#">注册</a></li>
					<li><a class="btn btn-link" href="#">购物车</a></li>
				</ul>
			</div>
		</div>
		<!-- 导航部分 -->
		<nav class="navbar navbar-inverse">
		  <div class="container-fluid">
		    <!-- Brand and toggle get grouped for better mobile display -->
		    <div class="navbar-header">
		      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
		      <a class="navbar-brand" href="#">首页</a>
		    </div>
		
		    <!-- Collect the nav links, forms, and other content for toggling -->
		    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		      <ul class="nav navbar-nav">
		        <li class="active"><a href="#">手机数码 <span class="sr-only">(current)</span></a></li>
		        <li><a href="#">电脑办公</a></li>
				<li><a href="#">电脑办公</a></li>
				<li><a href="#">电脑办公</a></li>
		      </ul>
		      <form class="navbar-form navbar-right">
		        <div class="form-group">
		          <input type="text" class="form-control" placeholder="Search">
		        </div>
		        <button type="submit" class="btn btn-default">搜索</button>
		      </form>
		    </div><!-- /.navbar-collapse -->
		  </div><!-- /.container-fluid -->
		</nav>
		<!-- 轮播图部分 -->
		<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>
		  </ol>
		
		  <!-- Wrapper for slides -->
		  <div class="carousel-inner" role="listbox">
		    <div class="item active">
		      <img src="../img/1.jpg" alt="...">
		    </div>
		    <div class="item">
		      <img src="../img/2.jpg" alt="...">
		    </div>
		    <div class="item">
		      <img src="../img/3.jpg" alt="...">
		    </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>
		
		<!-- 热门商品部分 -->
		<div id="proSpan" class="ad">热门商品<img src="../img/title2.jpg"/></div> 
		<div class="row">
			<div class="col-md-2"><img src="../img/big01.jpg" class="big"/></div>
			<div class="col-md-10">
				<div class="row">
					<div class="col-md-6">
						<img src="../img/middle01.jpg" class="middle"/>
					</div>
					<div class="col-md-2">
						<img src="../img/small01.jpg"/>
						<div class="proName">冬瓜</div>
						<div class="proPrice">$299.00</div>
					</div>
					<div class="col-md-2">
						<img src="../img/small02.jpg"/>
						<div class="proName" >冬瓜</div>
						<div class="proPrice" >$299.00</div>
					</div>
					<div class="col-md-2">
						<img src="../img/small03.jpg"/>
						<div class="proName" >冬瓜</div>
						<div class="proPrice" >$299.00</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-2">
						<img src="../img/small04.jpg"/>
						<div class="proName">冬瓜</div>
						<div class="proPrice">$299.00</div>
					</div>
					<div class="col-md-2">
						<img src="../img/small05.jpg"/>
						<div class="proName">冬瓜</div>
						<div class="proPrice">$299.00</div>
					</div>
					<div class="col-md-2">
						<img src="../img/small06.jpg"/>
						<div class="proName">冬瓜</div>
						<div class="proPrice">$299.00</div>
					</div>
					<div class="col-md-2">
						<img src="../img/small07.jpg"/>
						<div class="proName">冬瓜</div>
						<div class="proPrice">$299.00</div>
					</div>
					<div class="col-md-2">
						<img src="../img/small08.jpg"/>
						<div class="proName">冬瓜</div>
						<div class="proPrice">$299.00</div>
					</div>
					<div class="col-md-2">
						<img src="../img/small09.jpg"/>
						<div class="proName">冬瓜</div>
						<div class="proPrice">$299.00</div>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 广告部分 -->
		<div class="ad"><img src="../img/guanggao.jpg" width="100%"/>
		</div>
	  
		<!-- 热门商品部分 -->
		<div id="proSpan">热门商品<img src="../img/title2.jpg"/></div> 
		<div class="row">
			<div class="col-md-2"><img src="../img/big01.jpg" class="big"/></div>
			<div class="col-md-10">
				<div class="row">
					<div class="col-md-6">
						<img src="../img/middle01.jpg" class="middle"/>
					</div>
					<div class="col-md-2">
						<img src="../img/small01.jpg"/>
						<div class="proName">冬瓜</div>
						<div class="proPrice">$299.00</div>
					</div>
					<div class="col-md-2">
						<img src="../img/small02.jpg"/>
						<div class="proName" >冬瓜</div>
						<div class="proPrice" >$299.00</div>
					</div>
					<div class="col-md-2">
						<img src="../img/small03.jpg"/>
						<div class="proName" >冬瓜</div>
						<div class="proPrice" >$299.00</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-2">
						<img src="../img/small04.jpg"/>
						<div class="proName">冬瓜</div>
						<div class="proPrice">$299.00</div>
					</div>
					<div class="col-md-2">
						<img src="../img/small05.jpg"/>
						<div class="proName">冬瓜</div>
						<div class="proPrice">$299.00</div>
					</div>
					<div class="col-md-2">
						<img src="../img/small06.jpg"/>
						<div class="proName">冬瓜</div>
						<div class="proPrice">$299.00</div>
					</div>
					<div class="col-md-2">
						<img src="../img/small07.jpg"/>
						<div class="proName">冬瓜</div>
						<div class="proPrice">$299.00</div>
					</div>
					<div class="col-md-2">
						<img src="../img/small08.jpg"/>
						<div class="proName">冬瓜</div>
						<div class="proPrice">$299.00</div>
					</div>
					<div class="col-md-2">
						<img src="../img/small09.jpg"/>
						<div class="proName">冬瓜</div>
						<div class="proPrice">$299.00</div>
					</div>
				</div>
			</div>
		</div>
			  
		<!-- footer部分 -->
		<div class="ad">
			<img src="../img/footer.jpg" width="100%"/>
			<div class="footer">
				<ul class="list-inline header">
					<li><a class="btn btn-link" href="#">友情链接</a></li>
					<li><a class="btn btn-link" href="#">友情链接</a></li>
					<li><a class="btn btn-link" href="#">友情链接</a></li>
					<li><a class="btn btn-link" href="#">友情链接</a></li>
					<li><a class="btn btn-link" href="#">友情链接</a></li>
					<li><a class="btn btn-link" href="#">友情链接</a></li>
					<li><a class="btn btn-link" href="#">友情链接</a></li>
					<li><a class="btn btn-link" href="#">友情链接</a></li>
					<li><a class="btn btn-link" href="#">友情链接</a></li>
				</ul>
			</div>
			<div class="footer">Copyright &copy; 2021-2022 指针商城</div>
		</div>
	  </div>
	  
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="../js/jquery-1.11.0.js" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js" crossorigin="anonymous"></script>
  </body>
</html>

在这里插入图片描述

5、使用jQuery完成注册页面表单校验

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网站注册页面</title>
		<style>
			#contanier{
				border: 0px solid white;
				width: 1300px;
				margin: auto;
			}
			
			#top{
				border: 0px solid white;
				width: 100%;
				height: 50px;
			}
			#menu{
				height: 40px;
				background-color: black;
				padding-top: 10px;
				margin-bottom: 15px;
				margin-top: 10px;
				padding-left: 10px;
			}
			#menu a {
				margin: 10px;
				color: white;
			}
			#menu a:first-child {
				font-size: 20px;
			}
			.top{
				border: 0px solid white;
				width: 405px;
				height: 100%;
				float: left;
				padding-left: 25px;
			}
			#top1{
				padding-top: 15px;
			}
			#bottom{
				margin-top: 13px;
				text-align: center;
			}
			
			#form{
				height: 500px;
				padding-top: 70px;
				background-image: url(../img/regist_bg.jpg);
				margin-bottom: 10px;
			}
			#big {
				font-size: 25px;
				margin-left: 55px;
				color: #FFD231;
			}
			#eng {
				color: #A6A6A6;
				margin-left: 20px;
			}
			a {
				text-decoration: none;
				
			}
			.a_normal {
				color: #3B6797;
				margin: 5px;
				font-size: 14px;
			}
			
			label.error{
				background:url(../img/unchecked.jpg) no-repeat 10px 3px;
				padding-left: 30px;
				font-family:georgia;
				font-size: 15px;
				font-style: normal;
				color: red;
			}
			
			label.success{
				background:url(../img/checked.jpg) no-repeat 10px 3px;
				padding-left: 30px;
			}
			
			#father{
				border: 0px solid white;
				padding-left: 307px;
			}
			
			#form2{
				border: 5px solid gray;
				width: 660px;
				height: 450px;
			}
			.td_left {
				text-align: right;
				color: #6C6C6C;
			}
			.td_right {
				padding-left: 20px;
			}
			input {
				border: 1px solid gray;
				border-radius: 5px;
				height: 20px;
			}
			#register {
				background-color: #FFD026;
				border: 1px solid #FFD026;
				height: 30px;
				width: 80px;
				margin-left: 200px;
			}
			#yanzhengma {
				vertical-align: middle;
			}

		</style>
		
	</head>
	<body>
		<div id="contanier">
			<div id="top">
				<div class="top">
					<img src="../img/logo2.png" height="47px"/>
				</div>
				<div class="top">
					<img src="../img/header.png" height="45px" />
				</div>
				<div class="top" id="top1">
					<a href="#" class="a_normal">登录</a>
					<a href="#" class="a_normal">注册</a>
					<a href="#" class="a_normal">购物车</a>
				</div>
			</div>
			<div id="menu">
				<a href="#">首页</a>    
				<a href="#">电脑办公</a>
				<a href="#">手机数码</a>
				<a href="#">鞋靴箱包</a>	
			</div>
			<div id="form">
				<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
				<script src="../js/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>
				<script type="text/javascript">
					$(function() {
						$("#registForm").validate({
							rules: { // 验证规则
								user: {
									required: true,
									minlength: 6,
									maxlength: 16,
									checkContent: true
								},
								password: {},
								repassword: {
									equalTo: "#password"
								},
								sex: {
									required: true
								}
							},
							messages: { // 错误提示
								user: {
									required: "用户名不能为空",
									minlength: "长度必须为6~16",
									maxlength: "长度必须为6~16",
									checkContent: "格式不正确"
								},
								password: {}
							},
							errorElement: "label", // 用来创建错误提示信息标签
							success: function(label) { //验证成功后的执行的回调函数
								//label指向上面那个错误提示信息标签label
								label.text(" ") //清空错误提示消息
									.addClass("success"); //加上自定义的success类
							},
							//单条校验失败，后会调用此方法，在此方法中，编写错误消息如何显示 及  校验失败回调方法
							showErrors: function(errorMap, errorList) {
								// 遍历错误列表
								for(var obj in errorMap) {
									// 自定义错误提示效果
									$('#' + obj).parent().children().removeClass('success');
								}
								// 此处注意，一定要调用默认方法，这样保证提示消息的默认效果
								this.defaultShowErrors();
							},
						});
						// 自定义校验规则
						// 使用:  checkContent: true
						$.validator.addMethod("checkContent", 
							// value-要验证的内容
							// element-要验证的输入框元素
							// params-使用验证规则的时候传参
							function(value, element, params) {
								var reg = /^[a-zA-Z]\w{5,15}$/;
								return reg.test(value);
								// console.log(value);
								// console.log(element);
								// console.log(params);
								// return false;
						})
						
					})
				</script>
				<form action="#" method="get" id="registForm">
					<div id="father">
						<div id="form2">
							<table border="0px" width="100%" height="100%" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
								<tr>
									<td colspan="2" >
										<span id="big">会员注册</span> <span id="eng">USER REGISTER</span>
									</td>
								</tr>
								<tr>
									<td class="td_left">
										
										<label for="user" >用户名</label>
									</td>
									<td class="td_right">
										<em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;
										<input type="text" name="user" size="35px" id="user"/>
									</td>
								</tr>
								<tr>
									<td class="td_left">
										
										<label for="password" >密码</label>
									</td>
									<td class="td_right">
										<em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;
										<input type="password"  name="password" size="35px" id="password" />
									</td>
								</tr>
								<tr>
									<td class="td_left">
										
										<label for="repassword" >确认密码</label>
									</td>
									<td class="td_right">
										<em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;
										<input id="repassword" type="password" name="repassword" size="35px"/>
									</td>
								</tr>
								<tr>
									<td class="td_left"> 
										
										<label for="email" >Email</label>
									</td>
									<td class="td_right">
										<em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="email" size="35px" id="email"/>
									</td>
								</tr>
								<tr>
									<td class="td_left">
										
										<label for="username" >姓名</label>
									</td>
									<td class="td_right">
										<em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="username" size="35px"/>
									</td>
								</tr>
								<tr>
									<td class="td_left">
										
										<label>性别</label>
									</td>
									<td class="td_right">
										<span style="margin-right: 155px;">
											<em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="radio" name="sex" id="male" value="男"/>
											<label for="male">男</label>
											<input type="radio" name="sex" id="female" value="女"/>
											<label for="female">女</label><em></em>
										</span>
										<label for="sex" class="error" style="display: none;"></label>
									</td>
								</tr>
								<tr>
									<td class="td_left">
										
										<label for="birthday" >出生日期</label>
									</td>
									<td class="td_right">
										<em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="birthday" id="birthday" size="35px"/>
									</td>
								</tr>
								<tr>
									<td class="td_left">
										
										<label for="yanzhengma" >验证码</label>
									</td>
									<td class="td_right">
										<em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="yanzhengma" />
										<img src="../img/yanzhengma.png" id="yanzhengma" style="height: 18px;width: 85px;"/>
									</td>
								</tr>
								<tr>
									<td colspan="2">
										
										<input type="submit" value="注      册" height="50px" id="register" />
									</td>
								</tr>
							</table>
						</div>
					</div>
				</form>
			</div>
			<div>
				<img src="../img/footer.jpg"  width="100%"/>
			</div>
			<div id="bottom">
				<a href="#" class="a_normal">关于我们</a>
				<a href="#" class="a_normal">联系我们</a>
				<a href="#" class="a_normal">招贤纳士</a>
				<a href="#" class="a_normal">法律声明</a>
				<a href="#" class="a_normal">友情链接</a>
				<a href="#" class="a_normal">支付方式</a>
				<a href="#" class="a_normal">配送方式</a>
				<a href="#" class="a_normal">服务声明</a>
				<a href="#" class="a_normal">广告声明</a>
				<p>
					Copyright © 2016-2017 指针商城 版权所有 
				</p>
			</div>
		</div>
	</body>
</html>

6、note

1.选择器 #id .class ele  :input :odd
2.$(function(){})
3.事件: $("#id").click(function(){})
4.属性操作
    html()
	text()
	val()
	addClass() removeClass
	css()
5.文档操作
	append()
	appendTo()
6.效果
    show() hide()
	fadeIn() fadeOut()
	slideDown() slideUp()
7.循环
	$.each(array, function(index, obj){})
	$(".class").each(function() {this})

8.validate插件
  $form.validate({ 
	  rules: {
		  要验证的字段: {
			 required: true,
			 minlength: 6
		  }
	  },
	  messages: {}
  })

  <label for="" class="error" 隐藏>
  
  
bootstrap 响应式布局 JQuery基础上
  栅格系统
	    1.row必须放在container 或者 container-fluid中
		2.col必须放在row中
		3.每一行 一共是12份
天 阳 在 线€
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap企业网站前端模板
洛阳泰山的博客
03-14 3514
介绍 企业网站前端模板 软件架构 前端所用技术html/css/js/jquery 前端框架bootstrap 安装教程 浏览器本地路径访问 发布到服务器比如（tomcat/nginx等） 云服务器/虚拟机 网站效果图 网站预览 点击预览 源码地址 https://gitee.com/taisan/company_website 技术交流&问题反馈 联系QQ:1334512682 微信号：vxhqqh  捐赠  ...
Bootstrap5 图标库 bootstrap-icons
09-30
Bootstrap5 图标库 bootstrap-icons
Bootstrap官网教程整理
02-03
从Bootstrap官网上原文复制粘贴，将其整理的 Bootstrap入门教学文档。 Bootstrap 简介 8 什么是 Bootstrap？ 8 历史 9 为什么使用 Bootstrap？ 9 Bootstrap 包的内容 9 Bootstrap 环境安装 11 下载 Bootstrap 11 文件结构 12 HTML 模板 12 实例 13 Bootstrap CSS 概览 15 HTML 5 文档类型（Doctype） 15 移动设备优先 15 响应式图像 16 全局显示、排版和链接 16 避免跨浏览器的不一致 18 容器（Container） 18 Bootstrap 网格系统 20 什么是网格（Grid）？ 20 什么是 Bootstrap 网格系统（Grid System）？ 20 Bootstrap 网格系统（Grid System）的工作原理 21 媒体查询 21 网格选项 22 响应式的列重置 23 偏移列 25 嵌套列 26 列排序 28 Bootstrap 排版 31 标题 31 引导主体副本 33 强调 34 缩写 35 地址（Address） 36 引用（Blockquote） 37 列表 38 Bootstrap 代码 41 实例 41 Bootstrap 表格 43 基本的表格 43 可选的表格类 44 上下文类 50 响应式表格 52 Bootstrap 表单 54 表单布局 54 支持的表单控件 58 静态控件 63 表单控件状态 64 表单控件大小 67 表单帮助文本 69 Bootstrap 按钮 71 按钮大小 72 按钮状态 74 按钮标签 77 Bootstrap 图像 79 Bootstrap 帮助器类 80 关闭图标 80 插入符 80 快速浮动 81 居中内容块 82 清除浮动 82 显示和隐藏内容 83 屏幕阅读器 84 Bootstrap 响应式实用工具 86 打印类 86 实例 86 Bootstrap 字形图标（Glyphicons） 89 什么是字形图标（Glyphicons）？ 89 获取字形图标（Glyphicons） 89 CSS 规则解释 89 用法 91 带有导航栏的字形图标（Glyphicons） 92 定制字形图标（Glyphicons） 93 Bootstrap 下拉菜单（Dropdowns） 95 选项 96 Bootstrap 按钮组 100 基本的按钮组 101 按钮工具栏 101 按钮的大小 102 嵌套 103 垂直的按钮组 104 Bootstrap 按钮下拉菜单 106 分割的按钮下拉菜单 107 按钮下拉菜单的大小 108 按钮上拉菜单 110 Bootstrap 输入框组 112 基本的输入框组 112 输入框组的大小 113 复选框和单选插件 115 按钮插件 116 带有下拉菜单的按钮 117 分割的下拉菜单按钮 119 Bootstrap 导航元素 121 表格导航或标签 121 胶囊式的导航菜单 122 两端对齐的导航 124 禁用链接 125 下拉菜单 126 Bootstrap 导航栏 130 默认的导航栏 130 响应式的导航栏 131 导航栏中的表单 133 导航栏中的按钮 134 导航栏中的文本 135 非导航链接 136 组件对齐方式 137 固定到顶部 139 固定到底部 140 静态的顶部 141 倒置的导航栏 143 路径导航 145 Bootstrap 分页 146 分页（Pagination） 146 翻页（Pager） 149 Bootstrap 标签 153 Bootstrap 徽章（Badges） 155 激活导航状态 155 Bootstrap 超大屏幕（Jumbotron） 158 Bootstrap 页面标题（Page Header） 161 Bootstrap 缩略图 162 添加自定义的内容 163 Bootstrap 警告（Alerts） 167 可取消的警告（Dismissal Alerts） 168 警告（Alerts）中的链接 170 Bootstrap 进度条 172 默认的进度条 172 交替的进度条 173 条纹的进度条 174 动画的进度条 175 堆叠的进度条 176 Bootstrap 多媒体对象（Media Object） 178 Bootstrap 列表组 184 向列表组添加徽章 185 向列表组添加链接 186 向列表组添加自定义内容 187 Bootstrap 面板（Panels） 190 面板标题 190 面板脚注 192 带语境色彩的面板 192 带表格的面板 194 带列表组的面板 196 Bootstrap Wells 198 尺寸大小 198 B
bootstrap-4.6.2
06-13
bootstrap4下载
bootstrap-sidenav:Bootstrap 官网风格侧边栏导航插件！
07-14
引导侧导航 Bootstrap 官网风格侧边栏导航插件！ 依赖 引导程序 3 CSS jQuery Bootstrap 3 词缀插件 Bootstrap 3 ScrollSpy 插件 如何使用 包含 CSS 样式 < link rel =" stylesheet " href =" bootstrap.min.css " > < link rel =" stylesheet " href =" sidenav.css " > 包括 JavaScript < script src =" jquery.min.js " > </ script > < script src =" bootstrap.min.js " > </ script > < script src =" sidenav.js " > </ script > 通过数据属性 < div id =" post "
Bootstrap Table的官网例子
09-27
本人因为项目开发的需要，需要用到一个表格插件。于是看上了Bootstrap Table，官网只是给了一个例子，于是我把官网的代码给爬下来。在基础上进行自己的修改。如果有兴趣可以下载来看看，代码个官网的是一模一样的。
bootstrap3.3.7的cdn引入地址
cxh20777的专栏
06-20 1750
您只需在页面中以相应 URL 引用它们即可使用 Bootstrap3.3.7。请注意，这里提供的是中国大陆地区的 CDN 地址，若您在其他地区可能会使用其他相应的 CDN 地址。另外，也建议您从官方网站提供的 CDN 中获取资源，以获取最新版本和最新的安全更新。
Bootstrap学习地址
HMing的博客
07-10 61
第一步：https://www.runoob.com/bootstrap/bootstrap-tutorial.html //菜鸟教程 第二步：https://v3.bootcss.com/getting-started/ Bootstrap官网进行整体深化学习 第三步：结束本门技术，仿照京东或者淘宝页面 ，手写一个以bootstrap技术为主的前端网站， ...
bootstrap入门
10-01 107
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid...
bootstrap搭建一个简单的官网案例附代码
最新发布
.
01-10 1019
bootstrap搭建一个简单的官网案例附代码
Bootstrap后台使用问题汇总（一）
weixin_30808575的博客
01-23 115
第一次自己汇总写博客啊，不懂规矩，大家包涵~~ 最近进行的项目中需要一个后台，于是在网上Down了许多Bootstrap后台源码。精挑细选决定用“ACE后台管理系统”（因为是中文的，英文三级狗的小鹿还能看懂）。 先来一个预览图： 使用过程中发现几个问题总结如下： 1.页面加载缓慢或者根本打不开。 疑惑很久，用编辑器打开看源码发现下面这句代码： ...
Bootstrap整体框架之CSS12栅格系统
11-30
12栅格系统是BootStrap的核心功能，也是响应式设计核心理念的一个实现方式。 1.1.1 实现原理 栅格布局原理：定义容器大小，平分12分，在调整内外边距，最后结合媒体查询，制作出强大响应式的栅格系统。 1.最外层的...
Bootstrap栅格系统使用方法及页面调整变形的解决方法
08-31
主要介绍了Bootstrap栅格系统使用方法及页面调整变形的解决方法,需要的朋友可以参考下
基于BootStrap与jQuery.validate实现表单提交校验功能
01-19
谈谈表单校验 这大概是一种惯例，学习前台后台最开始接触的业务都是用户注册和登录。现在社会坚持以人为本的理念，在网站开发过程同样如此。User是我们面对较多的对象，也是较核心的对象。最开始的用户注册和登陆...
bootstrap官方文档网址
weixin_42289273的博客
06-22 700
1. bootstrap3官方文档网址：https://v3.bootcss.com/components/
bootstrap参考网站总结
Chimengmeng的博客
07-06 212
bootstrap参考网站总结 【一】官方文档 总官网：https://www.bootcss.com/ Bootstrap v3：https://v3.bootcss.com/ 【二】图标样式 https://fontawesome.com.cn/ 【三】弹框样式 样式展示：http://lipis.github.io/bootstrap-sweetalert/ 文件地址：h...
bootstrap官方网址
02-17 469
bootstrap在4.3相对于4.0有很多css的类名进行了更换，具体请参考官方网址文档 https://getbootstrap.com/docs/4.3/components/input-group/
Bootstrap前端开发框架【使用教程】
DIUDIUjiang的博客
05-06 7392
Bootstrap 来自 Twitter(推特)，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 中文官网：http://www.bootcss.com/ 官网：http://getbootstrap.com/ 推荐使用：http://bootstrap.css88.com/ 框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框..
Bootstrap框架下载与使用
s17856147699的博客
02-14 1594
Bootstrap框架下载与使用
Bootstrap官网
05-04
Bootstrap官网是一个流行的前端开发框架，可以帮助开发人员快速构建现代化的响应式网站和应用程序。Bootstrap官网提供了一系列的HTML、CSS和JavaScript组件，包括表格、表单、导航、按钮、网格系统、响应式图像和多种UI组件等。开发人员可以根据自己的需求选择所需的组件，通过简单的调用和配置就可以快速构建出优美的页面。Bootstrap官网还提供了丰富的文档和示例，开发人员可以参考文档和示例来快速掌握如何使用Bootstrap框架。官网地址为https://getbootstrap.com/。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值