全栈工程师成长记

编程重新定义人生

Bootstrap basic

Lift Off

An attractive, functioning website requires basic knowledge of structure, style, and behavior.

* HTML > Page Structure
* CSS > Element Styling
* JavaScript > Page Behavior

Bootstrap lets us skip writing CSS and JavaScript when starting out. We focus instead on HTML.

What Does The Framework Consist Of?

>css 
    bootstrap-theme.css
    bootstrap-theme.css.map 
    bootstrap-theme.min.css 
    bootstrap.css 
    bootstrap.css.map
    bootstrap.min.css 
>fonts 
    glyphicons-halflings-regular.eot 
    glyphicons-halflings-regular.svg 
    glyphicons-halflings-regular.ttf 
    glyphicons-halflings-regular.woff 
>js 
    bootstrap.js 
    bootstrap.min.js 
    npm.js 

Adding the Bootstrap Framework

<link href='css/bootstrap.css' rel='stylesheet'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script src='js/bootstrap.js'></script>

The container Class

Bootstrap’s container class will responsively add margins, center, and wrap our content.

<body>
  <div class='container'>
    <h1>Blasting Off With Bootstrap</h1>
    <h2>The Fastest Way to Space</h2>
    <button type='button'>Take the Tour</button>
    <button type='button'>Book Tickets Now</button>
    <h3>Book Today!</h3> <p>...</p>
    <h3>Go Anywhere</h3> <p>...</p>
    <h3>RocketBus&reg;</h3> <p>...</p>
  </div> 
</body> 

The container-fluid Class

Bootstrap’s container-fluid class allows for stretching if it is desired on larger screens.

... </div>
   <div class='container-fluid'>
    <h3>Book Today!</h3> <p>...</p>
    <h3>Go Anywhere</h3> <p>...</p>
    <h3>RocketBus&reg;</h3> <p>...</p>
</div>
</body>

Thinking In Grids

  • Our Site Wrapped in a .container
  • Rows are horizontal groupings of data
  • Columns are vertical groupings of data
  • Bootstrap gives us 12 columns to work with if we need them
  • Elements can span all columns in our grid
  • With 12 columns, you can use 6 to take up half the page
  • You probably won’t ever need 12 individual columns, but 4 is common enough
  • Wire framing is a great way to visualize and plan out our page.
  • Bootstrap uses .col-md-* classes for denoting the number of columns
  • Use a class of .col-md-12 to wrap areas of your page you want to take up the entire width.
  • Using one-third of the page, or 4 columns. 4 columns * 3 elements = 12 columns total.
  • Adding Rows using .row , The number of columns in each row adds up to 12.
  • Designing With Grids:A popular proportion for sites with grids is 9 columns + 3 columns
  • Adding a bit of space between columns can help them appear less cluttered
  • Don’t create empty columns. Bootstrap has a better way!
  • Empty Columns Using an Offset:The .col-md-offset-* class is used to add left padding for a given number of columns.
  • Adding Grids for Smaller Resolutions:Our featured items will have the same grid sizes in small and medium mode.
  • Extra Small Browser Sizes:Great for specifying the minimum width for elements. Also the layout used on many phones.
  • Adding Grids for Extra Small Screens:We could use the extra small grids, but there’s a better way.
  • Centering Features for Extra Small Screens

    <div class='col-sm-4 col-xs-10 col-xs-offset-1'>
    
  • Removing the Offset for Small Screens

    <div class='col-sm-4 col-xs-10 col-xs-offset-1 col-sm-offset-0'>
    
  • Hiding Elements using .hidden-*

     <div class='col-md-6 hidden-sm hidden-xs'>
    
  • You can hide elements in other sizes too: xs\md\sm\lg

  • Making Elements Visible using .visible-*

Typography

What is Typography?

“The art and technique of arranging type to make written language most appealing” - Wikipedia

Using the .lead Typography Class

Use .lead to make text stand out from the rest of the page.

<p class="lead">Make your way to space</p>

Centering Text

Bootstrap has a number of alignment classes for text.

  • Using the .text-* Typography Classes html <div class="row text-center">

Glyphicons

Bootstrap comes with 200 icons to use, named “glyphicons”.
glyphicons-halflings-regular.eot

Icon classes should only be used on elements that contain no text content and have no child elements.
Instead of using an <img>, we'll user an <i> for our icon.

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

The .glyphicon-briefcase class specifies which icon we should user.

Adding a Stylesheet

For styling beyond what Bootstrap offers, we’ll need to create a new css file to edit.

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

