[Bootstrap]从入门到实战_客户案例详情页开发（三）

$客户案例详情页(case.html)

新建一个文件case.html，客户案例详情页实际上和平时常见的 “新闻内容页”、“产品介绍页”非常类似，我们这里先做个简化版。最终效果如下：
case

$case.html-1.布局

把页面分成左右两栏，左边是正文区域，右边是相关信息，通过栅格系统来布局可以很容易实现。

<div class="container">
    <div class="row">
     <div class="col-md-9">
       <!--正文-->
     </div>
     <div class="col-md-3">
        <!--相关信息-->
     </div>
    </div>
</div>

$case.html-2.大标题与小标题

进入正文区域（在 <div class="col-md-9">内部），首先添加大标题与小标题，在Bootstrap里有专门的类<div class="page-header">。
<small>标签可以让里面的文本大小为父元素的 85%，比如下面的代码中， <small>里面的文本大小，是 <h1>里面其他文本大小的 85%。

title

<div class="page-header">
   <h1>一课上手<small>一个专注实践类课程的平台</small</h1>
</div>

$case.html-3.内容摘要——使用“引用”

yiyong

<blockquote>
  <p>我们致力于把真实的经验和实战带给学员，也希望学员能通过老师分享的经验和实战把学到的东西快速上手。术业专攻，一课上手。</p>
</blockquote>

$case.html-4.在正文内容区域使用各种文本效果

除了平时常用的<b>（加粗）、<i>（斜体）、<u>（删除）等，还可以使用这几个更“语义化”的 HTML5 标签。

高亮 <mark></mark>
删除 <del></del>
着重 <strong></strong>
插入的文本<ins></ins>

neirogn

<p>
     <strong>程序员修炼之道</strong>
 </p>
 <p>
<mark>“衣带渐宽终不悔，为伊消得人憔悴”</mark>，编程大约有三个境界，新手、高手和<del>高不成低不就的中手</del>，适合新手的教程很多，指导中手的教程却很少；没有几十万行代码的锤炼或者长期在一个高手团队里打磨切磋，中手需要在这个层次“众里寻他千百度”，才能“蓦然回首”。 <ins>我们偏好实践，以正确的原则指导正确的行动</ins>
 </p>

另有几种文本样式不太常见，请自行阅读文档http://v3.bootcss.com/css/#type-inline-text

$case.html-5.居中对齐

在正文中插入一张图片，默认是左对齐的。我们将它用一个<div class="text-center">包裹起来，这样它内部的所有元素都居中对齐了。

<p class="text-center">
     <img src="../assets/screenshot_1.jpg" class="img-thumbnail" alt="">
 </p>

$case.html-6.显示“代码”

如果这篇文章是和程序开发有关的，很有可能需要显示一段代码，为了和其他普通文本区分开来，我们要把代码用 <code>或者<pre>包裹起来，前者是行内代码，后者是块代码
code

更多可以使用的代码样式，请参看文档http://v3.bootcss.com/css/#code

$case.html-7.顶和踩——按钮的使用与外观

在文章的最后，我们可以让用户表达下自己的看法，是喜欢还是讨厌。这里添加两个按钮，一个是“顶”，一个是“踩”，并且用不同的颜色来区分。效果如下：
dibu

为了让按钮显示不同的颜色来代表不同的含义，我们把btn-default修改成其他的类名。比如
btn-danger表示“危险”，在外观上看来就是红色按钮；btn-info表示“信息”，是一个浅蓝色的按钮。

anniu

<button class="btn btn-primary">按钮</button>
<button class="btn btn-success">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-danger">按钮</button>
<button class="btn btn-warning">按钮</button>
<button class="btn btn-link">按钮</button>

通过添加btn-lg、btn-xs等 class，还可以调整按钮的大小

anniu2
。

<button class="btn btn-primary btn-xs">最小的按钮</button>
<button class="btn btn-primary btn-sm">小按钮</button>
<button class="btn btn-primary">普通大小按钮</button>
<button class="btn btn-primary btn-lg">加大按钮</button>

更多按钮的用法，可以在这里查看http://v3.bootcss.com/css/#buttons

知道如何灵活使用按钮组件后，回到我们的案例，添加两个在页面中居中的按钮，一个红色、一个蓝色。

<p class="text-center">
   <button class="btn btn-primary">顶</button>
    <button class="btn btn-danger">踩</button>
</p>

$case.html-8.右侧——列表组件

我们最后来处理右侧的区域，这里有一张图片，下方是一个“相关内容”的列表，直接用<ul><li>列表元素会在每个列表项前面显示一个圆点，Bootstrap里有个作用于<ul>的list-unstyled类，可以隐藏这个圆点。
pro

<div class="col-md-3">
 <p>
     <img src="../assets/case_1.jpg" alt="..." class="img-circle">
 </p>
 <h3>个人简介</h3>
 <ul class="list-unstyled">
     <li><a href="">北京市奇点信息技术有限公司</a></li>
     <li><a href="">深圳市腾讯计算机系统</a></li>
     <li><a href="">北京市百度互联网计算有限公司</a></li>
     <li><a href="">杭州市阿里巴巴集团</a></li>
 </ul>
</div>

客户案例详情页页面，就介绍到这了，加我Q交流：1420536133