使用bootstrap实现快速响应式布局

作者: Rememberautumn 分类: css 发布时间: 2014-12-28 21:05 阅读: 6,452

最近就要期末考试了,大家都在为防止挂科而努力的时候,我却还在鼓弄编程,这真是要挂了的节奏啊!最近发现了bootstrap布局,非常方便,功能强大,发现我就要爱上他了,哈哈。

使用Bootstrap

演示地址:http://www.fddcn.cn/adds/ytukb.html

Bootstrap使用HTML5和CSS元素,所以要把页面设置成html5样式

我们使用cdn <link rel=”stylesheet” href=”http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css”>来引入css文件,这样我们就可以在网页中使用bootstrap布局了

标题栏和导航栏

<nav class=”navbar navbar-default navbar-static-top” role=”navigation”>
<div class=”container”>
<div class=”navbar-header”>

<a class=”navbar-brand” href=”http://www.fddcn.cn”>码海坐标</a>
</div>

<div id=”navbar” class=”navbar-collapse collapse”>
<ul class=”nav navbar-nav”>
<li ><a href=”http://www.fddcn.cn”>首页</a></li>
<li class=”active”><a href=”http://www.fddcn.cn/adds/ytukb.html”>课表</a></li>
<li><a href=”http://www.fddcn.cn/article-archive”>文章归档</a></li>
<li><a href=”http://weibo.com/memberautumn”>我的微博</a></li>
<li><a href=”http://www.fddcn.cn/introduction”>关于我</a></li>

</ul>

</div><!–/.nav-collapse –>
</div>
</nav>

设置底部

<div class=”footer”>
<div class=”span7 text-center”>
<div class=”container”>
<p class=”text-muted”>Copyright © <a href=”http://www.fddcn.cn”>码海坐标</a> 保留所有权利.

</p>
</div>
</div>
</div>
就可以生成一个简单的页面了,感兴趣的同学赶紧试试吧。

 

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注