专注于WEB技术的IT博客

使用Bootstrap轻松打造你的网站

时间:2014-09-18分类: Css浏览:5301
分享到:

前面的有了BOOTSTRAP再也不担心网站的前端设计,我介绍了Bootstrap,现在在理解Bootstrap的基础上,接下来,我将使用Bootstrap来打造一个网页,以更加深入地认识得使用Bootstrap。


目标:使用Bootstrap快速打造一个网站


看完这篇文章,即使你是一只菜鸟,只要稍懂html+css,你也能使用Bootstrap来快速打造一个网点。

惦量一下,由于本文是图文描述,可能会很长,看情况了,如果太长了我会分章,废话少说了。。。

先来整体看一下效果


源码下载点击这里



本页的导航使用响应式布局,当浏览器缩小至或者小于768px,导航将收起,如图所示



点击时导航会展开



主体使用流体式布局,浏览器缩小时,布局框架和内容都会变得狭小


接下来,看看是如何实现的吧。


加载相关的样式文件和js文件


加载相关的样式文件和js文件,如果你想查阅官方文档你可以点击这里

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="./bootstrap/3.2.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="./jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="./bootstrap/3.2.0/js/bootstrap.min.js"></script>

如果你还记得前面的导航子菜单,它是如何实现的?其实它只需加载下面一行JS代码就可搞定

<script type="text/javascript">
    $('.dropdown-toggle').dropdown();
</script>

呵呵,是不是很轻松啊,如果不是使用Bootstrap ,你会JS,你也可能花了很多时间都写不出来;

你不会JS,那就更惨了,到百度的海量信息去筛选吧,你懂的。在这里,你只需,拈来就用。


网站导航制作

Bootstrap也提供几款导航,上面是一款比较经典的,当然,如果你觉得不好看,可以自己修改,或者自己制作哦。导航代码如下

<div class="navbar navbar-inverse" >
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="http://w3note.com">网志博客</a>
          </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="http://w3note.com">首页</a></li>
              <li><a href="#about">导航一</a></li>
              <li><a href="#contact">导航二</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">导航三 <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">子栏一</a></li>
                  <li><a href="#">子栏一</a></li>
                  <li><a href="#">子栏一</a></li>
                  <li class="divider"></li>
                  <li class="dropdown-header">子栏</li>
                  <li><a href="#">子栏一</a></li>
                  <li><a href="#">子栏一</a></li>
                </ul>
              </li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>


网站的布局

布局仍是网站制作的重点,对我来说,我最看重的是Bootstrap的强大的布局功能。从上面那个实例抽出它的布局代码,如

<div class="container-fluid" style="width:90%;">
     <div class="row">
<!--header-->
      <div class="col-xs-12">
</div><!--/col-xs-12-->
     </div><!--/row-->
<!--main-->
    <div class="row">
     
      <div class="col-xs-8">
</div><!--/col-xs-8-->
                     
      <div class="col-xs-4"></div><!--/col-xs-4-->
<!--footer-->
<div class="col-xs-12 ">
</div><!--/col-xs-12-->
                     
    </div><!--/row-->
</div><!--//container-fluid-->

Bootstrap有一套完整的栅格系统,其默认的栅格系统为12列 ,如上面的主体main两栏布局,使用的是8:4栅格,8+4=12,也就是不管多少栏,它们的栅格相加总是为12。


好了,到此就先告一段落吧,后面还会有更详细的解说。


猜你喜欢
bootstrap布局篇详解(二)
bootstrap布局篇详解(一)
Bootstrap“减肥”优化攻略
一次微网站建设的坎坷经历
标签 : bootstrap css
除非注明,本文首发网志博客,欢迎转载!转载请注明本文地址:http://w3note.com/web/175.html,谢谢。
  • 评论
  • 赞助本站