• Bootstrap实例（四）

    目录： 

    （1）bootstrtap实例（轮廓）

    （2）bootstrap三列布局

    （3）bootstrap（标签页）

     （4）bootstrap（end）

    （1）bootstrtap实例（轮廓）

    点击JavaScra组件

     选择Carousel

    先给导航条固定在顶部：

    复制代码：

    复制到上面的代码页面中：

     这是下方的小圆点：

     图片：

     

     修改img的样式、附加轮廓div：的样式

    轮播属性： 

     在div中加属性：data-interval="1000" 修改轮播速度

     当鼠标移上不停止：默认是鼠标移动上去会停止

     

     data-wrap="true"：当轮播玩重新开始

    还可以在使用js写代码实现：

     

     （2）bootstrap三列布局

    先写一个容器写3列 

    点击组件中的缩略图：

     复制代码修改：

     设置样式不是响应式的：

     

     

     

    样式：

     （3）bootstrap（标签页）

    在javascriot插件里面选择标签页：

     复制代码：

     

    修改标签内容：data-  都是跟js相关的

    在标签下添加流体容器 ：

    添加：七五分

      五七分：

     标签的aria-controls  跟内容的a标签的href是相对应的

      五七分：

     

     七五分：

     （4）bootstrap（end）

    点击关于出现模态框 

    下拉点击对应的跳转下面对应的标签页：

    点击JavaScript组件

     点击模态框：

     复制代码：

     加一个id：

    给关于按钮加一个属性：data-target属性、data-toggle属性：

     

    给a标签加一个id、a标签和下面对应： 

     下面加一个id

     给标签页加一个id：

    a标签的点击事件：

    全部代码：

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3.   <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    7.     <title>1208</title>
    8.     <link href="css/bootstrap.min.css" rel="stylesheet">
    9.     <!--[if lt IE 9]>
    10.       <script src="js/html5shiv.js"></script>
    11.       <script src="js/respond.min.js"></script>
    12.     <![endif]-->
    13.     <style type="text/css">
    14.     	img{
    15.     		width: 100%;
    16.     	}
    17.     	.damu-thumbnail img{
    18.     		width: auto;
    19.     	}
    20.     	.damu-threeC{
    21.     		margin-top:50px ;
    22.     	}
    23.     	.damu-hr{
    24.     		margin: 50px auto;
    25.     	}
    26.     	.damu-hr > hr{
    27.     		border:1px solid deeppink;
    28.     	}
    29.     	
    30.     	
    31.     	.damu-carousel{
    32.     		margin-top: 50px;
    33.     	}
    34.     	.damu-carousel,.damu-carousel  .item{
    35.     		height: 500px;
    36.     		overflow: hidden;
    37.     	}
    38.     	.carousel-caption,{
    39.     		bottom: 50%;
    40.     	}
    41.     	
    42. 		/* 响应式 */
    43.     	@media only screen and (max-width: 768px) {
    44.     		.carousel-caption{
    45. 	    		bottom: 5%;
    46. 	    	}
    47. 	    	.damu-carousel,.damu-carousel  .item{
    48. 	    		height: 200px;
    49. 	    	}
    50.     	}
    51.     </style>
    52.   </head>
    53.   <body>
    54.   	<!--导航-->
    55.     <nav class="navbar navbar-inverse navbar-fixed-top">
    56. 		  <div class="container">
    57. 		    <div class="navbar-header">
    58. 		      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    59. 		        <span class="sr-only">Toggle navigation</span>
    60. 		        <span class="icon-bar"></span>
    61. 		        <span class="icon-bar"></span>
    62. 		        <span class="icon-bar"></span>
    63. 		      </button>
    64. 		      <a class="navbar-brand" href="#">现代浏览器博物馆</a>
    65. 		    </div>
    66. 		
    67. 		    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    68. 		      <ul class="nav navbar-nav">
    69. 		        <li class="active"><a href="#">综述 <span class="sr-only">(current)</span></a></li>
    70. 		        <li><a href="#">简述</a></li>
    71. 		        <li class="dropdown">
    72. 		          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">特点 <span class="caret"></span></a>
    73. 		          <ul class="dropdown-menu" id="damu-nav">
    74. 		            <li><a href="#chrome">Chrome</a></li>
    75. 		            <li><a href="#firefox">Firefox</a></li>
    76. 		            <li><a href="#safari">Safari</a></li>
    77. 		            <li><a href="#opera">Opear</a></li>
    78. 		            <li><a href="#ie">IE</a></li>
    79. 		          </ul>
    80. 		        </li>
    81. 		      	<li><a href="javascript:;" data-target="#myModal" data-toggle="modal">关于</a></li>
    82. 		      </ul>
    83. 		    </div>
    84. 		  </div>
    85. 		</nav>
    86. 		<!--轮播-->
    87. 		<div id="carousel-example-generic" class="carousel slide damu-carousel" data-ride="carousel" data-interval="1000" data-wrap="true">
    88. 		  <ol class="carousel-indicators">
    89. 		    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    90. 		    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    91. 		    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    92. 		    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    93. 		    <li data-target="#carousel-example-generic" data-slide-to="4"></li>
    94. 		  </ol>
    95. 		  <!-- Wrapper for slides -->
    96. 		  <div class="carousel-inner" role="listbox">
    97. 		    <div class="item active">
    98. 		      <img src="images/chrome-big.jpg" >
    99. 		      <div class="carousel-caption">
    100. 		        <h2>chrome</h2>
    101. 		      </div>
    102. 		    </div>
    103. 		    <div class="item">
    104. 		      <img src="images/firefox-big.jpg" >
    105. 		      <div class="carousel-caption">
    106. 		        <h2>firefox</h2>
    107. 		      </div>
    108. 		    </div>
    109. 		    <div class="item">
    110. 		      <img src="images/safari-big.jpg" >
    111. 		      <div class="carousel-caption">
    112. 		        <h2>safari</h2>
    113. 		      </div>
    114. 		    </div>
    115. 		    <div class="item">
    116. 		      <img src="images/opera-big.jpg" >
    117. 		      <div class="carousel-caption">
    118. 		        <h2>opera</h2>
    119. 		      </div>
    120. 		    </div>
    121. 		    <div class="item">
    122. 		      <img src="images/ie-big.jpg" >
    123. 		      <div class="carousel-caption">
    124. 		         <h2>ie</h2>
    125. 		      </div>
    126. 		    </div>
    127. 		  </div>
    128. 		
    129. 		  <!-- Controls -->
    130. 		  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    131. 		    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    132. 		    <span class="sr-only">Previous</span>
    133. 		  </a>
    134. 		  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    135. 		    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    136. 		    <span class="sr-only">Next</span>
    137. 		  </a>
    138. 		</div>
    139.     <!--三列布局-->
    140.     <div class="container damu-threeC">
    141.     	<div class="row">
    142.     		<div class="col-md-4 damu-thumbnail text-center">
    143. 			      <img src="images/chrome-logo-small.jpg">
    144. 			      <div class="caption">
    145. 			        <h3>chrome</h3>
    146. 			        <p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
    147. 			        <p><a href="#" class="btn btn-default" role="button">Button</a></p>
    148. 			      </div>
    149.     		</div>
    150.     		<div class="col-md-4 damu-thumbnail text-center">
    151. 			      <img src="images/firefox-logo-small.jpg">
    152. 			      <div class="caption">
    153. 			        <h3>firefox</h3>
    154. 			        <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。。</p>
    155. 			        <p><a href="#" class="btn btn-default" role="button">Button</a></p>
    156. 			      </div>
    157.     		</div>
    158.     		<div class="col-md-4 damu-thumbnail text-center">
    159. 			      <img src="images/safari-logo-small.jpg">
    160. 			      <div class="caption">
    161. 			        <h3>safari</h3>
    162. 			        <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>
    163. 			        <p><a href="#" class="btn btn-default" role="button">Button</a></p>
    164. 			      </div>
    165.     		</div>
    166.     	</div>
    167.     </div>
    168.     <!--线-->
    169.     <div class="container damu-hr">
    170.     	<hr />
    171.     </div>
    172.     <!--标签页-->
    173.     <div class="container" id="damu-tab">
    174. 		  <ul class="nav nav-tabs" role="tablist" id="damu-list">
    175. 		    <li role="presentation" class="active"><a href="#chrome" aria-controls="chrome" role="tab" data-toggle="tab">chrome</a></li>
    176. 		    <li role="presentation"><a href="#firefox" aria-controls="firefox" role="tab" data-toggle="tab">firefox</a></li>
    177. 		    <li role="presentation"><a href="#safari" aria-controls="safari" role="tab" data-toggle="tab">safari</a></li>
    178. 		    <li role="presentation"><a href="#opera" aria-controls="opera" role="tab" data-toggle="tab">opera</a></li>
    179. 		    <li role="presentation"><a href="#ie" aria-controls="ie" role="tab" data-toggle="tab">ie</a></li>
    180. 		  </ul>
    181. 		  <div class="tab-content">
    182. 		    <div role="tabpanel" class="tab-pane active" id="chrome">
    183. 		    	<div class="container-fluid">
    184. 		    		<div class="row">
    185. 		    			<div class="col-md-7">
    186. 		    				<h3>IE 你懂的</h3>
    187. 								Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。
    188. 		    			</div>
    189. 		    			<div class="col-md-5">
    190. 		    				<img src="images/chrome-logo.jpg"  />
    191. 		    			</div>
    192. 		    		</div>
    193. 		    	</div>
    194. 		    </div>
    195. 		    <div role="tabpanel" class="tab-pane" id="firefox">
    196. 		    	<div class="container-fluid">
    197. 		    		<div class="row">
    198. 		    			<div class="col-md-5">
    199. 		    				<img src="images/firefox-logo.jpg"  />
    200. 		    			</div>
    201. 		    			<div class="col-md-7">
    202. 		    				<h3>IE 你懂的</h3>
    203. 								Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。
    204. 		    			</div>
    205. 		    		</div>
    206. 		    	</div>
    207. 		    </div>
    208. 		    <div role="tabpanel" class="tab-pane" id="safari">
    209. 		    	<div class="container-fluid">
    210. 		    		<div class="row">
    211. 		    			<div class="col-md-7">
    212. 		    				<h3>IE 你懂的</h3>
    213. 								Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。
    214. 		    			</div>
    215. 		    			<div class="col-md-5">
    216. 		    				<img src="images/safari-logo.jpg"  />
    217. 		    			</div>
    218. 		    		</div>
    219. 		    	</div>
    220. 		    </div>
    221. 		    <div role="tabpanel" class="tab-pane" id="opera">
    222. 		    	<div class="container-fluid">
    223. 		    		<div class="row">
    224. 		    			<div class="col-md-5">
    225. 		    				<img src="images/opera-logo.jpg"  />
    226. 		    			</div>
    227. 		    			<div class="col-md-7">
    228. 		    				<h3>IE 你懂的</h3>
    229. 								Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。
    230. 		    			</div>
    231. 		    		</div>
    232. 		    	</div>
    233. 		    </div>
    234. 		    <div role="tabpanel" class="tab-pane" id="ie">
    235. 		    	<div class="container-fluid">
    236. 		    		<div class="row">
    237. 		    			<div class="col-md-7">
    238. 		    				<h3>IE 你懂的</h3>
    239. 								Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。
    240. 		    			</div>
    241. 		    			<div class="col-md-5">
    242. 		    				<img src="images/ie-logo.jpg"  />
    243. 		    			</div>
    244. 		    		</div>
    245. 		    	</div>
    246. 		    </div>
    247. 		  </div>
    248. 		</div>
    249.     <!--版权-->
    250.     <div class="container">
    251.     		&copy;尚硅谷
    252.     </div>
    253.     
    254.     
    255.     
    256.     
    257.     <!--模态框-->
    258.     <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
    259. 		  <div class="modal-dialog" role="document">
    260. 		    <div class="modal-content">
    261. 		      <div class="modal-header">
    262. 		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    263. 		        <h4 class="modal-title">模态框</h4>
    264. 		      </div>
    265. 		      <div class="modal-body">
    266. 		        <p>我是一个模态框</p>
    267. 		      </div>
    268. 		      <div class="modal-footer">
    269. 		        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    270. 		      </div>
    271. 		    </div>
    272. 		  </div>
    273. 		</div>
    274.     <script src="js/jquery.min.js"></script>
    275.     <script src="js/bootstrap.min.js"></script>
    276.   </body>
    277.   <script type="text/javascript">
    278.   	$(function(){
    279.   		//1.链式调用  2.读写二合一  3.隐式迭代  4.编码函数化
    280.   		$('.carousel').carousel({
    281. 			  interval: 1000,
    282. 			  pause:null,
    283. 			  wrap:true
    284. 			})
    285.   		
    286.   		$('#test').click(function(){
    287.   			$('.carousel').carousel('cycle');
    288.   		})
    289.   		$('#test2').click(function(){
    290.   			$('.carousel').carousel('pause')
    291.   		})
    292.   		
    293.   		
    294.   		$("#damu-nav > li > a").click(function(e){
    295.   			var href = $(this).attr("href");
    296.   			console.log("#damu-list > li > a[href="+(href)+"]");
    297. 			//点击a标签下面进行提哦啊转显示
    298.   			$("#damu-list > li > a[href="+(href)+"]").tab('show');
    299. 			//滚动条往下移动到id为#damu-tab"的标签页  .offset偏移量
    300.   			$(document).scrollTop($("#damu-tab").offset().top);
    301.   			e.preventDefault();
    302.   		})
    303.   		
    304.   	})
    305.

  • 相关阅读:
    vue-:visible.sync的作用
    高纯碳酸锂去除水中钙镁离子
    解决Microsoft已经阻止宏运行，因为此文件的来源不受信任。
    STM32注入通道
    基于Spider的全站数据爬取
    国产大模型参加高考，同写2024年高考作文，及格分（通义千问、Kimi、智谱清言、Gemini Advanced、Claude-3-Sonnet、GPT-4o）
    【spring】初识spring基础
    C语言学习笔记（二一）
    搜索。。。
    完成Zookeeper集群部署
  • 原文地址：https://blog.csdn.net/dengfengling999/article/details/127954766