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打交道,然而不少人都是在周而复始的写模板.样式和交 ...

随机推荐

mvc源码解读(20)-controller和view之查找view
很多时候在mvc项目中我们需要去扩展自己的视图引擎,大概看起来应该下面这个样子的: public class RazorEngineExpand : RazorViewEngine { private ...
Java传参那些事！
刚刚学习java传参的时候很纠结,也非常的不理解!课本上的“按值传递”和“按址传递”搞的自己是一头雾水,后来写的项目多了,自然就明白了! 现在写传参几乎就是条件反射一般——“秒成”,分享当初自己为此写 ...
打印web页面指定区域的三种方法
本文和大家分享一下web页面实现指定区域打印功能的三种方法,一起来看下吧. 第一种方法:使用CSS 定义一个.noprint的class,将不打印的内容放入这个class内. 代码如下: <s ...
Java 7 Fork/Join 并行计算框架概览
应用程序并行计算遇到的问题当硬件处理能力不能按摩尔定律垂直发展的时候,选择了水平发展.多核处理器已广泛应用,未来处理器的核心数将进一步发布,甚至达到上百上千的数量.而现在很多的应用程序在运行在多核 ...
装饰器模式(Decorator)
转自http://blog.csdn.net/hust_is_lcd/article/details/7884320 1.认识装饰器模式装饰模式能够实现动态的为对象添加功能,是从一个对象外部来给对象 ...
JavaEE基本了解
1. 为什么需要JavaEE 我们编写的JSP代码中,由于大量的显示代码和业务逻辑混淆在一起,彼此嵌套,不利于程序的维护和扩展.当业务需求发生变化的时候,对于程序员和美工都是一个很重的负担. 为了程 ...
jquery 上传空间uploadify使用笔记
基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个 ...
C# 等待另外一个窗体关闭，再进行主线程的代码
方法1 用Form类或其子类的showDialog方法. 比如你在form1里有一个按扭,然后你在Form1的点击事件里写上显示form2的代码: Form2 frm=new Form2(); frm ...
java类加载器学习2——自定义类加载器和父类委托机制带来的问题
一.自定义类加载器的一般步骤 Java的类加载器自从JDK1.2开始便引入了一条机制叫做父类委托机制.一个类需要被加载的时候,JVM先会调用他的父类加载器进行加载,父类调用父类的父类,一直到顶级类加载 ...
Java中调用参数是数组的存储过程
Java中调用参数是数组的存储过程 1. 存储过程以及类型定义如下: --The array in oracle CREATE OR REPLACE TYPE idArray AS TABLE OF ...

[Bootstrap] 5. Button and well