# 全栈工程师成长记

## Bootstrap basic

### Lift Off

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

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

#### The container Class

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

#### The container-fluid Class

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

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

• Removing the Offset for Small Screens

• Hiding Elements using .hidden-*

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

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

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

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

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

index.html

css/main.css

#### Unstyled Lists

Bootstrap provides some classes to make working with lists easier.

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

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

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.
• Change the size of bottons by adding another class .btn-xs .btn-sm .btn-lg .
• Changing Button Color

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

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

#### Removing Grids

Navigation won't be dependent on grids.
Before

After

#### Using .navbar-brand

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

#### 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.
• The .nav class with modifiers can be used for a main navigation, or a subnav on your page.

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.

#### Using .navbar

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

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

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

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.