bootstrap3-导航条，旋转木马，网格

最新推荐文章于 2022-02-22 13:36:18 发布
最新推荐文章于 2022-02-22 13:36:18 发布
阅读量451 收藏
点赞数
分类专栏： WEB前端@BootStrap3 文章标签： javascript 数据库 php ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/schy_hqh/article/details/84514842
版权

准备工作：

下载bootstrap-3.0.0

新建HTML5页面

引入bootstrap最基础的css文件

引入jquery（在引入其他js之前，先引入jquery）

引入bootstrap的js文件

自定义一个custom.css文件，用来对bootstrap的某些样式进行重写

其它：支持移动设备的不同屏幕大小，提供响应式布局等。。。 

 


主页



 

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <title>Bootstrap V3 template</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
    
    <!-- 自定义的CSS，用来覆盖Bootstrap的一些样式 -->
    <link href="../../bootstrap-3.0.0/dist/css/custom.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../bootstrap-3.0.0/assets/js/html5shiv.js"></script>
      <script src="../../bootstrap-3.0.0/assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <!-- 导航：使用nav标签进行封装
    	navbar: it is assigned to the nav element which holds the entire navigation.
    	navbar-inverse : change the default color of the navigation bar dark instead of the default lighter one
    	navbar-fixed-top : makes sure that the navbar stays fixed in the top position when we scroll down our HTML page
    	
    	role="navigation" : for accessibility purpose  
    -->
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<!-- 
			使用一个无序列表<ul>封装导航
			class="nav navbar-nav" : 将列表横向排列
		 -->
		<ul class="nav navbar-nav">
			<!-- 
				引入LOGO图片，点击图片跳转到一个新的页面 
				class="navbar-brand" ： used to present the brand name
			-->
			<li>
				<a href="new.html" class="navbar-brand"> 
					<img src="../../image/logo.png">
				</a>
			</li>
			<!-- 主页链接 -->
			<li class="active">
				<a href="carousal.html">Home</a>
			</li>
			<!-- 其它链接 -->
			<li>
				<a href="price.html">Price</a>
			</li>
			<!-- 其它链接 -->
			<li>
				<a href="contact.html">Contact</a>
			</li>
			<!-- 使用<li>封装下拉列表 -->
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">
					Social<b class="caret"></b>
				</a>
				<!-- 再使用<ul>封装下拉框中的选项 -->
				<ul class="dropdown-menu">
					<li class="socials">
						<a href="https://twitter.com/share"	class="twitter-share-button">Google</a>
					</li>
					<li class="socials">
						<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
					</li>
				</ul>
			</li>
		</ul>
	</nav>
	<!--//导航结束  -->
	
	<!-- 【在导航条下面显示图片===旋转木马】-->
	
	<!-- 旋转木马 -->
	<!-- 
		   通过DIV作为容器封装所有内容，并使用样式class="carousel slide"
		   启动自动轮播：data-ride="carousel" 
	 -->
	<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">
			<!-- 使用div封装图片，应用样式class="item"，并指定默认显示的图片 -->
			<!-- 第1张图 -->
			<div class="item active">
				<img src="../../image/computer.jpg" alt="..." class="img-responsive">
				<!-- 图片上：文字说明，按钮 -->
				<div class="carousel-caption">
					<h1>Large Desktops are everywhere</h1>
					<p>
						<button class="btn btn-success btn-lg">第1张图片
					</p>
				</div>
			</div>
			<!-- 第2张图 -->
			<div class="item">
				<img src="../../image/mobile.jpg" alt="..." class="img-responsive">
				<div class="carousel-caption">
					<h1>Mobiles are outnumbering desktops</h1>
					<p>
						<button class="btn btn-success btn-lg">第2张图片
					</p>
				</div>
			</div>
			<!-- 第3张图 -->
			<div class="item">
				<img src="../../image/cloud1.jpg" alt="..." class="img-responsive">
				<div class="carousel-caption">
					<h1>Enterprises are adopting Cloud computing fast</h1>
					<p>
						<button class="btn btn-success btn-lg">第3张图片
					</p>
				</div>
			</div>
		</div>
		<!-- Controls -->
		<!-- 图片向前 -->
		<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
			<span class="icon-prev"></span>
		</a>
		<!-- 图片向后 --> 
		<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 
			<span class="icon-next"></span>
		</a>
	</div>
	<!-- //旋转木马结束 -->
	
	<!-- 网格 -->
	<div class="container">
		<!-- 第一行 -->
		<div class="row barone">
			<div class="col-lg-4">
				<h1>Frontend</h1>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</p>
			</div>
			<div class="col-lg-4">
				<h1>Serverside</h1>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</p>
			</div>
			<div class="col-lg-4">
				<h1>Databases</h1>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</p>
			</div>
		</div>
		<!-- 第二行 -->
		<div class="row barone">
			<div class="col-lg-2">
				<p><img src="http://www.w3resource.com/images/w3resourcelogo.gif"></p>
			</div>
			<div class="col-lg-2">
				<p><img src="http://w3resource.com/update-images/php.png"></p>
			</div>
			<div class="col-lg-2">
				<p><img src="http://w3resource.com/update-images/mysql-logo.jpg"></p>
			</div>
			<div class="col-lg-2">
				<p><img src="http://w3resource.com/update-images/javascript-logo.png"></p>
			</div>
			<div class="col-lg-2">
				<p><img src="http://w3resource.com/update-images/java.png"></p>
			</div>
			<div class="col-lg-2">
				<p><img src="http://w3resource.com/update-images/postgresql.png"></p>
			</div>
		</div>
		
		<div class="row barone">
			<div class="col-lg-12">
				<hr>
				<p>Copyright@2013-14 by ToDo App.</p>
			</div>
		</div>
	</div>	
	<!-- //网格结束 -->

	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="../../bootstrap-3.0.0/assets/js/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../../bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
  </body>
