Bootstrap基础教程
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

2.5 案例：W3school首页

案例视频2

本案例效果如图2-20所示。

图2-20 W3school案例

本案例的具体操作步骤如下。

（1）创建HTML5页面index.html，在页面中引入 meta。

<meta name=＂viewport＂ content=＂width=device-width,initial-scale=1,shrink-to-fit=no＂>

（2）引入bootstrap.min.css文件。

<link href=＂css/bootstrap.min.css＂ rel=＂stylesheet＂>

（3）页面一共4行，为3—6—3的布局。其中，第1、第2、第4行均为1列，第3行为3列。在body中添加容器 div、行和列，搭建整体结构。

<div class=＂container＂>
        <!--第 1行 Logo部分-->
        <div class=＂row＂>
            <div class=＂col＂></div>
        </div>
        <!--第 2行 导航部分-->
        <div class=＂row＂>
            <div class=＂col＂></div>
        </div>
        <!--第 3行 主体-->
        <div class=＂row＂>
            <div class=＂col-3＂></div>
            <div class=＂col-6＂></div>
            <div class=＂col-3＂></div>
        </div>
        <!--第 4行 页脚-->
        <div class=＂row＂>
            <div class=＂col＂></div>
        </div>
</div>

（4）完成第1行 Logo部分。

<div class=＂row＂>
    <div class=＂col ＂>
        <div class=＂bg-logo＂>
                  <img src=＂img/logo.png＂>
        </div>
    </div>
</div>

新建一个CSS文件：main.css。在 main.css中添加类.bg-logo定义，在col上应用.bg-log （前面代码已经添加）。

.bg-logo{
  background-color:#fdfcf8;
  width:100%;
}

在index.html中引用 main.css，该引用排在引用bootstrap.min.css之后。

<link href=＂css/bootstrap.min.css＂ rel=＂stylesheet＂/>
<link href=＂css/main.css＂ rel=＂stylesheet＂/>

（5）完成第2行导航，在col中添加列表，其中列表放在一个id为 main-nav的 div中。

<div class=＂row＂>
          <div class=＂col＂>
              <div id=＂main-nav＂>
                  <ul>
                      <li><a href=＂#＂>HTML/CSS</a></li>
                      <li><a href=＂#＂>JavaScript</a></li>
                      <li><a href=＂#＂>Server Side</a></li>
                      <li><a href=＂#＂>ASP.NET</a></li>
                      <li><a href=＂#＂>XML</a></li>
                      <li><a href=＂#＂>Web Services</a></li>
                      <li><a href=＂#＂>Web Building</a></li>
                  </ul>
              </div>
          </div>
</div>

添加下列导航样式，然后查看页面效果。

#main-nav{
        background-color:#eee;
}
#main-nav ul{
        list-style-type:none;
        font-size:18px;
        padding:15px 0;
        margin:0px;
}
#main-nav li{
        display:inline;
}
#main-nav a{
        padding:15px 20px;
        color:#999;
        text-decoration:none;
}
#main-nav a:hover{
        background-color:#444;
        color:#fff;
}

（6）完成第3行的内容，此行包含3列，在大桌面设备下，左边列3个栅格，中间列6个栅格，右边列3个栅格，手机、平板、桌面设备下分别显示4列、8列、12列。左边是2个列表，放在id为 leftside的div中；中间为3行内容，放在id为main的div中；右边为一个列表，放在 rightside的div中。

① 左边列的html代码。

<div class=＂col-4 col-md-8＂>
    <div id=＂leftside＂>
        <h3>HTML教程</h3>
        <ul>
            <li><a href=＂#＂>HTML</a></li>
            <li><a href=＂#＂>HTML5</a></li>
            <li><a href=＂#＂>XHTML</a></li>
            <li><a href=＂#＂>CSS</a></li>
            <li><a href=＂#＂>CSS3</a></li>
            <li><a href=＂#＂>TCP/IP</a></li>
        </ul>
        <h3>浏览器脚本</h3>
        <ul>
            <li><a href=＂#＂>JavaScript</a></li>
            <li><a href=＂#＂>HTML DOM</a></li>
            <li><a href=＂#＂>jQuery</a></li>
            <li><a href=＂#＂>jQuery Mobile</a></li>
            <li><a href=＂#＂>AJAX</a></li>
            <li><a href=＂#＂>JSON</a></li>
            <li><a href=＂#＂>DHTML</a></li>
            <li><a href=＂#＂>E4X</a></li>
            <li><a href=＂#＂>WMLScript</a></li>
        </ul>
    </div>
</div>

在 main.css中添加左边列的对应样式，然后浏览页面。

#leftside{
    font-size:12px;
    width:178px;
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
    padding-top:10px;
}
#leftside h3{
    margin:10px 0 5px 8px;
}
#leftside ul{
    list-style-type:none;
}
#leftside a{
    text-decoration:none;
    color:#333;
    display:block;
    padding:5px 0 5px 15px;
}
#leftside a:hover{
    background-color:#999;
    color:#fff;
}

② 右边列的html代码。

