Element Identification

There are a number of classes in Bootstrap that help add prominence to a page by adding a background color and a rounded border like the below example.

Styling for this element is due to what Bootstrap class?

container
well
btn
lead

Choose a Well

Which of the following is NOT a Bootstrap class we could use to style well padding?

well
well-sm
well-md
well-lg

Button Element

It's a best practice to use a tags for all buttons, including Bootstrap's buttons, because browsers expect them to be clicked.

true
false

Button Color

Bootstrap has some very striking button colors that can be used by adding an additional class to any button. We really want the following button to stand out without conveying contextual information and have it styled appropriately.

The button class used to add color in this case is: btn-primary

Check out the following button element. It's a destructive action, and we've given it a class to indicate that clicking on it will perform a potentially negative action. What Bootstrap class is being used to set its color?

The button class used to add this color is: btn-danger

Comparing Transport Systems

Like any main sales page, our site needs a good way for travelers to compare the features and prices between the different transport systems. The HTML for this was added, but the Bootstrap classes to make it look nice still need to be included. Follow the tasks to have the Transporter, Space Elevator, and RocketBus sections stand out.

<!DOCTYPE html>

<html>

  <head>

    <title>Blasting Off With Bootstrap</title>

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

    <link href='css/main.css' rel='stylesheet'>

  </head>

  <body>

    <div class='container'>

      <div class='row'>

        <div class='col-md-12'>

          <h1>Blasting Off With Bootstrap</h1>

        </div>

      </div>

      <div class='row well well-lg'>

        <div class='col-md-6'>

          <h2>The Fastest Way to Space</h2>

          <p class='lead'>Make your way to space in the comfort of your own rocket, elevator or transporter.</p>

          <button type='button' class='btn btn-lg btn-default'>Take the Tour</button>

          <button type='button' class='btn btn-lg btn-primary'>Book Tickets Now</button>

        </div>

        <div class='col-md-6 visible-md visible-lg'>

          <img src='images/img-header.jpg' alt='Blast off with Bootstrap' />

        </div>

      </div>

      <div class='row text-center features'>

        <div class='col-sm-4 col-xs-10 col-xs-offset-1 col-sm-offset-0'>

          <i class='glyphicon glyphicon-briefcase'></i>

          <h3>Book Today!</h3>

          <p>Even if you're traveling tomorrow, you can still get tickets today. We have a number of conveniently located ports around the globe to service everyone.</p>

        </div>

        <div class='col-sm-4 col-xs-6'>

          <i class='glyphicon glyphicon-random'></i>

          <h3>Go Anywhere</h3>

          <p>If you need to get to space today, why not try out a transporter? Despite the claims, there are have been no deaths in the last 6 weeks!</p>

        </div>

        <div class='col-sm-4 col-xs-6'>

          <i class='glyphicon glyphicon-send'></i>

          <h3>RocketBus&reg;</h3>

          <p>For cheapest fares, catch the next RocketBus&reg; to the stars. Cheaper on your wallet, and easiest way to make friends.</p>

        </div>

      </div>

    </div>

    <div class='quote'>

      <div class='container'>

        <blockquote>

          <p>Any sufficiently advanced technology is indistinguishable from magic.</p>

          <footer>Arthur C. Clarke in <cite title="Source Title">Profiles of the Future</cite></footer>

        </blockquote>

      </div>

    </div>

    <div class='container transport-systems'>

      <div class='row'>

        <div class='col-md-10 col-md-offset-1'>

          <h2>Our Transport Systems</h2>

          <p>Learn more about our transport systems to find out which one is right for you. Pick out the mode of transport that works for your budget and risk level.</p>

        </div>

      </div>

      <div class='row'>

        <div class='transporter col-md-3 col-md-offset-1'>

          <h3>Transporter</h3>

          <ul>

            <li>8 second travel time</li>

            <li>Chance of death only 1 in 7,593</li>

            <li>Low price of only $15.99!</li>

          </ul>

          <p><button><i class='glyphicon glyphicon-transfer'></i> Beam Me Up!</button></p>

        </div>

        <div class='space-elevator col-md-3 col-md-offset-1'>

          <h3>Space Elevator</h3>

          <ul>

            <li>8 hour scenic ride</li>

            <li>Only 1 horrific death per 12,456</li>

            <li>Only $45.99 if you book today!</li>

          </ul>

          <p><button><i class='glyphicon glyphicon-sort'></i> Board the Elevator!</button></p>

        </div>

        <div class='rocketbus col-md-3 col-md-offset-1'>

          <h3>RocketBus</h3>

          <ul>

            <li>8 minute scenic ride</li>

            <li>Plunging death rate of under 1/100k</li>

            <li>$74.99 lets you blast off today!</li>

          </ul>

          <p><button><i class='glyphicon glyphicon-plane'></i> Blast Off!</button></p>

        </div>

      </div>

    </div>

    <div class='footer'>

      <div class='container'>

        <div class='row'>

          <div class='col-md-3 col-sm-4 col-xs-6'>

            <h4>Who We Are</h4>

            <p><i>Blasting Off With Bootstrap</i> is the fastest way to space. <a href='tickets.html'>Book your ticket today</a>!</p>

            <p><a href='about.html'>More About Us <i class='glyphicon glyphicon-arrow-right'></i></a></p>

          </div>

          <div class='col-md-offset-1 col-sm-2 col-xs-6'>

            <h4>Links</h4>

            <ul class='list-unstyled'>

              <li><a href='/'>Home</a></li>

              <li><a href='tickets.html'>Tickets</a></li>

              <li><a href='stations.html'>Stations</a></li>

            </ul>

          </div>

          <div class='clearfix visible-xs'></div>

          <div class='col-sm-2 col-xs-6'>

            <h4>Stay in Touch</h4>

            <ul class='list-unstyled'>

              <li><a href='about.html'>About</a></li>

              <li><a href='contact.html'>Contact Us</a></li>

              <li><a href='/blog'>Blog</a></li>

              <li><a href='http://twitter.com/codeschool'>Twitter</a></li>

              <li><a href='http://facebook.com/codeschool'>Facebook</a></li>

            </ul>

          </div>

          <div class='col-md-3 col-md-offset-1 col-sm-4 col-xs-6'>

            <h4>Contact Us</h4>

            <ul class='list-unstyled'>

              <li><i class='glyphicon glyphicon-globe'></i> Orlando, FL</li>

              <li><i class='glyphicon glyphicon-phone'></i> 1-555-blast-off</li>

              <li><i class='glyphicon glyphicon-envelope'></i> <a href='mailto:blastingoff@codeschool.com'>blastingoff@codeschool.com</a></li>

            </ul>

            <p>Blasting Off With Bootstrap &copy;2214.</p>

          </div>

        </div>

      </div>

    </div>

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>

    <script src='js/bootstrap.min.js'></script>

  </body>

