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

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

WBOY

Release： 2016-06-24 12:34:47

Original

1364 people have browsed it

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

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

Ensure correct behavior on all devices

Be sure to use