</html>

 

Price页



 

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <title>Bootstrap V3 template</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
    
    <!-- 自定义的CSS，用来覆盖Bootstrap的一些样式 -->
    <link href="../../bootstrap-3.0.0/dist/css/custom.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../bootstrap-3.0.0/assets/js/html5shiv.js"></script>
      <script src="../../bootstrap-3.0.0/assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <!-- 导航：使用nav标签进行封装
    	navbar: it is assigned to the nav element which holds the entire navigation.
    	navbar-inverse : change the default color of the navigation bar dark instead of the default lighter one
    	navbar-fixed-top : makes sure that the navbar stays fixed in the top position when we scroll down our HTML page
    	
    	role="navigation" : for accessibility purpose  
    -->
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<!-- 
			使用一个无序列表<ul>封装导航
			class="nav navbar-nav" : 将列表横向排列
		 -->
		<ul class="nav navbar-nav">
			<!-- 
				引入LOGO图片，点击图片跳转到一个新的页面 
				class="navbar-brand" ： used to present the brand name
			-->
			<li>
				<a href="new.html" class="navbar-brand"> 
					<img src="../../image/logo.png">
				</a>
			</li>
			<!-- 主页链接 -->
			<li class="active">
				<a href="carousal.html">Home</a>
			</li>
			<!-- 其它链接 -->
			<li>
				<a href="price.html">Price</a>
			</li>
			<!-- 其它链接 -->
			<li>
				<a href="contact.html">Contact</a>
			</li>
			<!-- 使用<li>封装下拉列表 -->
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">
					Social<b class="caret"></b>
				</a>
				<!-- 再使用<ul>封装下拉框中的选项 -->
				<ul class="dropdown-menu">
					<li class="socials">
						<a href="https://twitter.com/share"	class="twitter-share-button">Google</a>
					</li>
					<li class="socials">
						<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
					</li>
				</ul>
			</li>
		</ul>
	</nav>
	<!--//导航结束  -->
	
	<!-- 表格 -->
	<div class="container">
		<table class="table table-bordered">
			<thead>
				<tr>
					<th>Features</th>
					<th>Individual</th>
					<th>Small Team</th>
					<th>Medium Team</th>
					<th>Enterprise</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><h3>No. Of users</h3></td>
					<td><span class="badge">One</span></td>
					<td><span class="badge">Five</span></td>
					<td><span class="badge">Fifteen</span></td>
					<td><span class="badge">Unlimited</span></td>
				</tr>
				<tr>
					<td><h3>Pro training</h3></td>
					<td><span class="badge">No</span></td>
					<td><span class="badge">Yes</span></td>
					<td><span class="badge">Yes</span></td>
					<td><span class="badge">Yes</span></td>
				</tr>
				<tr>
					<td><h3>Forum Support</h3></td>
					<td><span class="badge">Yes</span></td>
					<td><span class="badge">Yes</span></td>
					<td><span class="badge">Yes</span></td>
					<td><span class="badge">Yes</span></td>
				</tr>
				<tr>
					<td><h3>In person support</h3></td>
					<td><span class="badge">No</span></td>
					<td><span class="badge">No</span></td>
					<td><span class="badge">Yes</span></td>
					<td><span class="badge">Yes</span></td>
				</tr>
				<tr>
					<td><h3>Weekly webinars</h3></td>
					<td><span class="badge">No</span></td>
					<td><span class="badge">No</span></td>
					<td><span class="badge">Yes</span></td>
					<td><span class="badge">Yes</span></td>
				</tr>
				<tr>
					<td><h3>Price</h3></td>
					<td><button type="button" class="btn btn-warning btn-lg">$9/Month</button></td>
					<td><button type="button" class="btn btn-warning btn-lg">$19/Month</button></td>
					<td><button type="button" class="btn btn-warning btn-lg">$49/Month</button></td>
					<td><button type="button" class="btn btn-warning btn-lg">$99/Month</button></td>
				</tr>
				<tr>
					<td></td>
					<td><button type="button" class="btn btn-success btn-lg">Buy
							now</button></td>
					<td><button type="button" class="btn btn-success btn-lg"">Buy
							now</button></td>
					<td><button type="button" class="btn btn-success btn-lg"">Buy
							now</button></td>
					<td><button type="button" class="btn btn-success btn-lg"">Buy
							now</button></td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>

 

 

