bootstrap4

声明:

我们写样式,总想要自己写一套公共的样式,来方便我们行事,因为自己写的干净,用框架总感觉有一些没用到的样式在堆着,不符合我们的观念,然而我们没必要纠结这些,我们使用框架会有一些好处,自己体会,对于一些框架没有的样式我们可以添加自己的公共样式,与其他非公共样式组成一个文件,多用公共样式,非公共样式总是比较少的 

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

 

posted @ 2018-08-16 15:04  maoriaty  阅读(201)  评论(0编辑  收藏  举报