bootstrap

2023-12-16 22:09:21

一、概述

1.使用官方文档，看示例
2.复制
3.粘贴
4.简单修改风格

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。
Bootstrap 2 响应式框架
Bootstrap 3 移动优先，一套代码不仅可以在pc浏览器使用，还可以在手机，平板浏览网页

二、安装

本地安装


		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="css/bootstrap.min.css" >
	
	<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
	<link rel="stylesheet" href="css/bootstrap-theme.min.css" >
	
	
	<script src="js/jquery-3.4.1.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="js/bootstrap.min.js"></script>

网络安装

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	
	<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
	
	
	<script src="js/jquery-3.4.1.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

三、布局容器

以后所有的 bootstap 组件都要尽量放置在布局容器中
container 会在网页两边留有空白

<div class="container">
  
</div>

container-fluid 充满屏幕中间留白

<div class="container-fluid">
			 <div style="background-color: red;">
  				container-fluid   充满整个屏幕
  			</div>	
		</div>

四、栅格系统

在这里插入图片描述

栅格就是 bootstrap 将每一行分为12 格，每一行中的div 根据屏幕的配置 col-md-1 来决定占多少个格子
从而决定布局，如果一行中的
超过12 格，则多出的独占一行

<div class="container">
			
					<div class="row">
						
					<!--
						
						col-md-1 代表当前 div 在一行中占 一个格  当屏幕小于 992px 时 独占一格
						col-md-4  代表当前 div 在一行中占 四个格
					-->	
					  <div class="col-md-1 classboder">.col-md-1</div>
					  <div class="col-md-1 classboder">.col-md-1</div>
					  <div class="col-md-1">.col-md-1</div>
					  <div class="col-md-1">.col-md-1</div>
					  <div class="col-md-1">.col-md-1</div>
					  <div class="col-md-1">.col-md-1</div>
					  <div class="col-md-1">.col-md-1</div>
					  <div class="col-md-1">.col-md-1</div>
					  <div class="col-md-1">.col-md-1</div>
					  <div class="col-md-1">.col-md-1</div>
					  <div class="col-md-1 classboder">.col-md-1</div>
					  <div class="col-md-1 classboder">.col-md-1</div>
					</div>
					<div class="row">
					  <div class="col-md-8 classboder">.col-md-8</div>
					  <div class="col-md-4 classboder">.col-md-4</div>
					</div>
					<div class="row">
					  <div class="col-md-4 classboder">.col-md-4</div>
					  <div class="col-md-4 classboder">.col-md-4</div>
					  <div class="col-md-4 classboder">.col-md-4</div>
					</div>
					<div class="row">
					  <div class="col-md-6 classboder">.col-md-6</div>
					  <div class="col-md-6 classboder">.col-md-6</div>
					</div>
		
			
		</div>
		
		
		<h1>*****************</h1>
		<div class="container">
			<!-- Stack the columns on mobile by making one full-width and the other half-width -->
			<div class="row">
			  <div class="col-xs-6 col-md-8 classboder">.col-xs-6 .col-md-8</div>
			  <div class="col-xs-6 col-md-4 classboder">.col-xs-6 .col-md-4</div>
			</div>
			
			<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
			<div class="row">
			  <div class="col-xs-6 col-md-4 classboder">.col-xs-6 .col-md-4</div>
			  <div class="col-xs-6 col-md-4 classboder">.col-xs-6 .col-md-4</div>
			  <div class="col-xs-6 col-md-4 classboder">.col-xs-6 .col-md-4</div>
			</div>
			
			<!-- Columns are always 50% wide, on mobile and desktop -->
			<div class="row">
			  <div class="col-xs-6 classboder">.col-xs-6</div>
			  <div class="col-xs-6 classboder">.col-xs-6</div>
			</div>
			
		</div>

五、排版

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		



		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="css/bootstrap.min.css" >
	
	<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
	<link rel="stylesheet" href="css/bootstrap-theme.min.css" >
	
	
	<script src="js/jquery-3.4.1.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="js/bootstrap.min.js"></script>

	<style>
		
		.classboder{
			border: solid 2px red;
		}
		
	</style>
	</head>
	<body>
		
		<div class="container">
  
  			
  			<h1>h1. Bootstrap heading</h1>
			<h2>h2. Bootstrap heading</h2>
  			
  
  			<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>	
		
				
				<p class="text-left">Left aligned text.</p>
				<p class="text-center">Center aligned text.</p>
				<p class="text-right">Right aligned text.</p>
		</div>
		
	</body>
