FSWD_BootStrap

Course Overview

响应式设计

适应于各种大小的屏幕。

grid system

CSS

Button

Form

Tables

panel

well

image

media

alert

progress bar

JS

review css

BS的CSS是重叠递进的。

js and jquery

写js code是很繁琐的，因此构建在上面的jquery以及bootstrap方便了用户使用。

use of jquery

引入js文件

使用jquery

tabs and tabbed navigation

Design a web page to use tabbed navigation for organizing the content
Use tab panes and organize the content into the panes
Facilitate navigation among the tab panes using the tabbed navigation elements

hide and seek

Use the collapse plugin to hide/reveal content
Construct the accordion using panels and panel-group class
Use the scrollspy to reflect the current position of the scroll
Employ the affix plugin to fix the position of the nav element after an initial scroll

scrollspy and affix

Design an accordion using the collapse plugin together with the panel component and panel-group class
Use a scrollspy to highlight the current scroll position in a nav
Use the affix plugin together with the scrollspy on the side nav component

Tooltips, Popovers and Modals

Set up a tooltip to be displayed when the user hovers over an area of the page
Enable popovers when the user clicks on a link or button
Reveal and hide modals when the user clicks on a link or button

carousel

Use a carousel component in your web page
Configure various aspects of the carousel
Add controls to the carousel to manually control it

Node.js

Node js runtime

Node.js可以使JS用在后端，所以js可以前后端都用。

NPM

CSS preprocessor

CSS有很多正常编程语言可以实现的功能实现不了，这就是preprocessor的来源。

example

less

sass

Web tools

developed using js
Understand the need for web tools
Make use of Bower to automatically fetch Web packages and assets.

好处是只需要更改json file，而不需要包含所有的依赖。