Contact页



 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Bootstrap V3 template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css"
	rel="stylesheet" media="screen">

<!-- 自定义的CSS，用来覆盖Bootstrap的一些样式 -->
<link href="../../bootstrap-3.0.0/dist/css/custom.css" rel="stylesheet">

<!-- google地图需要的js -->
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
	function initialize() {
	    var map_canvas = document.getElementById('map_canvas');
	    var map_options = {
	      center: new google.maps.LatLng(23.244066, 87.861276),
	      zoom: 8,
	      mapTypeId: google.maps.MapTypeId.ROADMAP
	    }
	    var map = new google.maps.Map(map_canvas, map_options)
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="../../bootstrap-3.0.0/assets/js/html5shiv.js"></script>
      <script src="../../bootstrap-3.0.0/assets/js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	 <!-- 导航：使用nav标签进行封装
    	navbar: it is assigned to the nav element which holds the entire navigation.
    	navbar-inverse : change the default color of the navigation bar dark instead of the default lighter one
    	navbar-fixed-top : makes sure that the navbar stays fixed in the top position when we scroll down our HTML page
    	
    	role="navigation" : for accessibility purpose  
    -->
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<!-- 
			使用一个无序列表<ul>封装导航
			class="nav navbar-nav" : 将列表横向排列
		 -->
		<ul class="nav navbar-nav">
			<!-- 
				引入LOGO图片，点击图片跳转到一个新的页面 
				class="navbar-brand" ： used to present the brand name
			-->
			<li>
				<a href="new.html" class="navbar-brand"> 
					<img src="../../image/logo.png">
				</a>
			</li>
			<!-- 主页链接 -->
			<li class="active">
				<a href="carousal.html">Home</a>
			</li>
			<!-- 其它链接 -->
			<li>
				<a href="price.html">Price</a>
			</li>
			<!-- 其它链接 -->
			<li>
				<a href="contact.html">Contact</a>
			</li>
			<!-- 使用<li>封装下拉列表 -->
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">
					Social<b class="caret"></b>
				</a>
				<!-- 再使用<ul>封装下拉框中的选项 -->
				<ul class="dropdown-menu">
					<li class="socials">
						<a href="https://twitter.com/share"	class="twitter-share-button">Google</a>
					</li>
					<li class="socials">
						<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
					</li>
				</ul>
			</li>
		</ul>
	</nav>
	<!--//导航结束  -->
	
	<!-- 联系我们 -->
	<div class="container">
		<h1>Mail us, call us or reach us in person</h1>
		<!-- 网格 -->
		<div class="row">
			<!-- 第1列中封装form表单 -->
			<div class="col-lg-4">
				<form class="form-horizontal" role="form">
					<div class="form-group">
						<label for="email" class="col-lg-2 control-label">Email</label>
						<div class="col-lg-10">
							<input type="email" class="form-control" id="email"
								placeholder="Email">
						</div>
					</div>
					<div class="form-group">
						<label for="name" class="col-lg-2 control-label">Name</label>
						<div class="col-lg-10">
							<input type="text" class="form-control" id="name"
								placeholder="Name">
						</div>
					</div>
					<div class="form-group">
						<label for="country" class="col-lg-2 control-label">Country</label>
						<div class="col-lg-10">
							<select>
								<option>USA</option>
								<option>India</option>
								<option>UK</option>
								<option>Autralia</option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label for="desc" class="col-lg-2 control-label">Message</label>
						<div class="col-lg-10">
							<textarea rows="5" cols="50"></textarea>
						</div>
					</div>

					<div class="form-group">
						<div class="col-lg-offset-2 col-lg-10">
							<button type="submit" class="btn btn-default">Submit</button>
						</div>
					</div>
				</form>
			</div>
			<!-- 第2列：地址 -->
			<div class="col-lg-4">
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
				<p>Phone No: 1234567890</p>
			</div>
			<!-- 第3列：地图 -->
			<div class="col-lg-4">
				<div id="map_canvas"></div>
			</div>
		</div>
	</div>
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="../../bootstrap-3.0.0/assets/js/jquery.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="../../bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>

 

 

在自定义custom.css中，对默认的bootstrap样式进行修改

 

/*设置正文距离页面顶端80px，否则正文的前面部分将被导航条遮住*/
body {
	padding-top: 80px;
}


.navbar-nav>li>a {
	line-height: 50px; /*设置导航条中每个超链接的高度*/
	font-size: 16px /*设置字号*/
}


.carousel-control .icon-prev,.carousel-control .icon-next {
	font-size: 100px; /*前后翻页符号的字体大小*/
	position: absolute; /*绝对定位*/
	top: 200px /*离顶部的距离*/
}

/*图片上说明文字与顶部的绝对定位*/
.carousel-inner .item .carousel-caption {
	position: absolute;
	top: 200px
}

/*图片上指示器的与顶部的绝对定位*/
.carousel-indicators {
	position: absolute;
	top: 400px;
}

/*以下为设置表格样式*/
.container>h1 {
	text-align: center;
}

th {
	background-color: #428bca;
	color: #ec8007;
	z-index: 10;
	text-shadow: 1px 1px 1px #fff;
	font-size: 24px;
}

.badge {
	background-color: #428bca;
	color: #fff;
	font-size: 22px;
}

/*google地图*/
#map_canvas {
    width: 400px;
    height: 400px;
}

 

 

