您的位置：首页 > 其它

实例1——简单风格，导航条、巨幕和行列模式

2016-01-07 20:30 211 查看 
<!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">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<!----------- 导航条，可用nav标签，也可以用div标签 --------------->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- navbar、jumbotron默认是铺满全屏的，里面套用可以套用container来设置内容居中。
navbar里面有两个部分：
navbar-header: navbar-toggle，navbar-brand；
navbar-collapse：ul.nav.navbar-nav，form.navbar-form；

对于元素位置：navbar-left, navbar-right；

-->
<div class="navbar-header">
<!-- 元素状态：collapse表示为合并；不填、collapsed和collapse in表示为展开。用来描述本身状态-->
<!-- data-toggle：用来切换元素状态；data-target：用来确定操作的对象 -->
<!-- button是在移动端生效的，button.navbar-toggle用来描述本身的属性，比如这个button叫什么 -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"> <!-- 导航条切换按钮 -->
<span class="sr-only">Toggle navigation</span> <!-- sr-only，表示元素隐藏 -->
<span class="icon-bar"></span>  <!-- icon-bar，显示为一条横杆 -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a> <!-- 导航条品牌logo -->
</div>

<div id="navbar" class="navbar-collapse collapse"> <!-- id="navbar" 对应上面的data-target -->
<ul class="nav navbar-nav">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">DROPDOWN<b class="caret"></b></a> <!-- caret定义向下三角形 -->
<ul class="dropdown-menu"> <!-- 这边怎么没有用id -->
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<!-- 表单组，label和input可以组成最简单的表单组 -->
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>

<!------------- 主要内容 ------------------------>
<div class="container" style="margin-top:70px">
<!-- div.jumbotron表示巨幕，默认是铺满全屏的。所以我们可用container将它包裹起来 -->
<!-- 下面的巨幕这一块，可以图片轮播来替换，这样页面效果更好 -->
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
<!-- 对于btn, btn-?, btn-*, ?表示样式，*表示尺寸
其中包含的内容都是这种模式：<h1> + <p> + <p><a class="btn btn-primary">
-->
</div>
<!-- 典型的行列模式 -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>

<hr>

<footer>
<center><p>© Company 2014</p></center>
</footer>
</div> <!-- /container -->

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航