Bootstrap3.0 learning round 15 (large screen introduction, page title, thumbnail, warning box, Well)_html/css_WEB-ITnose

Foreword

Before reading, you can also check it out in the Bootstrap 3.0 introductory learning series navigation http://www.cnblogs.com/aehyok/p/3404867.html

This article mainly explains the following contents

1. Large screen introduction

2. Page title

3. Thumbnail

4. Alert box

5. Well

6. Summary

Large screen introduction

Lightweight, flexible optional components, expand the entire perspective, show you Key content on the site. To make the large screen presentation the width of the screen, don't include it in the .container.

<div class="jumbotron">  <h1>Hello, world!</h1>  <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>  <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p></div

If you need to make the jumbotron take up the full width and remove the rounded corners, just put it outside all .containers and Add a .container inside it.

<div class="jumbotron">    <div class="container">      <h1>Hello, world!</h1>      <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>      <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>    </div></div>

The two effects are similar, but there are differences.

Page Title

A simple h1 style that can properly space out and separate chapters on the page. Like other components, it can use h1's default small element (with some extra styling added).

<div class="page-header">  <h1>Example page header <small>Subtext for header</small></h1></div>

Thumbnail

Use the thumbnail component to extend Bootstrap’s grid system to simply display grid-style images. Video, text, etc.

Default case

Boostrap's default thumbnail design requires only minimal markup to display linked images.

<div class="row">  <div class="col-sm-6 col-md-3">    <a href="#" class="thumbnail">      <img src="http://placehold.it/600x460/78EB09/FFEB09/&text=Hello World" alt="...">    </a>  </div>    <div class="col-sm-6 col-md-3">    <a href="#" class="thumbnail">      <img src="http://placehold.it/600x460/78EB09/FFEB09/&text=Hello World" alt="...">    </a>  </div>    <div class="col-sm-6 col-md-3">    <a href="#" class="thumbnail">      <img src="http://placehold.it/600x460/78EB09/FFEB09/&text=Hello World" alt="...">    </a>  </div>    <div class="col-sm-6 col-md-3">    <a href="#" class="thumbnail">      <img src="http://placehold.it/600x460/78EB09/FFEB09/&text=Hello World" alt="...">    </a>  </div></div>

When the page is zoomed to a certain extent it will become

Customize content

with a little extra Tags can be used to add any kind of HTML content like titles, paragraphs or buttons to thumbnails.

<div class="row">  <div class="col-sm-6 col-md-4">    <div class="thumbnail">      <img src="http://placehold.it/300x200/78EB09/FFEB09/&text=Hello World" alt="...">      <div class="caption">        <h3>Thumbnail label</h3>        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>      </div>    </div>  </div>  <div class="col-sm-6 col-md-4">    <div class="thumbnail">      <img src="http://placehold.it/300x200/78EB09/FFEB09/&text=Hello World" alt="...">      <div class="caption">        <h3>Thumbnail label</h3>        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>      </div>    </div>  </div>  <div class="col-sm-6 col-md-4">    <div class="thumbnail">      <img src="http://placehold.it/300x200/78EB09/FFEB09/&text=Hello World" alt="...">      <div class="caption">        <h3>Thumbnail label</h3>        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>      </div>    </div>  </div></div>

Alert box

Provides a small number of available and flexible feedback messages for typical user actions.

Example

To get a basic warning message, put any text and optional close button into .alert and four meaningful classes (e.g., .alert-success).

No default class

Alert box has no default class, only base class and modified class. The default gray warning box doesn't mean much. So you want to use a content class. Choose from Success, Message, Warning or Danger.

    <div class="alert alert-success">Well done! You successfully read this important alert message.</div>    <div class="alert alert-info">Well done! You successfully read this important alert message.</div>    <div class="alert alert-warning">Well done! You successfully read this important alert message.</div>    <div class="alert alert-danger">Well done! You successfully read this important alert message.</div>

Dismissable alert box

can use an optional .alert-dismissable and close button.

    <div class="alert alert-warning alert-dismissable">      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>      <strong>Warning!</strong> Best check yo self, you're not looking too good.    </div>

Ensure correct behavior on all devices

Be sure to use bb9345e55eb71822850ff156dfde57c8 for the data-dismiss="alert" attribute.

Links in alert boxes

Using the .alert-link tool class, you can quickly provide matching colors in any alert box.

    <div class="alert alert-success">Well done!         <a href="#" class="alert-link">You successfully read this important alert message.</a></div>    <div class="alert alert-info">Well done!         <a href="#" class="alert-link">You successfully read this important alert message.</a></div>    <div class="alert alert-warning">Well done!         <a href="#" class="alert-link">You successfully read this important alert message.</a></div>    <div class="alert alert-danger">Well done!        <a href="#" class="alert-link">You successfully read this important alert message.</a></div>

Well

Default effect

Use Well on an element and it can be inset simple effect.

 <div class="well">Look, I'm in a well!</div>

Optional classes

Use these two optional modification classes to control padding and rounding.

<div class="well well-lg">...</div>

<div class="well well-sm">...</div> 

Summary

Through the study of this article, continue to have an in-depth understanding of other components of Bootstrap Component.

This article has been updated to BootStrap3.0 introductory learning series navigation http://www.cnblogs.com/aehyok/p/3404867.html