schy_hqh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于原生Bootstrap carousel扩展的实用jQuery旋转木马，横向轮播
07-06
这是一款在原生Bootstrap carousel之上进行扩展而制作的实用jQuery旋转木马插件。该旋转木马插件在不改变原有的HTML标签的情况下，通过JS来重构旋转木马的结构，并结合CSS样式来完成旋转木马的显示。演示地址：http://www.jq22.com/jquery-info8299
bootstrap3-editable
10-31
Bootstrap3-Editable是一款基于Bootstrap框架的插件，主要用于在Bootstrap表格中实现行内编辑功能。这个插件使得用户可以直接在表格的每一行中编辑数据，而无需跳转到新的页面或者打开模态框，极大地提高了用户体验...
bootstrap 提示、倒塌与旋转木马
weixin_33686714的博客
06-11 112
提示，tooltip <!--鼠标放在按钮上，就会出现提示。js代码不可少--> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on left">Tooltip...
Bootstrap图片切换旋转木马jQuery插件
ICode联盟
02-22 226
下载地址 可以将Bootstrap网格转换为旋转木马特效的jQuery插件，通过该jQuery插件，可以将指定的网格内容扩展为旋转木马效果，通过前后导航按钮来轮流播放。 dd:
Bootstrap页面布局24 - BS旋转木马功能
weixin_30314813的博客
08-03 130
代码： <div class='container-fluid'> <h3 class='page-header'>Bootstrap 旋转木马</h3> <div class='carousel slide' id='carousel1'> <div class='carousel-in...
bootstrap实现Carousel旋转木马（焦点图）
weixin_30929295的博客
08-03 240
引入bootstrap相关文件后，在html中写如下代码： 1 <div class="col-lg-9" > 2 <!-- Carousel====================== --> 3 <div id="myCarousel" class="carousel ...
bootstrap-5.1.3-dist.zip
11-11
2. **预定义组件**：Bootstrap提供了丰富的预构建组件，如导航条（navbar）、模态框（modal）、下拉菜单（dropdown）、按钮组（button group）、卡片（card）等，这些组件简化了网页的开发过程。 3. **CSS样式**：...
基于bootstrap实现收缩导航条
12-03
3. 使用Bootstrap的`navbar`、`navbar-default`和`navbar-fixed-top`类创建导航条。 4. 添加`navbar-toggle`按钮，通过`data-toggle`和`data-target`属性控制折叠行为。 5. 定义折叠内容区域，使用`collapse`和`nav-...
bootstrap-3.4.1-dist.zip,bootstrap-4.6.1-dist.zip
03-09
Bootstrap 3的核心组件包括网格系统、表单、按钮、导航、模态、图像以及各种JavaScript插件，如下拉菜单、轮播图和模态框等。这些组件都基于HTML5和CSS3，通过预定义的类名，开发者可以快速构建美观的用户界面。 ...
Bootstrap导航条的使用和理解3
08-31
Bootstrap导航条是Web开发中广泛使用的组件，它提供了一种响应式和易于定制的导航解决方案，尤其适用于构建适应不同设备屏幕大小的网站或应用程序。在本文中，我们将深入探讨Bootstrap导航条的使用和理解，以及如何...
原生Bootstrap旋转木马特效特效代码
03-20
原生Bootstrap旋转木马特效是一款基于jQuery实现的图片轮播切换代码。
基于原生Bootstrap carousel扩展的实用jQuery旋转木马
12-11
这是一款在原生Bootstrap carousel之上进行扩展而制作的实用jQuery旋转木马插件。该旋转木马插件在不改变原有的HTML标签的情况下，通过JS来重构旋转木马的结构，并结合CSS样式来完成旋转木马的显示。
Bootstrap-导航条-栅格系统-Carousel(轮播效果)-标签页
01-21
bootstrap 导航条 栅格系统 Carousel(轮播效果) 标签页 简单好用有注释效果图在 http://blog.csdn.net/dingsai88/article/details/42970767
css案例之旋转木马相册（女朋友都感动哭了相册）
weixin_45336716的博客
09-03 216
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt...
轮播图---1旋转木马式
weixin_43019637的博客
10-05 378
结构+样式 ...
css3- 两面翻转的盒子、3D导航栏、旋转木马
SilentLand的博客
05-28 864
transform-style: preserve-3d;运用、3D属性运用、动画综合运用
html5新增、css3动画、导航条、文字轮播和旋转木马
fackyoufack的博客
01-06 232
html5新增 1新增 header — 头部标签 nav — 导航标签 article — 内容标签 section — 块级标签 aside — 侧边栏标签 footer — 尾部标签 音频 – audio 视频 – video audio的使用格式 audio的参数 新增input标签 新增表单属性 css3动画 导航条 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8
bootstrap3-collapse 折叠
一名菜鸟攻城师
12-28 796
几个关键的属性   .collapse  用法class="collapse" 该元素被折叠   .collapse.in 用法class="collapse in" 展开该元素   data-parent="#selector"  保证parent下只有1个元素处于展开状态 这个属性的作用：展开当前元素时，折叠其它暂开的元素，实现parent下只有1个元素处于展开状态 如果不...
sudo keystone-manage bootstrap --bootstrap-password cqu2022\ --bootstrap-admin-url http://localhost:5000/v3/ \ --bootstrap-internal-url http://localhost:5000/v3/ \ --bootstrap-public-url http://localhost:5000/v3/ \ --bootstrap-region-id RegionOne
最新发布
06-12
- `--bootstrap-admin-url`：用于设置管理员API终端的URL。 - `--bootstrap-internal-url`：用于设置内部API终端的URL。 - `--bootstrap-public-url`：用于设置公共API终端的URL。 - `--bootstrap-region-id`：用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值