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

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

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

$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.大标题与小标题

• 进入正文区域（在
  内部），首先添加大标题与小标题，在Bootstrap里有专门的类

  。
• 标签可以让里面的文本大小为父元素的 85%，比如下面的代码中， 里面的文本大小，是

  里面其他文本大小的 85%。

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

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

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

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

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

• 高亮
• 删除
• 着重
• 插入的文本

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

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

$case.html-5.居中对齐

在正文中插入一张图片，默认是左对齐的。我们将它用一个

包裹起来，这样它内部的所有元素都居中对齐了。

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

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

如果这篇文章是和程序开发有关的，很有可能需要显示一段代码，为了和其他普通文本区分开来，我们要把代码用 或者

包裹起来，前者是行内代码，后者是块代码 
 
 
  
 
   
更多可以使用的代码样式，请参看文档http://v3.bootcss.com/css/#code
 
  
 
  
$case.html-7.顶和踩——按钮的使用与外观
 
  
在文章的最后，我们可以让用户表达下自己的看法，是喜欢还是讨厌。这里添加两个按钮，一个是“顶”，一个是“踩”，并且用不同的颜色来区分。效果如下： 
 
 
  
 
   
为了让按钮显示不同的颜色来代表不同的含义，我们把btn-default修改成其他的类名。比如 
 btn-danger表示“危险”，在外观上看来就是红色按钮；btn-info表示“信息”，是一个浅蓝色的按钮。
 
  
 
  
 
  
<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，还可以调整按钮的大小
 
  
 
  
 
 。
 
  
<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.右侧——列表组件
 
  
我们最后来处理右侧的区域，这里有一张图片，下方是一个“相关内容”的列表，直接用
列表元素会在每个列表项前面显示一个圆点，Bootstrap里有个作用于
的list-unstyled类，可以隐藏这个圆点。 
 
 
  
<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