FSWD_BootStrap

• Course Overview
  • 响应式设计
  • grid system
• CSS
  • Button
  • Form
  • Tables
  • panel
  • well
  • image
  • media
  • alert
  • progress bar
• JS
  • review css
  • js and jquery
  • use of jquery
  • tabs and tabbed navigation
  • hide and seek
  • scrollspy and affix
  • Tooltips Popovers and Modals
  • carousel
• Nodejs
  • NPM
• CSS preprocessor
  • example
  • less
  • sass
• Web tools

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，而不需要包含所有的依赖。