Week 2: Realising design principles in code

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 --------------

to set a container.
result:

result-1

Container class: used to wrap up the content.

Where can you go?

Bootstrap provide many components in http://getbootstrap.com/components/, we will start with Navbar:
1 - Navbars/导航栏

...

to create a Navbar

...

to wrap sth up, sothat you can set up differente funtionality, especially responsiv

• ...
• ...

unorderte list

the code:

  

  
Hello, welcome to my bootstrap site!
  
   


 
 

   

     
Home
     
Photos
   
 

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:

  

    Open
  
  
  

  
  

    

      
Home
      
My Photos
    
  
  

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

result: now you can click then and they will go to their own page, but the page is not going to change because they all have same content.

basic structure

Where am I?

Responsive grid

Bootstrap theme

Summary

---

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