We'll set out styles in th main.css Stylesheet file.


Increasing the Icon Font Size

we want to style all icons under .features. All icons under .feature will be large

css/main.css

.features .glyphicon {
    font-size: 32px;
}

index.html

<div class='row features'>
  <div class='...'> 
    <i class='glyphicon glyphicon-briefcase'></i> 
    <h3 class='text-center'>Book Today!</h3>
   </div> 
...  
</div>

Changing the Icon Color

css/main.css

.features .glyphicon {
    font-size: 32px;
    color: red;
}

Unstyled Lists

Bootstrap provides some classes to make working with lists easier.

Use a bootstrap list class .list-unstyled to romove the list bullets.

<div class='...'>
    <h4>Links</h4>
    <ul class='list-unstyled'>
      <li><a href='index.html'>Home</a></li> 
      <li><a href='about.html'>About</a></li>
      <li><a href='contact.html'>Contact</a></li>
    </ul>
</div>

Use inline .list-inline for horizontal lists.

Enough CSS to be Danger

Adding a Dash of Style

Use the .well class to give the element a gray background and a rounded gray border.
index.html

<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...</p>
    <button type='button'>Take the Tour</button>
    <button type='button'>Book Tickets Now</button>
</div>
  <div class='col-md-6'>...</div> </div> 

Add or remove some padding .well-lg .well-sm from your well by adding another class.

Styling Our Buttons

Our buttons look different in every browser. Let’s use Bootstrap to standardize them. index.html

  • Use .btn add a Bootstrap class to tweak the style.
<button type='button' class='btn'>Take the Tour</button> 
  • Change the size of bottons by adding another class .btn-xs .btn-sm .btn-lg .
<button type='button' class='btn btn-lg'>Take the Tour</button> 
  • Changing Button Color
<button type='button' class='btn btn-lg btn-primary'>Take the Tour</button> 

all the bottons color:
.btn-default .btn-primary .btn-success

.btn-info .btn-danger .btn-warning

Navigating Navigation

Removing Grids

Navigation won't be dependent on grids.
Before

<div class='container'>  
    <div class='row'> 
        <div class='col-md-12'> 
          <h1>Homepage</h1> 
        </div>
    </div> 
</div>

After

<div class='container'>  
    <h1>Homepage</h1> 
</div>

Adding Links

Add some links to other pages.

<div class='container'>
    <h1>Homepage</h1> 
    <ul class='list-unstyled'>
      <li><a href='index.html'>Home</a></li> 
      <li><a href='about.html'>About</a></li>
      <li><a href='contact.html'>Contact</a></li>
    </ul>
</div>

Using .navbar-brand

Converting H1. The .navbar-brand class will float the text left, increase the font size and more.

<div class='container'> 
  <a href='/' class='navbar-brand'>
    Homepage
  </a>  
  <ul>...</ul>
</div>

Using .nav

  • .nav is like .glyphicon or .btn -- it's used with other classes. In ul class, .nav adds padding for all of the navigation links.
<div class='container'> 
  <a href='/' class='navbar-brand'>
    Homepage
  </a>  
  <ul class='nav'>...</ul>
</div>
  • The .nav class with modifiers can be used for a main navigation, or a subnav on your page.
<ul class='nav navbar-nav navbar-right'>...</ul>

Our navigation floats to the right, and .navbar-nav makes them inline. .navbar-nav add a hover state to our links.

.nav-pills and .nav-tabs makes different style.

<ul class='nav nav-pills'>...</ul>
<ul class='nav nav-tabs'>...</ul>

Using .navbar

navbar navbar-default well changes link colors in the header and adds padding.

 <div class='container navbar navbar-default'> 

.navbar-inverseuse black color.

Navbar in a container

Navbat look too similar to our .well. How can we fix that?

Nesting a .container within a .navbar keeps our links centered, but adds a background to it.

<div class='navbar navbar-default'>
    <div class='container'> 
    ...
    </div>
</div>    

.navbar-default adds the backgroud color across the entire page.

Positioning our Navigation

The .navbar has some modifications available that allow flexibility in navbar position and visibility.

Use .navbar-static-top and .navbar-static-bottom
. Navbar will scroll with the page.

Use .navbar-fixed-top and .navbar-fixed-bottom
. Fixed navbar don't scroll with the page -- they stay at the top.

An Alternate Navigation

If we used .navbar-fixed-top, the navigation appears at the top of the page, even when we scroll.

We could need to add `body { padding-top: 70px; } to couuteract this.