</html>

It doesn't make sense to left align our 3 transport systems. Center the text in all cells within that .row.

<div class='row text-center'>

        <div class='transporter col-md-3 col-md-offset-1'>

          <h3>Transporter</h3>

          <ul>

            <li>8 second travel time</li>

            <li>Chance of death only 1 in 7,593</li>

            <li>Low price of only $15.99!</li>

          </ul>

          <p><button><i class='glyphicon glyphicon-transfer'></i> Beam Me Up!</button></p>

        </div>

Like the lists in our footer, we don't need bullet icons next to our lists here either. Remove them from each of the lists in the transport systems section.

<ul class="list-unstyled">

Each of the three transport systems could stand out a bit more. Add a class to eachdiv that would change the background color and add a rounded border to each. Within this area, include the title (like "Transporter") and the list of items.

        <div class='transporter col-md-3 col-md-offset-1 well'>

          <h3>Transporter</h3>

          <ul class="list-unstyled">

            <li>8 second travel time</li>

            <li>Chance of death only 1 in 7,593</li>

            <li>Low price of only $15.99!</li>

          </ul>

          <p><button><i class='glyphicon glyphicon-transfer'></i> Beam Me Up!</button></p>

        </div>

Our unstyled buttons are painful to look at. Add Bootstrap classes to the Transporterbutton to have it use the Bootstrap button styling. Also change the color to be similar to our footer link colors.

If you need a refresher on Bootstrap colors, checkout the Bootstrap Button Documentation.

<button class="btn btn-info"><i class='glyphicon glyphicon-transfer'></i> Beam Me Up!</button>

-----------------

Links:http://getbootstrap.com/css/#buttons

[Bootstrap] 5. Button and well的更多相关文章

