bootstrap学习笔记

bootstrap号称是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目,并且适用于所有的开发者、所有的项目,所有的设备均可适配。不管他是真是假,鉴于目前的火爆程度,我们都有必要了解一下。

bootstrap的样式文件包含了很多的类,如果要全部记住是不现实的。我的建议是记住主要的即可,非常详尽的可以边用边查。根据我的使用对bootstrap进行4大部分的划分:全局样式、组件、插件和定制。其中全局样式和组件主要是针对css来说明的;插件是带有交互效果的样式和js代码的组合;定制是根据需要来获取文件的。

大致结构如下图:

《bootstrap学习笔记》

全局样式

顾名思义,这些样式会影响全局的设定,比如:字体大小、左右浮动、字体图标、栅格系统。。。其中栅格系统是很重要的模块,只有理解了栅格系统的原理,才能自如的进行页面布局,这里需要仔细理解官方的对比图:
《bootstrap学习笔记》

组件

组件就是提前将一些常用的页面元素进行封装,以方便进行高复用。bootstrap的组件主要包括:表格、表单、按钮、图片。基本囊括了页面布局和交互中的所有元素。由于涉及元素较多,样式类也相当多,因此需要掌握下图中的关键类:
《bootstrap学习笔记》

插件

插件这里不过多介绍,因为不需要死记硬背,需要的时候查一下官方文档即可

定制

如果你对bootstrap不是很熟悉,并且不介意文件大一点,可以先不关注这一块。如果需要使用最小体积的支持文件,可以查询官方文档根据指引进行自定义。

    原文作者:myleihao
    原文地址: https://segmentfault.com/a/1190000020363896
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