BootStrap文档

Bertha 。 2023-10-12 14:09 15阅读 0赞

## Bootstrap概念 ##

1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。

框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。

好处：

1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。

2. 响应式布局。

同一套页面可以兼容不同分辨率的设备。 例如：[http://m.taobao.com][http_m.taobao.com] https://www.apple.com/

https://www.bootcss.com 官网

![在这里插入图片描述][589f36ef4b4c4175bc6da05f7d83e49e.jpeg_pic_center]

### 快速入门 ###

### 下载Bootstrap ###

![img][]

### 在项目中将这三个文件夹复制 ###

![在这里插入图片描述][ea8e4f37efcb4f928056b12dca226cd7.png_pic_center]![在这里插入图片描述][b8bfa5b1a39d42e0acb1d5b83cc58046.png_pic_center]

min压缩版，上线之后一般用的压缩版

![在这里插入图片描述][6ffa180125854f9db75f9fc025feabad.jpeg_pic_center]

### 引入资源文件 ###

手动引入jquery-3.2.1.min.js

根据参考文档找到基本模版 注意：引入文件的顺序问题

## 响应式布局 ##

同一套页面可以兼容不同分辨率的设备。

实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子

![在这里插入图片描述][d5a2217400fd4d7b9b4ee7eab8ca3b6b.jpeg_pic_center]

### 栅格系统： ###

1.  定义容器。相当于之前的table、

容器分类：

1. container ：两边留白  
![在这里插入图片描述][73212e049027453f92edc9ab130d25be.jpeg_pic_center]

2. container-fluid：每一种设备都是100%宽度  
![在这里插入图片描述][50407f5804324a4b8abf7a17f4a3b064.jpeg_pic_center]

1.  定义行。相当于之前的tr 样式：row
2.  定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目

设备代号：

1. xs：超小屏幕 手机 (<768px)：col-xs-12

2. sm：小屏幕 平板 (≥768px)

3. md：中等屏幕 桌面显示器 (≥992px)

4. lg：大屏幕 大桌面显示器 (≥1200px)

![在这里插入图片描述][3d056af1b5ba44f7839f6de26633b57f.jpeg_pic_center]

注意：

1.  container留白
2.  一行中如果格子数目超过12，则超出部分自动换行。
3.  栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。.col-xs –>向上兼容

![在这里插入图片描述][c354aa9b1b62459886d2f49dea3da79d.jpeg_pic_center]

4. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，缩小会一个元素沾满一整行。

### 列偏移 ###

## CSS样式和JS插件 ##

![在这里插入图片描述][cb8bb22c5f3d491980f1b58cf3c5ede7.jpeg_pic_center]

### 按钮 ###

按钮：class=“btn btn-default”

### 图片 ###

class=“img-responsive”：图片在任意尺寸都占100%

图片形状

<img src="..." alt="..." class="img-rounded">：方形
    
    <img src="..." alt="..." class="img-circle"> ： 圆形
    
    <img src="..." alt="..." class="img-thumbnail"> ：相框

### 表格 ###

table 表格

table-bordered 边框

table-hover 鼠标悬停

![在这里插入图片描述][b70faf0c826f4529aa2f3d16a0b82abe.jpeg_pic_center]

### 表单 ###

给表单项添加：class=“form-control”

![在这里插入图片描述][7cb4ef8ace5b402a95afb71d143b51d8.jpeg_pic_center]

<!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">
        
        <title>Bootstrap 101 Template</title>
        
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    <style>
        .form-control{
          
            width: 400px;
        }
    </style>
    
    </head>
    <body>
    <form class="form-horizontal">
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> Remember me
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">Sign in</button>
            </div>
        </div>
    </form>
    </body>
    </html>

## 组件 ##

![在这里插入图片描述][89ea5a36af6f4750b45e15a42dbcc61f.jpeg_pic_center]

### 导航条 ###

![在这里插入图片描述][897ca0d3cd384f2bb507c37352f6d3ae.jpeg_pic_center]![在这里插入图片描述][7fca83cf7e45449580659b16d5e9f92c.jpeg_pic_center]

### 分页条 ###

![img][]

禁用和激活状态

链接在不同情况下可以定制。你可以给不能点击的链接添加 .disabled 类、给当前页添加 .active 类。

## 插件 ##

### 轮播图 ###

![在这里插入图片描述][77f58a26290d4ed284146ffe38ff8d1b.jpeg_pic_center]  
![在这里插入图片描述][eb12e2b3af0f48298874450964af0ed0.jpeg_pic_center]

<!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">
        
        <title>Bootstrap 101 Template</title>
        
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        
        <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>
    
        
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="img/banner_1.jpg" alt="...">
                <div class="carousel-caption">
                    图片的内容
                </div>
            </div>
            <div class="item">
                <img src="img/banner_2.jpg" alt="...">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
            <div class="item">
                <img src="img/banner_3.jpg" alt="...">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
            ...
        </div>
    
        
        <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>

## 网站案例 ##

### 头部 ###

<header>
    		  
    		  <div class="row">
    			  <img src="img/top_banner.jpg" class="img-responsive"/>
    		  </div>
    		  
    		  
    		  <div class="row paddingTop">
    			  
    			  <div class="col-md-4">
    					<img src="img/logo.jpg" />
    			  </div>
    			  <div class="col-md-4">
    					<form class="form-inline search-input">
    						<input autocomplete="off" type="text" class="form-control" name="name" placeholder="请输入你要查找的路线" />
    						<a href="" class="btn btn-success">搜索</a>
    					</form>
    			  </div> 
    			  <div class="col-md-4 search-input">
    				  <a href="img/erweima.png">
    					<img src="img/erweima.png" width="40px" />  
    				  </a>
    			  </div>
    			  
    		  </div>
    		  
    		  
    		  <div class="row paddingTop">
    			  <nav class="navbar navbar-default">
    				  <div class="container-fluid">
    					  
    					  <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>
      
    					  
    					  <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>
    							  <li><a href="#">自驾游</a></li>
    							  <li><a href="#">出境游</a></li>
    							  <li><a href="#">环球游</a></li>
    							  <li><a href="#">三亚游</a></li>
    							  <li class="dropdown">
    								  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多<span class="caret"></span></a>
    								  <ul class="dropdown-menu">
    									  <li><a href="#">郑科院游</a></li>
    									  <li><a href="#">二七游</a></li>
    									  <li><a href="#">植物园游</a></li>
    									  <li role="separator" class="divider"></li>
    									  <li><a href="#">奥体中心游</a></li>
    									  <li role="separator" class="divider"></li>
    									  <li><a href="#">健康路夜游</a></li>
    								  </ul>
    							  </li>
      
    						  </ul>
      
    					  </div>
    				  </div>
    			  </nav>
    			  
    		  </div>
    		  
    		  
    		  <div class="row">
    			  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    			    
    			    <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>
    			  
    			    
    			    <div class="carousel-inner" role="listbox">
    			      <div class="item active">
    			        <img src="img/banner_1.jpg" alt="...">
    			        <div class="carousel-caption">
    			        </div>
    			      </div>
    			      <div class="item">
    			        <img src="img/banner_2.jpg" alt="...">
    			        <div class="carousel-caption">
    			        </div>
    			      </div>
    				  <div class="item">
    				    <img src="img/banner_3.jpg" alt="...">
    				    <div class="carousel-caption">
    				    </div>
    				  </div>
    			    </div>
    			  
    			    
    			    <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>
    		  
    		  
    	  </header>

### 主体 ###

<div class="container">
    		  
    		  <div class="paddingTop jx_top">
    			 <img src="img/icon_5.jpg" >  国内精选 
    		  </div>
    		  
    		  <div class="row paddingTop">
    			  <div class="col-md-3">
    				<div class="thumbnail">
    					<img src="img/jiangxuan_1.jpg" />
    					<p>这里质朴，这里惊艳，这里远离凡尘，这里是藏传佛教的圣地，这里是自驾游的天堂，这里就是甘南。</p>
    					<p style="color: red;">¥888</p>
    				</div>
    			  </div>
    			  <div class="col-md-3">
    				  <div class="thumbnail">
    				  	<img src="img/jiangxuan_1.jpg" />
    				  	<p>这里质朴，这里惊艳，这里远离凡尘，这里是藏传佛教的圣地，这里是自驾游的天堂，这里就是甘南。</p>
    					<p style="color: red;">¥888</p>
    				  </div>
    			  </div>
    			  <div class="col-md-3">
    				  <div class="thumbnail">
    				  	<img src="img/jiangxuan_1.jpg" />
    				  	<p>这里质朴，这里惊艳，这里远离凡尘，这里是藏传佛教的圣地，这里是自驾游的天堂，这里就是甘南。</p>
    					<p style="color: red;">¥888</p>
    				  </div>
    			  </div>	  
    			  <div class="col-md-3">
    				  <div class="thumbnail">
    				  	<img src="img/jiangxuan_1.jpg" />
    				  	<p>这里质朴，这里惊艳，这里远离凡尘，这里是藏传佛教的圣地，这里是自驾游的天堂，这里就是甘南。</p>
    					<p style="color: red;">¥888</p>
    				  </div>
    			  </div>
    		  </div>
    		  
    		  <div class="paddingTop jx_top">
    		  		<img src="img/icon_5.jpg" >  国外精选 
    		  </div>
    		  
    		  <div class="row paddingTop">
    			  <div class="col-md-4 thumbnail" >
    				  <img src="img/guonei_1.jpg"  />
    			  </div>
    			  <div class="col-md-8">
    				  
    				  <div class="row">
    					  <div class="col-md-4">
    						  <div class="thumbnail">
    						  	<img src="img/jiangxuan_1.jpg" />
    						  	<p>这里质朴，这里惊艳，这里远离凡尘，这里是藏传佛教的圣地，这里是自驾游的天堂，这里就是甘南。</p>
    						  					<p style="color: red;">¥888</p>
    						  </div>
    					  </div>
    					  <div class="col-md-4">
    						  <div class="thumbnail">
    						  	<img src="img/jiangxuan_1.jpg" />
    						  	<p>这里质朴，这里惊艳，这里远离凡尘，这里是藏传佛教的圣地，这里是自驾游的天堂，这里就是甘南。</p>
    						  					<p style="color: red;">¥888</p>
    						  </div>
    					  </div>
    					  <div class="col-md-4">
    						  <div class="thumbnail">
    						  	<img src="img/jiangxuan_1.jpg" />
    						  	<p>这里质朴，这里惊艳，这里远离凡尘，这里是藏传佛教的圣地，这里是自驾游的天堂，这里就是甘南。</p>
    						  					<p style="color: red;">¥888</p>
    						  </div>
    					  </div>
    				  </div>
    				  <div class="row">
    					  <div class="col-md-4">
    						  <div class="thumbnail">
    						  	<img src="img/jiangxuan_1.jpg" />
    						  	<p>这里质朴，这里惊艳，这里远离凡尘，这里是藏传佛教的圣地，这里是自驾游的天堂，这里就是甘南。</p>
    						  					<p style="color: red;">¥888</p>
    						  </div>
    					  </div>
    					  <div class="col-md-4">
    						  <div class="thumbnail">
    						  	<img src="img/jiangxuan_1.jpg" />
    						  	<p>这里质朴，这里惊艳，这里远离凡尘，这里是藏传佛教的圣地，这里是自驾游的天堂，这里就是甘南。</p>
    						  					<p style="color: red;">¥888</p>
    						  </div>
    					  </div>
    					  <div class="col-md-4">
    						  <div class="thumbnail">
    						  	<img src="img/jiangxuan_1.jpg" />
    						  	<p>这里质朴，这里惊艳，这里远离凡尘，这里是藏传佛教的圣地，这里是自驾游的天堂，这里就是甘南。</p>
    						  					<p style="color: red;">¥888</p>
    						  </div>
    					  </div>
    				  </div>
    			  </div>
    		  </div>
    	  </div>

### 尾部 ###

<footer>
    		  
    		  <div class="row">
    			  <img src="img/footer_service.png" class="img-responsive"/>
    		  </div>
    		  
    		  <div class="row copyrigth">
    			  YANQI股份有限公司 版权所有Copyright 2021-2022, All Rights Reserved 豫ICP备16007882
    		  </div>
    	  </footer>

### 全部代码 ###

<!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">
        
        <title>Bootstrap 101 Template</title>
        
        <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css" >
    	<style>
    		/* 搜索框大小 */
    		header .row .col-md-4 input{
          
    			width: 300px;
    			border: 2px solid #00BF67;
    		}
    		
    		.search-input{
          
    			padding-top: 15px;
    		}
    		
    		/* 第三行li大小 */
    		div ul li{
          
    			width: 130px;
    			text-align: center;
    		}
    		
    		.paddingTop{
          
    			padding-top: 5px;
    		}
    		
    		.jx_top{
          
    			border: 2px solid;
    			border-color: white white #00BF67 white;
    		}
    		.copyrigth{
          
    			height: 40px;
    			background-color: #3C3C3C;
    			color: white;
    			text-align: center;
    			line-height: 40px;
    			font-size: 10px;
    		}
    	</style>
      </head>
      <body>
    	  
    	  
    	  <header>
    		  
    		  <div class="row">
    			  <img src="img/top_banner.jpg" class="img-responsive"/>
    		  </div>
    		  
    		  
    		  <div class="row paddingTop">
    			  
    			  <div class="col-md-4">
    					<img src="img/logo.jpg" />
    			  </div>
    			  <div class="col-md-4">
    					<form class="form-inline search-input">
    						<input autocomplete="off" type="text" class="form-control" name="name" placeholder="请输入你要查找的路线" />
    						<a href="" class="btn btn-success">搜索</a>
    					</form>
    			  </div> 
    			  <div class="col-md-4 search-input">
    				  <a href="img/erweima.png">
    					<img src="img/erweima.png" width="40px" />  
    				  </a>
    			  </div>
    			  
    		  </div>
    		  
    		  
    		  <div class="row paddingTop">
    			  <nav class="navbar navbar-default">
    				  <div class="container-fluid">
    					  
    					  <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>
      
    					  
    					  <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>
    							  <li><a href="#">自驾游</a></li>
    							  <li><a href="#">出境游</a></li>
    							  <li><a href="#">环球游</a></li>
    							  <li><a href="#">三亚游</a></li>
    							  <li class="dropdown">
    								  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多<span class="caret"></span></a>
    								  <ul class="dropdown-menu">
    									  <li><a href="#">郑科院游</a></li>
    									  <li><a href="#">二七游</a></li>
    									  <li><a href="#">植物园游</a></li>
    									  <li role="separator" class="divider"></li>
    									  <li><a href="#">奥体中心游</a></li>
    									  <li role="separator" class="divider"></li>
    									  <li><a href="#">健康路夜游</a></li>
    								  </ul>
    							  </li>
      
    						  </ul>
      
    					  </div>
    				  </div>
    			  </nav>
    			  
    		  </div>
    		  
    		  
    		  <div class="row">
    			  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    			    
    			    <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>
    			  
    			    
    			    <div class="carousel-inner" role="listbox">
    			      <div class="item active">
    			        <img src="img/banner_1.jpg" alt="...">
    			        <div class="carousel-caption">
    			        </div>
    			      </div>
    			      <div class="item">
    			        <img src="img/banner_2.jpg" alt="...">
    			        <div class="carousel-caption">
    			        </div>
    			      </div>
    				  <div class="item">
    				    <img src="img/banner_3.jpg" alt="...">
    				    <div class="carousel-caption">
    				    </div>
    				  </div>
    			    </div>
    			  
    			    
    			    <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>
    		  
    		  
    	  </header>
    	  
    	  
    	  <div class="container">
    		  
    		  <div class="paddingTop jx_top">
    			 <img src="img/icon_5.jpg" >  国内精选 
    		  </div>
    		  
    		  <div class="row paddingTop">
    			  <div class="col-md-3">
    				<div class="thumbnail">
    					<img src="img/jiangxuan_1.jpg" />
    					<p>这里质朴，这里惊艳，这里远离凡尘，这里是藏传佛教的圣地，这里是自驾游的天堂，这里就是甘南。</p>
    					<p style="color: red;">¥888</p>
    				</div>
    			  </div>
    			  <div class="col-md-3">
    				  <div class="thumbnail">
    				  	<img src="img/jiangxuan_1.jpg" />
    				  	<p>这里质朴，这里惊艳，这里远离凡尘，这里是藏传佛教的圣地，这里是自驾游的天堂，这里就是甘南。</p>
    					<p style="color: red;">¥888</p>
    				  </div>
    			  </div>
    			  <div class="col-md-3">
    				  <div class="thumbnail">
    				  	<img src="img/jiangxuan_1.jpg" />
    				  	<p>这里质朴，这里惊艳，这里远离凡尘，这里是藏传佛教的圣地，这里是自驾游的天堂，这里就是甘南。</p>
    					<p style="color: red;">¥888</p>
    				  </div>
    			  </div>	  
    			  <div class="col-md-3">
    				  <div class="thumbnail">
    				  	<img src="img/jiangxuan_1.jpg" />
    				  	<p>这里质朴，这里惊艳，这里远离凡尘，这里是藏传佛教的圣地，这里是自驾游的天堂，这里就是甘南。</p>
    					<p style="color: red;">¥888</p>
    				  </div>
    			  </div>
    		  </div>
    		  
    		  <div class="paddingTop jx_top">
    		  		<img src="img/icon_5.jpg" >  国外精选 
    		  </div>
    		  
    		  <div class="row paddingTop">
    			  <div class="col-md-4 thumbnail" >
    				  <img src="img/guonei_1.jpg"  />
    			  </div>
    			  <div class="col-md-8">
    				  
    				  <div class="row">
    					  <div class="col-md-4">
    						  <div class="thumbnail">
    						  	<img src="img/jiangxuan_1.jpg" />
    						  	<p>这里质朴，这里惊艳，这里远离凡尘，这里是藏传佛教的圣地，这里是自驾游的天堂，这里就是甘南。</p>
    						  					<p style="color: red;">¥888</p>
    						  </div>
    					  </div>
    					  <div class="col-md-4">
    						  <div class="thumbnail">
    						  	<img src="img/jiangxuan_1.jpg" />
    						  	<p>这里质朴，这里惊艳，这里远离凡尘，这里是藏传佛教的圣地，这里是自驾游的天堂，这里就是甘南。</p>
    						  					<p style="color: red;">¥888</p>
    						  </div>
    					  </div>
    					  <div class="col-md-4">
    						  <div class="thumbnail">
    						  	<img src="img/jiangxuan_1.jpg" />
    						  	<p>这里质朴，这里惊艳，这里远离凡尘，这里是藏传佛教的圣地，这里是自驾游的天堂，这里就是甘南。</p>
    						  					<p style="color: red;">¥888</p>
    						  </div>
    					  </div>
    				  </div>
    				  <div class="row">
    					  <div class="col-md-4">
    						  <div class="thumbnail">
    						  	<img src="img/jiangxuan_1.jpg" />
    						  	<p>这里质朴，这里惊艳，这里远离凡尘，这里是藏传佛教的圣地，这里是自驾游的天堂，这里就是甘南。</p>
    						  					<p style="color: red;">¥888</p>
    						  </div>
    					  </div>
    					  <div class="col-md-4">
    						  <div class="thumbnail">
    						  	<img src="img/jiangxuan_1.jpg" />
    						  	<p>这里质朴，这里惊艳，这里远离凡尘，这里是藏传佛教的圣地，这里是自驾游的天堂，这里就是甘南。</p>
    						  					<p style="color: red;">¥888</p>
    						  </div>
    					  </div>
    					  <div class="col-md-4">
    						  <div class="thumbnail">
    						  	<img src="img/jiangxuan_1.jpg" />
    						  	<p>这里质朴，这里惊艳，这里远离凡尘，这里是藏传佛教的圣地，这里是自驾游的天堂，这里就是甘南。</p>
    						  					<p style="color: red;">¥888</p>
    						  </div>
    					  </div>
    				  </div>
    			  </div>
    		  </div>
    	  </div>
    	  
    	  
    	  <footer>
    		  
    		  <div class="row">
    			  <img src="img/footer_service.png" class="img-responsive"/>
    		  </div>
    		  
    		  <div class="row copyrigth">
    			  YANQI股份有限公司 版权所有Copyright 2021-2022, All Rights Reserved 豫ICP备16007882
    		  </div>
    	  </footer>
    	  
    	
    
      </body>
        <script src="js/jquery-3.4.1.js"></script>
        <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    </html>

![img][]

这里质朴，这里惊艳，这里远离凡尘，这里是藏传佛教的圣地，这里是自驾游的天堂，这里就是甘南。

¥888

![img][]

这里质朴，这里惊艳，这里远离凡尘，这里是藏传佛教的圣地，这里是自驾游的天堂，这里就是甘南。

¥888

![img][]

这里质朴，这里惊艳，这里远离凡尘，这里是藏传佛教的圣地，这里是自驾游的天堂，这里就是甘南。

¥888

<footer>
    	  
    	  <div class="row">
    		  <img src="img/footer_service.png" class="img-responsive"/>
    	  </div>
    	  
    	  <div class="row copyrigth">
    		  YANQI股份有限公司 版权所有Copyright 2021-2022, All Rights Reserved 豫ICP备16007882
    	  </div>
      </footer>

\`\`\` 618，清华社 IT BOOK 多得图书活动开始啦！活动时间为 2023 年 6 月 7 日至 6 月 18 日，清华 社为您精选多款高分好书，涵盖了 C++、Java、Python、前端、后端、数据库、算法与机器学习等多 个 IT 开发领域，适合不同层次的读者。全场 5 折，扫码领券更有优惠哦！快来京东点击链接 IT BOOK 多得（或扫描京东二维码）查看详情吧！ ———————————————— !\[在这里插入图片描述\](https://img-blog.csdnimg.cn/9f935a35a1904e6292cb2acd34180504.png)

[http_m.taobao.com]: http://m.taobao.com/
[589f36ef4b4c4175bc6da05f7d83e49e.jpeg_pic_center]: https://img-blog.csdnimg.cn/589f36ef4b4c4175bc6da05f7d83e49e.jpeg#pic_center
[img]: 
[ea8e4f37efcb4f928056b12dca226cd7.png_pic_center]: https://img-blog.csdnimg.cn/ea8e4f37efcb4f928056b12dca226cd7.png#pic_center
[b8bfa5b1a39d42e0acb1d5b83cc58046.png_pic_center]: https://img-blog.csdnimg.cn/b8bfa5b1a39d42e0acb1d5b83cc58046.png#pic_center
[6ffa180125854f9db75f9fc025feabad.jpeg_pic_center]: https://img-blog.csdnimg.cn/6ffa180125854f9db75f9fc025feabad.jpeg#pic_center
[d5a2217400fd4d7b9b4ee7eab8ca3b6b.jpeg_pic_center]: https://img-blog.csdnimg.cn/d5a2217400fd4d7b9b4ee7eab8ca3b6b.jpeg#pic_center
[73212e049027453f92edc9ab130d25be.jpeg_pic_center]: https://img-blog.csdnimg.cn/73212e049027453f92edc9ab130d25be.jpeg#pic_center
[50407f5804324a4b8abf7a17f4a3b064.jpeg_pic_center]: https://img-blog.csdnimg.cn/50407f5804324a4b8abf7a17f4a3b064.jpeg#pic_center
[3d056af1b5ba44f7839f6de26633b57f.jpeg_pic_center]: https://img-blog.csdnimg.cn/3d056af1b5ba44f7839f6de26633b57f.jpeg#pic_center
[c354aa9b1b62459886d2f49dea3da79d.jpeg_pic_center]: https://img-blog.csdnimg.cn/c354aa9b1b62459886d2f49dea3da79d.jpeg#pic_center
[cb8bb22c5f3d491980f1b58cf3c5ede7.jpeg_pic_center]: https://img-blog.csdnimg.cn/cb8bb22c5f3d491980f1b58cf3c5ede7.jpeg#pic_center
[b70faf0c826f4529aa2f3d16a0b82abe.jpeg_pic_center]: https://img-blog.csdnimg.cn/b70faf0c826f4529aa2f3d16a0b82abe.jpeg#pic_center
[7cb4ef8ace5b402a95afb71d143b51d8.jpeg_pic_center]: https://img-blog.csdnimg.cn/7cb4ef8ace5b402a95afb71d143b51d8.jpeg#pic_center
[89ea5a36af6f4750b45e15a42dbcc61f.jpeg_pic_center]: https://img-blog.csdnimg.cn/89ea5a36af6f4750b45e15a42dbcc61f.jpeg#pic_center
[897ca0d3cd384f2bb507c37352f6d3ae.jpeg_pic_center]: https://img-blog.csdnimg.cn/897ca0d3cd384f2bb507c37352f6d3ae.jpeg#pic_center
[7fca83cf7e45449580659b16d5e9f92c.jpeg_pic_center]: https://img-blog.csdnimg.cn/7fca83cf7e45449580659b16d5e9f92c.jpeg#pic_center
[77f58a26290d4ed284146ffe38ff8d1b.jpeg_pic_center]: https://img-blog.csdnimg.cn/77f58a26290d4ed284146ffe38ff8d1b.jpeg#pic_center
[eb12e2b3af0f48298874450964af0ed0.jpeg_pic_center]: https://img-blog.csdnimg.cn/eb12e2b3af0f48298874450964af0ed0.jpeg#pic_center