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