</html>

六、表格

<div class="container">
  
  <!--
  	table-striped 条纹
  	table-bordered 边框
  	table-hover 鼠标悬停
  -->
  		<table class="table table-striped table-bordered table-hover">
		   		<tr>
		   			<td>name</td>
		   			<td>age</td>
		   			<td>sex</td>
		   			<td>info</td>
		   		</tr>
		   		<tr class="success">
		   			<td>小明</td>
		   			<td>18</td>
		   			<td>男</td>
		   			<td>hello world</td>
		   		</tr>
		   		<tr>
		   			<td>小明</td>
		   			<td>18</td>
		   			<td>男</td>
		   			<td>hello world</td>
		   		</tr>
		   		<tr class="success">
		   			<td>小明</td>
		   			<td>18</td>
		   			<td>男</td>
		   			<td>hello world</td>
		   		</tr>
		   		<tr>
		   			<td>小明</td>
		   			<td>18</td>
		   			<td>男</td>
		   			<td>hello world</td>
		   		</tr>
		</table>
		</div>

七、表单

<div class="container">
 			
 			<form>
			  <div class="form-group">
			    <label for="exampleInputEmail1">Email address</label>
			    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
			  </div>
			  <div class="form-group">
			    <label for="exampleInputPassword1">Password</label>
			    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
			  </div>
			  
			  <div class="form-group">
			    <label for="username">username</label>
			    <input type="text" class="form-control" id="username" placeholder="username">
			  </div>
			 
			  <button type="submit" class="btn btn-default">Submit</button>
			</form>
		</div>

按钮

<div class="container">
 			
 			<button > 按钮1</button>
 			<button class="btn btn-default" > bootsrap 默认按钮</button>
 			
 			<button type="button" class="btn btn-danger">（危险）Danger</button>
 			
 			
 			<button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
		
		</div>

<h1>图片形状</h1>
		<div class="container">
			
			
			<img src="img/1.jpg" alt="..." class="img-rounded">
			<img src="img/1.jpg" alt="..." class="img-circle">
			<!--
				
				alt= 当图片无法加载时  有提示信息
			-->
			<img src="img/2.jpg" alt="这是一张图片" class="img-thumbnail">
			
			<img src="img/a.gif" alt="..." class="img-circle">
		</div>

导航栏

<div class="container">
 			
 			<ul class="nav nav-tabs">
			    <li role="presentation" class="active"><a href="#h5" data-toggle="tab">Html5</a></li>
			    <li role="presentation"><a href="#java" data-toggle="tab">JAVA</a></li>
			    <li role="presentation"><a href="#android" data-toggle="tab">Android</a></li>
			</ul>
			
			<div id="myTabContent" class="tab-content">
			    <div class="tab-pane fade in active" id="h5">
			        <p>Html5最近比较火</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>
 		</div>

分页

为您的网站或应用提供带有展示页码的分页组件，或者可以使用简单的分页组件。


		<div class="container">
 			
 			
 			<h1>分页</h1>
 			<div class="row">
 			
 				<nav aria-label="Page navigation">
				  <ul id="ul1" class="pagination">
				    <li id="li1">
				      <a id="prePage" href="#" aria-label="Previous">
				        <span aria-hidden="true">&laquo;</span>
				      </a>
				    </li>
				   
				   
				  </ul>
				</nav>	
 			
 			
 				
 			</div>
 			
 		</div>
 		
 		<script>
 			
 			$("#prePage").attr("href","http://www.baidu.com");
 			
 			
 			for(var i=1;i<10;i++){
 				$("#ul1").append('<li><a href="#">'+i+'</a></li>');
 			}
 		
 		var str = '<li><ahref="#"aria-label="Next"><spanaria-hidden="true">&raquo;</span></a></li>';
 		
 			$("#ul1").append(str);
 			
 		</script>

缩略图