<div class=＂col-3＂>
    <div id=＂rightside＂>
            <h3>参考手册</h3>
            <ul>
                  <li><a href=＂#＂>HTML/HTML5标签</a></li>
                  <li><a href=＂#＂>HTML颜色</a></li>
                  <li><a href=＂#＂>CSS 1,2,3</a></li>
                  <li><a href=＂#＂>JavaScript</a></li>
                  <li><a href=＂#＂>HTML DOM</a></li>
                  <li><a href=＂#＂>jQuery</a></li>
                  <li><a href=＂#＂>jQuery Mobile</a></li>
                  <li><a href=＂#＂>VBScript</a></li>
                  <li><a href=＂#＂>ASP</a></li>
                  <li><a href=＂#＂>ADO</a></li>
                  <li><a href=＂#＂>ASP.NET</a></li>
                  <li><a href=＂#＂>PHP 5.1</a></li>
                  <li><a href=＂#＂>XML DOM</a></li>
                  <li><a href=＂#＂>XSLT 1.0</a></li>
                  <li><a href=＂#＂>XPath 2.0</a></li>
                  <li><a href=＂#＂>XSL-FO</a></li>
                  <li><a href=＂#＂>WML 1.1</a></li>
                  <li><a href=＂#＂>W3C术语表</a></li>
              </ul>
      </div>
</div>

在 main.css中添加右边列的对应样式，然后浏览页面。

#rightside{
  font-size:12px;
  border-left:1px solid #ccc;
  border-right:1px solid #ccc;
  padding-top:10px;
}
#rightside h3{
  margin:10px 0 5px 8px;
}
#rightside ul{
  list-style-type:none;
  margin:0px;
}
#rightside a{
  text-decoration:none;
  color:#930;
  display:block;
  padding:5px 0 5px 15px;
}
#rightside a:hover{
  background-color:#C30;
  color:#fff;
}

③ 添加中间的内容。中间为3行，每行2列，这里分为3～9。为了方便，左边放图标，右边放文字。另外定义一个样式类.main，应用在中间列元素上。

<div class=＂col-6 main＂>
    <div class=＂row＂>
        <div class=＂col-3＂>
            <img src=＂img/icon1.png＂>
        </div>
        <div class=＂col-9＂>
            <h2>完整的网站技术参考手册</h2>
            <p>我们的参考手册涵盖了网站技术的方方面面。</p>
            <p>其中包括W3C标准技术：HTML、CSS、XML。以及其他技术，诸如 Java……</p>
        </div>
    </div>
    <div class=＂row＂>
        <div class=＂col-3＂>
            <img src=＂img/icon1.png＂>
        </div>
        <div class=＂col-9＂>
            <h2>在线实例测试工具</h2>
            <p>在W3school，我们提供了上千个实例。</p>
            <p>通过使用我们的在线编辑器，你可以编辑这些实例，并对代码进行实验。</p>
        </div>
    </div>
    <div class=＂row＂>
        <div class=＂col-3＂>
            <img src=＂img/icon1.png＂>
        </div>
        <div class=＂col-9＂>
            <h2>快捷易懂的学习方式</h2>
            <p>一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。</p>
            <p>在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。</p>
        </div>
    </div>
</div>

中间内容的样式定义如下。

#maincontent{
  font-size:16px;
  padding:0 20px;
}
#maincontent h2{
  margin-top:20px;
  margin-bottom:10px;
}
#maincontent p{
  margin:10px 0;
}

（7）添加页脚行。

<div class=＂row＂>
    <div class=＂col-sm-12＂>
        <footer>
          <p>W3school提供的内容仅用于培训，但我们不保证内容的正确性。通过使用本站内容
随之而来的风险与本站无关。</p>
            <p>W3school 简体中文版的所有内容仅供测试，对任何法律问题及风险不承担任何
责任。</p></footer>
    </div>
</div>

页脚的样式定义如下。

footer {
  background-color:#eee;
  font-size:12px;
  text-align:center;
  padding:15px 0;
}
footer p{
  margin:2px;
  color:#666;
}

（8）美化页面。

① 我们发现图标行有背景，而且背景色和图标背景相同。为了页面的美观，给body元素加一个同颜色的背景。

body{
    background-color:#fdfcf8;
}

② 浏览页面会发现，左边栏和右边栏不等高。为了解决等高问题，在代码中，添加下列JavaScript的代码。

<script language=＂javascript＂>
  function alertHeight(){
      var divH1=document.getElementById(＂leftside＂);
      var divH2=document.getElementById(＂maincontent＂);
      var divH3=document.getElementById(＂rightside＂);
      var allHeight;
      if(divH1.clientHeight>divH2.clientHeight)
        allHeight=divH1.clientHeight;
      else
        allHeight=divH2.clientHeight;
      if(allHeight<divH3.clientHeight)
        allHeight=divH3.clientHeight;
      divH1.style.height=allHeight+＇px＇;
      divH2.style.height=allHeight+＇px＇;
      divH3.style.height=allHeight+＇px＇;
  }
  window.onload=alertHeight;
</script>

说明：本案例中布局用了栅格系统，其他界面效果都是用CSS代码实现。在后面章节中，有对应的导航栏组件、媒体对象组件、列表组件和一些工具类可以帮助读者快速实现所需要界面效果。

上一章目录下一章