声明:
我们写样式,总想要自己写一套公共的样式,来方便我们行事,因为自己写的干净,用框架总感觉有一些没用到的样式在堆着,不符合我们的观念,然而我们没必要纠结这些,我们使用框架会有一些好处,自己体会,对于一些框架没有的样式我们可以添加自己的公共样式,与其他非公共样式组成一个文件,多用公共样式,非公共样式总是比较少的
Important globals
1. html5 doctype:
<!doctype html> <html lang="en"> ... </html>
2. responsive meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
3. box-sizing:
global box-sizing value from content-box to border-box
4. reboot:
resets to common HTML elements across browsers and devices
组成:content初始化reboot.js, layout网格布局grid.js, 定义组件component, 公共样式utilities, popper提示信息的js
css: layout/content/component/utilities bootstrap.css: included all bootstrap-grid.css: only grid system in layout and flex utilities bootstrap-reboot.css: only reboot in content
js: popper/jquery bootstrap.js: not included in all bootstrap.bundle.js: included popper
各部分内容,具体参考官方文档:
layout: -- overview -- grid -- media object -- utilities for layout content: -- reboot -- typography -- code -- images -- tables -- figures component: -- Alerts -- Badge -- Breadcrumb -- Buttons -- Button group -- Card -- Carousel -- Collapse -- Dropdowns -- Input group -- Jumbotron -- List group -- Modal -- Navs -- Navbar -- Pagination -- Popovers -- Progress -- Scrollspy -- Tooltips utilities: -- Borders -- Clearfix -- Close icon -- Colors -- Display -- Embed -- Flex -- Float -- Image replacement -- Position -- Screenreaders -- Shadows -- Sizing -- Spacing -- Text -- Vertical aligin -- Visibility