<h1>缩略图</h1>
 			
 			<div class="row">
			  <div class="col-xs-6 col-md-3">
			    <a href="#" class="thumbnail">
			      <img src="img/1.jpg" alt="...">
			    </a>
			  </div>
			    <div class="col-xs-6 col-md-3">
			    <a href="#" class="thumbnail">
			      <img src="img/1.jpg" alt="...">
			    </a>
			  </div>
			   <div class="col-xs-6 col-md-3">
			    <a href="#" class="thumbnail">
			      <img src="img/1.jpg" alt="...">
			    </a>
			  </div>
			   <div class="col-xs-6 col-md-3">
			    <a href="#" class="thumbnail">
			      <img src="img/1.jpg" alt="...">
			    </a>
			  </div>
			</div>
 			
 		</div>

模态框

<div class="container">
 			
			 				<!-- Button trigger modal -->
			<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" 
				data-target="#myModal">
			  Launch demo modal
			</button>
			
			<!-- Modal
				
				以下div 就是模态框 布局
				class="modal fade"  当前div 是模态框 ，不显示，隐藏状态，不占据空间
			-->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			  <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="myModalLabel">Modal title</h4>
			      </div>
			      <div class="modal-body">
			        	<form id="form1">
						  <div class="form-group">
						    <label for="exampleInputEmail1">Email address</label>
						    <input type="email" class="form-control" id="exampleInputEmail1" name="exampleInputEmail1" placeholder="Email">
						  </div>
						  <div class="form-group">
						    <label for="exampleInputPassword1">Password</label>
						    <input type="password" class="form-control" id="exampleInputPassword1" name="exampleInputPassword1" placeholder="Password">
						  </div>
						  
						  <div class="form-group">
						    <label for="username">username</label>
						    <input type="text" class="form-control" id="username" placeholder="username" name="username">
						  </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" onclick="save()">保存</button>
			      </div>
			    </div>
			  </div>
			</div>
 			
 		</div>
 		
 		<script>
 			
 			function save(){
 				
 				
 				var formdata = $("#form1").serialize();
 				alert("formdata:"+formdata);
 				
 				
 				// 模拟使用 ajax 提交 到servler
 				
 				//关闭模态框 hide 关闭  show 代表打开
 				$('#myModal').modal('hide');
 				
 				
 				
 				
 			}
 		</script>

轮播图

1.展示图片
2.定时切换
3.点击事件

		  <!-- Wrapper for slides -->
		  <div class="carousel-inner" role="listbox">
		    <div class="item active">
		      <img src="https://imgcps.jd.com/img-cubic/creative_server_cia/v1/FocusFullshop/CkJqZnMvdDEvMTA2NTI1LzUvMjk3NC80MDkxNjQvNWRkOTAzYWVFMDllODcyZmEvYzJjOGYxMDJiZTk0OTFkYS5wbmcSCTMtdHlfMF81NDACOO6LekIQCgzku7Dpn7bnmb3phZIQAEIQCgznlYXkuqvkvJjlk4EQAUIQCgznq4vljbPmiqLotK0QAkIKCgbnp43ojYkQBw/cr/s/q.jpg" alt="...">
		      <div class="carousel-caption">
		        ...
		      </div>
		    </div>
		     <div class="item">
			      <img src="https://imgcps.jd.com/img-cubic/creative_server_cia/v1/FocusFullshop/CkNqZnMvdDEvMTM2NzAwLzE4LzEyMzY4Lzg0NDkxLzVmODZiZmU3RWQ1YjcyZTdiL2I2MzM2MTdjNTBmY2FhYTMuanBnEgo5OTktdHlfMF8xMAE47ot6/cr/s/q.jpg" alt="...">
			      <div class="carousel-caption">
			       
			      </div>
			</div>
			
			<div class="item">
			      <img src="https://imgcps.jd.com/img-cubic/creative_server_cia/v1/FocusFullshop/CkNqZnMvdDEvMTM2NzAwLzE4LzEyMzY4Lzg0NDkxLzVmODZiZmU3RWQ1YjcyZTdiL2I2MzM2MTdjNTBmY2FhYTMuanBnEgo5OTktdHlfMF8xMAE47ot6/cr/s/q.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>

码农公寓

一、概述

二、安装

本地安装

网络安装

三、布局容器

四、栅格系统

五、排版

六、表格

七、表单

按钮

导航栏

分页

缩略图

模态框

轮播图

相关文章