摘要：通过阅读发现了不少知识的盲点和误解，对有了更深入的理解。总结几点印象较深的体会，分享给大家。但是通过阅读源码改变了这种认识模块化很简单灵活，这是其优点，同时也是一个缺点。
欢迎到个人博客参观: 点击这里
bootstrap已经使用了很长时间，但是从来没有好好研究过其设计结构，春节期间闲来无事就阅读了源码。通过阅读发现了不少知识的盲点和误解，对css有了更深入的理解。总结几点印象较深的体会，分享给大家。
1. 移动优先在移动互联网时代，很多公司都坚持移动端优先的原则，bootstrap也迎合了这种需求，具体表现在如下方面:
相对单位: %、rem的大量使用
grid系统: 为了使用不同的设备，grid系统对xs、sm、md、lg、xl进行了响应式设计，通过media query做到适配
支持flexbox: mobile应该很快就可以使用flexbox
2. 代码结构 2.1 从less到saas使用sass作为bootstrap的css预处理器，以前对预处理器不是很感冒，认为将简单问题复杂化了。但是通过阅读源码改变了这种认识:
css模块化: css很简单、灵活，这是其优点，同时也是一个缺点。通过sass预处理器，可以根据功能将css模块化，便于css的管理
复用: 变量、mixin、function等技术，可以方便地进行代码复用
简洁: 支持each、if等语法，动态输出内容，例如繁琐的grid系统，是通过少量的sass代码做到的
2.2 代码层次根据代码的层次，sass的源码分为如下几部分:
支撑部分: 包括变量定义、大量的mixin文件，这是整个bootstrap的基础代码，也是进行个性化定制的其实位置
全局部分: normalize.scss用于覆盖各种浏览器的默认行为，保证起始样式的一致性
基础样式部分: 包含了reboot、typography、images、code、table、forms、buttons等，主要是一些常用的基础html元素
grid部分: 选择性支持flexbox，默认情况下是关闭的，只要将$enable-flex=true就可以使用flexbox完成页面的栅格布局
组件部分: 包含大量常用的基础组件，有些需要添加jQuery plugin
工具类部分: 常用的简单样式，例如间距、文本对齐、字体加粗等
3. GridGrid用于页面的整体布局，同时css3也在起草grid布局模块。Grid也可以多带带使用，bootstrap4提供了一个多带带的文件(bootstrap-grid.scss)来实现栅格系统，具体来说Grid有如下特点:
默认情况下是12栅格
栅格可以嵌套使用
支持5种尺寸下的响应式样式
5个尺寸可以组合使用，适配不同终端下终端
支持使用flexbox
4. flexboxflexbox目前还处于草案阶段，不过高级浏览器已经开始支持，如果只考虑高版本浏览器的话，可以启动通过$enable-flex=true来启动flexbox。
flexbox是未来布局的趋势，尤其是在复杂页面布局上，总得来说具有如下几个优点:
可伸缩性: 通过flex来实现空间的伸缩，在响应式设计中更加灵活(无需关注margin、padding、border等)
顺序定制: flexbox的一大亮点，通过order指定元素的显示顺序
轻松对齐: 通过jsutify-content、align-items可以方便实现元素的对齐
方向性: 通过flex-flow方便确定布局的方向
5. 组件设计bootstrap里面提供了大量的常用组件，可以直接使用或者简单进行二次开发，加快日常业务的开发速度。同时，有些组件需要跟js(jQuery)配合，实现组件的交互效果。
里面的组件按是否需要js，可以分为两类:
无需js配合: Button系列、Form、Input系列、DropDown、Jumbotron、Label、Alert、Cards、Nav系列、Breadcrumb、Pagination、Progress、List
需js配合: Modal、Tooltips、Popovers、Carousels
需要注意的是Cards是bootstrap4新增的组件。
6. 参考http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115037.html
摘要：对于非前后端分离应用来说，应该是目前的最佳前端框架之一了。所以下文中默认使用的语法。可以使用的组件特性，来扩展，这样会在编辑的源码，更加的有结构引用引用编译自定义源码编译自定义源码参考参考摘要 因为打算写一个小网站，而个人时间又不是那么充裕，所以没有选择前后端分离的架构。 对于非前后端分离应用来说，Bootstrap应该是目前的最佳前端框架之一了。 而Bootstrap4，是Bootstra...
摘要：在这里面有一个新定义的类，它这个嵌入式展开后是，从结构可以看出来，它就是加在元素上的，可以取消列的默认间距。在这里我提供一个自定义的，名字也很简单。写的时候注意顺序，要按照升序排列，小的放在上面，即在上面，写反了将失效。 本文所引用的版本为Bootstrap 4 Beta版，阅读者请先下载好相关源文件。 时光荏苒，若后续版本代码发生变化，将看心情进行更新补充。如果你觉得本文不错，欢迎...
摘要：前面说了的下载和简单使用，现在我们接着往下学习，的响应式布局主要依靠栅格系统来实现的。好了，栅格系统暂时先介绍到这了，有什么不懂的可以给老留言哦。前面说了Bootstrap4的下载和简单使用，现在我们接着往下学习，Bootstrap4的响应式布局主要依靠栅格系统来实现的。面老K先来讲解一下Bootstrap4的栅格系统，让你能够更快的了解Bootstrap4.（PS：更详细的介绍请访问原K先...
摘要：使用，已改为使用，所以首先解决编译问题。编译与无关，需要在系统中安装编译环境。使用编译源码结构简单分析源码，其中文件夹包含了所有样式文件源码，部件和工具都是单独的文件，很清晰。可以看到命令已成功运行，及文件已经生成。 环境： macOS 10.13.6 node.js 8.11.3 sass 1.10.3 bootstrap 4.1.3 vs code 1.25.1 ...
摘要：历经三年开发，前端框架正式发布了。支持发布时，曾放弃了对版本的支持，给很多用户造成了麻烦，同样的错误不会犯第二次。在不久的将来，开发团队还会继续修复的，改进文档。最终发布之后，的文档也不会下线。除了发布外，官方还发布了主题。 历经三年开发，前端框架Bootstrap 4正式发布了。然而今天的Web世界已经和当初Mark Otto发布Bootstrap时的情况大为不同，一些开发者由此质疑...
阅读 1748·2023-04-26 01:41
阅读 3049·2021-11-23 09:51
阅读 2712·2021-10-09 09:43
阅读 8881·2021-09-22 15:13
阅读 2436·2021-09-07 09:59
阅读 2604·2019-08-30 15:44
阅读 1094·2019-08-30 12:45
阅读 2589·2019-08-30 12:43
