UI库(CSS+HTML)

HTML 是结构化文档, 算是数据结构的一种（变体）吧

CSS 就是渲染引擎的怎么运作的配置文件

CSS难在哪里？

1：浏览器兼容，浏览器兼容一直是前端开发头疼的事情，各种版本型号的浏览器，相互兼容，调试，往往都会让很多人心力憔悴。

2：移动端适配，移动端的高速发展，各种屏幕大小的适配，以及不同系统的兼容问题，以及市面上各种眼花缭乱的适配方案，让我们头晕目眩，在加上less，sass，scss的出现，多了些许逻辑在里面，让我们写css代码如同写js。

经验分享: 入门阶段不要管好那么多细节,记忆之类的东西,尽快地入门才是最重要的.其实入门,无非就是对所学内容形成一套概念,知其然,所以然.大概的就成了.

盒子模型，个人的理解，就是一个来装html标签的容器,包装的内容包括content+padding+border+margin。由这四个组成我们的"盒子"。

前端的CSS框架

但是现在有两个主要的动态css语言，LESS和SASS，给css提供了变量，mixin，运算符等功能，让写出模块化的css框架成为可能。

Bootstrap现在基本是欧美这里最流行的框架，基于LESS，最近升级2.0以后完全模块化，也不需要太多配置，很好用。这个框架对大部分元素的视觉细节都已经做得很完整，基本上你只需要写html，加几个class，就可以做出像模像样的页面了，做起prototype来嗷嗷快。不过这也是个缺点，因为用的人多了样式都长一个样... 当然，模块化的框架你要修改起来也是很方便的，基本上修改变量就可以了。

另一个比较流行的是基于SASS的Compass，这个框架包含了Blueprint作为其中的一个模块。需要注意的是这个框架和Ruby on Rails是高度整合的，用起来需要大量的命令行操作，比Bootstrap麻烦，但是在Rails开发人员里面用得比较多。

UI库（UI组件库)

bootstrap - Twitter推出的一个用于前端开发的开源工具包，jQuery 生态。据说马上的 v5 版本会脱离 jQuery 生产。

• AdminLTE - 基于Bootstrap 3.x的免费Admin控制面板主题
• bootstrap-material-design - Material design theme for Bootstrap 3 and 4
• AntDsign for React - 基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
• Ant Design Pro - (React 生态)一个企业级中后台前端/设计解决方案
• AntDesign for Vue - 这里是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。
  • ant-design-pro-vue
  • vue-antd-admin
  • vue-alain
  • ant-design-vue-pro
• NG-ZORRO - Ant Design of Angular
• NG-ZORRO-MOBILE
• Element for Vue - 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
• Element-React
• Element Angular

Bootstrap (CSS框架)

Bootstrap是在jquery时代的UI组件库，而且Bootstrap大部分组件是依赖css的，依赖jQuery的组件主要是有交互的弹窗组件、下拉菜单等。

其自身也在不断的迭代发展，今年年底发布的Boostrap v5版本包含了很多非常期待的特性，可以说一个前端开发者，要是吃透Boostrap，那么在国内的前端圈子，可以横着走。

Bootstrap v5 使得它自己跟现有的基于React，Vue相关框架的组件开发更容易搭配，其定位更加清晰，就是做单纯的CSS框架，更多的CSS，更少的Javascript。