使用Bootstrap轻松打造你的网站-PHP开发-php.cn

使用Bootstrap轻松打造你的网站

WBOY

リリース： 2016-06-07 17:22:58

オリジナル

1419 人が閲覧しました

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

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

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

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

先来整体看一下效果

源码下载点击这里

使用Bootstrap轻松打造你的网站

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

使用Bootstrap轻松打造你的网站

点击时导航会展开

使用Bootstrap轻松打造你的网站

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

使用Bootstrap轻松打造你的网站

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

加载相关的样式文件和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">
    $(&#39;.dropdown-toggle&#39;).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。

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