Bootstrap风格button
一直非常喜欢Bootstrap的按钮风格,仿照Bootstrap做了一套按钮.在ie6/7/8/9/10/11.chrome.firefox下能正常使用. ie6/7/8不支持css3的样式.按钮在这 ...
Bootstrap 按钮(Button)插件加载状态
通过按钮(Button)插件,您可以添加进一些交互.比如控制按钮的状态.或者为其它组件(工具栏)创建按钮组. 加载状态如需向按钮添加加载状态,只需要简单地向 button 元素添加 data-loa ...
Bootstrap之Button.js
查看Button.js的源代码 +function ($) { 'use strict'; // BUTTON PUBLIC CLASS DEFINITION // ================= ...
bootstrap的button按钮点击之后会有蓝色边框怎么解决?
.btn:focus,.btn:active:focus, .btn.active:focus,.btn.focus, .btn:active.focus,.btn.active.focus { ou ...
基于Bootstrap里面的Button dropdown打造自定义select
最近工作非常的忙,在对一个系统进行改版.项目后台是MVC1.0开发的,但是前端部分已经改过几个版本,而已之前的设计师很强大,又做设计又做前端开发.而已很时尚和前沿,使用了一直都很热门的Bootstra ...
bootstrap总结
bootstrap在reset.css文件中设置margin为0,因此其他的标签需要重新设计margin. 1.h <h>标签和普通使用方法一样. 定义了.h1~.h6六个类名,样式和标题 ...
bootstrap加深
1.安装: bootstrap中文网:http://www.bootcss.com/ bootstrap.css样式:http://v3.bootcss.com/css/#tables class=' ...
Bootstrap之BootstrapDialog
Make use of Bootstrap's modal more monkey-friendly. 参考地址:http://nakupanda.github.io/bootstrap3-dialo ...
BootStrap 最佳资源合集(转)
witter BootStrap是一款优秀的前端的框架,称得上是前端的一个框架利器.Web前端开发者每天都在与HTML.CSS.JavaScript打交道,然而不少人都是在周而复始的写模板.样式和交 ...

随机推荐

[原]Unity3D深入浅出 - 认识开发环境中的自带的Package资源包
Character Controller:角色控制器 Glass Refraction(pro only):玻璃反射资源包 Image Effects :图像效果资源包 Light Cookies:光 ...
使用powerdesigner 画图的详细说明
一.概念数据模型概述数据模型是现实世界中数据特征的抽象.数据模型应该满足三个方面的要求: 1)能够比较真实地模拟现实世界 2)容易为人所理解 3)便于计算机实现概念数据模型也称信息模型,它以实体- ...
多线程程序设计学习（12）Thread-soecific storage pattern
Thread-Specific-Storage[线程保管箱] 一:Thread-Specific Storage的参与者--->记录日志的线程(ClientThread)--->负责获取不 ...
mkimage的-a 和 –c参数和内核引导
目录一.mkimage工具简介二.-a参数与-e参数和内核引导的关系三.实例测试 3.1 -a参数与-e参数相同,可以将内核下载到SDRAM的任何地址,然后从这启动 3.2 -a参数与-e参数不同, ...
CF 560e Gerald and Giant Chess
题意:在h×w的棋盘中从左上角走到右下角,只能向右或向下走,有n个点不可以经过,一共有多少种方案. 解法:dp.先对点按横坐标排序(横坐标相等按纵坐标,也可以反过来)dp[i]表示不经过其他非法点走到 ...
关于SQL中的Update语句
今天在SQL数据库操作时需要将一张表中的数据Update到另一张表中去, 可是用我以往的写法确怎么也不能成功.代码如下: update table1 a set a.Col1=b.Col2 from ...
BinaryReader和BinaryWriter的leaveOpen参数 z
在.NET 4.5后,微软为BinaryWriter和BinaryReader类型的构造函数中加入了leaveOpen参数,当该参数为true后,BinaryReader或者BinaryWriter关 ...
关于java环境配置的问题
在以前刚开始接触Java环境配置问题的时候,配置了一大串的字符串,所有的路径全部在一个path变量里面,特别冗杂. 由于这两天重新再装了一个版本的JDK结果出现毛病了,就只有重新配置该环境变量,结果又 ...
HDU5791-－Two （DP）
题意:两个数列a,b,求相同的子序列有多少对,内容相同位置不同也算不同. 题解:dp[i][j]表示a数列前i个数个 b数列前j个数有多少对递推方程: dp[i][j] = dp[i-1][j-1 ...
SQL2008-显示表大小行数
select object_name(id) tablename,8*reserved/1024 reserved,rtrim(8*dpages/1024)+'Mb' used,8*(reserved ...

[Bootstrap] 5. Button and well