搜尋
首頁php教程PHP开发使用Bootstrap轻松打造你的网站

前面的有了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。


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


陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器