bootstrap 学习之路2

最新推荐文章于 2024-04-23 21:43:06 发布

wangboa123

最新推荐文章于 2024-04-23 21:43:06 发布

阅读量1.7k

点赞数

分类专栏： bootstrap 文章标签： bootstrap html5 学习类入门

本文链接：https://blog.csdn.net/wangboa123/article/details/8853882

版权

bootstrap 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

学习如逆水行舟不进则退！学习要脚踏实地、步步为营！这些道理谁都懂，可是又有几人做到呢？最后归结为8个字：想的太多，看书太少！

二话不说，上代码！

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>my second bootstrap</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0" >
		<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"  >
		<link rel="stylesheet" href="./bootstrap/css/bootstrap-responsive.min.css" >

        <link rel="shortcut icon" href="icon.jpg" >

		<style>
			body{
				padding-top:60px;
				padding-bottom:40px;
			}
			.margintop{
				margin-top:50px;
			}
		</style>
	</head>

	<body>
		<div class="navbar navbar-inverse navbar-fixed-top">
			<div class="navbar-inner">
				<div class="container">
					<div class="nav-collapse collapse">
						<ul class="nav">
							<li><a href="#">home</a></li>
							<li><a href="#">about</a></li>
							<li><a href="#">product</a></li>
							<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单<b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="#">dropdown1</a></li>
								<li><a href="#">dropdown2</a></li>
								<li><a href="#">dropdown3</a></li>
								
							</ul>
							</li>
						</ul>
					</div>

				</div>
			</div>
		</div>
		
		<div class="container">
			<div class="jumbotron">
				<img src="heropic.jpg" alt="hero背景图大小为940*358" />
			</div>	
		<div class="container margintop">
			<div class="row">
				<div class="span4">
					<h3>area1</h3>
					<p>helloworld1</p>
					<p>helloworld2</p>
					<p>helloworld3</p>
				</div>
				<div class="span4">
					<h3>area2</h3>
					<p>helloworld1</p>
					<p>helloworld2</p>
					<p>helloworld3</p>
				</div>
				<div class="span4">
					<h3>area3</h3>
					<p>helloworld1</p>
					<p>helloworld2</p>
					<p>helloworld3</p>
				</div>
			</div>
			<hr>
			<footer>
				  <p>© Company 2013</p>
			</footer>
			</div>
		</div>
		<script src="./bootstrap/thirdpart/jquery.min.js"></script>
		<script src="./bootstrap/js/bootstrap.min.js"></script>
	</body>
</html>

释义：

1. <div class="navbar-inner"> navbar-inner作用未知，但是最好nav 的container给放进去，以后知道了会补出来!

2. <div class="nav-collapse collapse"> collapse 折叠排列，具体未知，最好将nav的ul放入其中。

3. <li class="dropdown"> 下拉菜单。表明里面放的是下拉菜单

4. <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单<b class="caret"></b></a> 下拉菜单描述，其中 data-toggle="dropdown"是触发器，处罚了js ,来实现显示和隐藏dropdown. <b class="caret"></b> 下拉箭头。

5. <ul class="dropdown-menu"> 下拉菜单里面的内容

6. <div class="jumbotron"> .jumbotron类,意思是超大屏的意思。原先代码中是 hero-unit,. 只不过我想让此处显示一张大图，所以改成了这个类

7. row 和span4 . row代表一行布局。 bootstrap将每一行分为12列，就比如表格有12列，其中span1占据1列，span4占据4列，span12占据12列。我想分三列显示，当然是12/3=4 ，所以使用span4，同理如果是显示一列，必须span12

好了，解释到此，有误之处请大家指正！正在学习，请大家包涵！

效果如下：