利用bootstrap组件一步步快速设计团队介绍页面
第一步 页面标题
参考菜鸟教程"Bootstrap页面标题"实例，构建页面标题。
第二步 导航栏
参考菜鸟教程“BootStrap导航栏”实例，在页面标题后添加导航栏。
第三步 主体内容部分的布局
参考菜鸟教程“网格系统-嵌套列”实例的布局方式，包含两个大的列，其中第二列又被分为两行四个盒子。之后可以在左侧第一个大列中放置列表组，右侧列的四个盒子中放置多媒体对象。
第四步 查看初步效果
以下是直接利用菜鸟教程中Bootstrap组件实例组合在一起的效果，已经能够快速搭建出一个团队介绍页的框架，然后只需要修改其中的内容就可以了。
附完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例 - 利用Bootstrap组件实现快速页面设计</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding: 40px;">
<div class="page-header">
<h1 class="text-center">
欢迎来到创新实践课堂
</h1>
</div>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</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="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-3">
<ul class="list-group">
<li class="list-group-item">免费域名注册</li>
<li class="list-group-item">免费 Window 空间托管</li>
<li class="list-group-item">图像的数量</li>
<li class="list-group-item">24*7 支持</li>
<li class="list-group-item">每年更新成本</li>
</ul>
</div>
<div class="col-md-9">
<h4>第二列 - 分为四个盒子</h4>
<div class="row">
<div class="col-md-6">
<div class="media">
<div class="media-left">
<img src="https://static.runoob.com/images/mix/img_avatar.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">左对齐</h4>
<p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
</div>
</div>
</div>
<div class="col-md-6">
<p> 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.
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="media">
<div class="media-body">
<h4 class="media-heading">右对齐</h4>
<p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
</div>
<div class="media-right">
<img src="https://static.runoob.com/images/mix/img_avatar.png" class="media-object" style="width:60px">
</div>
</div>
</div>
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
原创文章 8
获赞 2
访问量 2333