Introduction

In this chapter, we will use code to implements those theories we talked about in last week.
By the end of this module, you will be able to:
◇ Set up a basic Bootstrap site
◇ Build Bootstrap navbars
◇ Build collapsible, responsive navbar using titles and breadcrumb trails
◇ Build multiple layouts in one with a responsive grid
◇ Install Bootstrap themes

Basic bootstrap setup

Bootstrap Tutorial

1. download bootstrap file--------------
download the first one:

download

2. the structure of bootstrap--------------

structure

◇ Two different .js file: bootstrap.js VS bootstrap.min.js.
they have actually same content, but only, bootstrap.js is readable, but the second one is smaller! -> minification!

Minification: So minification is a way of taking all
the different files, like the CSS and the JavaScript files especially, and squashing them down so that they take up a minimum possible amount of date, so your page will loads as quickly as possible.
-> We use the readable version when we do testing or debugging, but we use min. version when we publish the web.

◇ index.html: show us what we need to get bootstrap up and running.
your can find this code in the bootstrap page which you just downloaded bootstrap, with a name "Basic template". -> The Commented codes are using for graceful degradation.

graceful degradation: being this idea of making sure your website doesn't just completely fail if someone has a slightly deficient web browser that
doesn't have the full functionality.
-> try to open the index.html with browser
-> it's empty of course.

3. Start using bootstrap --------------
<div class="container"></div> to set a container.
result:

result-1

Where can you go?

Bootstrap provide many components in http://getbootstrap.com/components/, we will start with Navbar:
1 - Navbars/导航栏
<nav> ... </nav> to create a Navbar
<div> ... </div> to wrap sth up, sothat you can set up differente funtionality, especially responsiv
<ul> <li>...</li> <li>...</li> </ul> unorderte list

the code:

<!--test 1: try head 1-->
  <div class="container">
  <h1>Hello, welcome to my bootstrap site!</h1>
  </div>   

<!--test 2: Navbar-->
<nav class="navbar navbar-default"> 
 <div class="container-fluid">
   <ul class="nav navbar-nav">
     <li class="active"><a class="navbar-brand" href="#">Home</a></li>
     <li><a class="navbar-brand" href="#">Photos</a></li>
   </ul>
 </div>
</nav>

result:

result-2

2 - Collapsible navbars/可折叠的导航栏
关于button属性的解说：
type="button" 明确button是个button.
class="navbar-toggle collapsed" sth should show when the navbar is collapsed.
data-toggle="collapse" : instruction to the JavaScript library, that this button does sth. special(picked up by bootstrap.js)
data-target="#main_navbar": the thing that is going to collapse is called main_navbar
aria-expanded="false": implying that is not going to be initially
code:

<!--button-->
  <div class="navbar-header">
    <button 
    type="button" 
    class="navbar-toggle collapsed"
    data-toggle="collapse"
    data-target="#main_navbar"
    aria-expanded="false">Open</button>
  </div>  
  <!--/button-->

  <!--nav show after the button-->
  <div 
      class="collapse navbar-collapse" 
      id="main_navbar">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">My Photos</a></li>
    </ul>
  </div>
  <!--/nav show after the button-->

result:

result3

☆ Tipp： commented and indented code is easier to understand

Building out the site

1-build basic site stucture
duplicate the index.html and rename then:

duplicate & rename

basic structure

Where am I?

Responsive grid

Bootstrap theme

Summary

vice versa 反之亦然
prefix 前缀
dying out 凋零
boilerplate 样板