87.尚硅谷_bootstrap_bootstrap定制化.wmv原创

啊，来看一下啊，我们来我们说刚啊刚刚做完复习是吧，那现在我们来讲一个叫job的定制化啊，为什么讲这个东西呢？其实我们不job是不是有自己的一套UI设计的啊，可能这套UI设计不会符合你们公司自己的设计，懂吗？那可能我们会定制化的去写一些不job的一些东西啊，那现在给大家去看一个不知一个项目。啊，它不是一个项目，它是基于不要不去改的一个UI库，大家来看看啊，比如说我登录这块。OK，前面是登录。OK，那这边是不是就登录啊，OK，登录进去啊，大家看这个就是基于去改的一个啊UI库能他就把这些色调啊，这些什么UI风格全部改掉了啊，那所有的东西都在这边啊，怎么去选择文件啊，怎么去啊开关是不是OK，你看这是一个进度条吧，是不是你看什么，比如说I这边啊，这些都是什么。I嘛，自己图标嘛是吧，OK，还有什么登录的登录页是吧，一些表单。

啊，表单都是有自己的嘛，特点的吗？能不讲，那一般你们如果公司有后台项目啊，就是要写后台界面的，需要你自己一点点去写吧，特别是这种什么类似于表格的，或者这些图的，需要你去写吗？啊，千万不要去写，一定要去找。懂不懂，找一些跟你们就是这个吗，风格类似的UI库拿过来用，能理解吗？因为这些样式实在很无聊，你会写的，而且写的话会发会。花费你大量的时间啊，可是这些功能你们会不会做点击让这个去一个忙。隐藏掉嘛是吧，你看画一些什么表格嘛。懂吗？那这个你看是不是就是什么自己图标嘛，里面干嘛把这个色调换换嘛，搞点阴影嘛。懂吗？所以这些重复性的工作一定要站在UI库上面，懂不懂不要自己去写，千万不要自己去写，你要自己去写一个UI库出来，你看写个UI库出来，那你就要写这么多东西。

懂吧，那CS文件有这么多啊，都是基于不要去改的。懂吗？啊，所以说这块需要大人码注意一下，以后只要不是画移动端页面。啊，只要是画PC的一些后台的一些站点啊，基本上不要自己去什么手写div啊，自己去撸啊，去撸CS代码啊，不可能的懂不懂啊，如果写的一些什么，就是我们说咱们的项目，大家大家知不道我们的项目的分类啊，啊可能你去公司做TOC的项目。啊，TOC的项目跟To B的项目。To B代表什么意思啊？To a什么鬼啊，没有这个To B代表。对内的啊，就是内网项目是给公司里面的人去用的，懂不懂TOC呢？用户的啊，就是你这个项目干嘛要开发出去给用户去用的，那一般TOC项目的UI的一些一个设计的复杂度，或者说对对这个用户体验，我们是需要去干嘛优化要去考虑的，那To B呢。

储备项目，不需要考虑用户体验。懂吗？也不需要搞兼容性啊，那出这个项目要考虑用户体验，考虑金容性，To B项目不需要考虑用户体验，不需要考虑兼容性，他说我这个IE上面这个项目跑不起来，直接告诉他给他个U盘让他装C就可以了，那这就是我们做To B项目的一个什么做法，懂不懂？那To B项目比如说比较经典的。OA系统，那就是一个To B项目嘛，是吧，TOC项目比较经典的所有的电商。电商平台肯定都什么。TOC的吗？懂吗？OK，可是一个电商平台里面只有C的部分吗？不可能啊，你想想啊，你们每天看到的货，货品啊，他们价格啊，货物的照片啊，是不是都会干嘛变的，那他肯定是有一个To B的系统在后面干嘛。

去录数据的懂吗？然后to c twoc那段他们可能是two p TOC的系统用的是同同一套数据库嘛，这样一改的话，是不是我界面上面所所有的什么一些信息是不是都可以干嘛同步掉，懂不懂就要搞清楚To B跟TOC To B是。内网下面啊，可能是对企业的企业级开发，懂懂C是。对客户的啊，啊，客户去开发这个对UI的一个复杂度，对用户的体验是有要求的，他是没有的，可是一般To B项目啊，在数据交付上面更复杂。懂吗？那一个比较大的TOC项目，那又要考虑用户的。体验就是你的UI要复杂，数据的交互量也很大，那这个项目比较难做，懂不懂那所以说一般我们出去开发的话，更多的应该是接触To B的项目。

懂吗？啊，所以说在UI这一块的话，其实没有太多的要求懂不懂，可是现在有，现在不是大家都知道吗？就是在往在往移动端靠嘛，一般移动端这一块TOC的项目更多，懂吗？啊，所以说以后出去工作的时候，你要知道自己在干嘛。懂吗？OK啊，To B TOC啊，记住那还有一个，大家可能会认为这个To B是面向浏览器的。是不是啊，其实不是这个概念啊，啊，这是面向企业级的，懂吗？就叫企业级开发啊，当然是不是大家大会大家应该听过一个概念，就是一个架构一个。CS架构啊，那这个B，这个B是谁啊，浏览器啊，这个是基于什么浏览器的一个架构方案，这2C呢，客户端的一个方案懂不懂，那像我们现在做的外部前端肯定都是什么。BS的BS架构是要发请求的吧，啊，需要去动态的去服务器上面去拿什么数据的CS架构呢。

啊，就像安卓跟LLS他们就是一个CS架构，懂不懂这些页面是直接打到本地的。能没理讲OK啊，这个稍微跟他们拉扯一下啊，那这个东西待会可以发给你们啊，我就把这个包发给你们应该就可以了。OK，那这个我就干掉啊，这些UI库有很多啊。啊，不信我们可以看。去哪去哪幺七素材网吗？是不是B走你看到没有啊，博客后台管理系统吗？你看后台管理系统是不是跟我刚刚那个长得差不多是吧，再看。那简直太多了，看到没有？是不是说过了吗？站在巨人的肩膀上，是不是不要自己瞎整？能讲OK。好，那我们这边我们来说一下，简单的说，哎，如果以后里面有一些样式需要你改一改，颜色的风格需要你改一改，那怎么办是吧，对这边我们叫做不需的定制化，来看一下咋整CTRLC，呃，我们看我们把这个源码文件得拿到它。

OK，月末文件的。是不在这块，那么直接在这个吗？源码里面去改了好了，看一下咋整，比如说现在我这个三格啊，大想想我现在写的这个三格的曹宽是不是30啊OK，然后有天又突然跟你说这个曹款不满足我的需求。是不是我希望这个槽宽达到60，或者说这个炒宽我希望达到100，怎么办？去哪改？改里面什么。是不是改这个变量是吧，比如说长宽是什么。是不他是吧，是找你曹关是干嘛，30P，我想这个曹关改成100是不是改完就行了吗？改完得变译吧，问题是编译哪个文件。

问题是编译哪个文件，是不是得找到入口啊？入口很简单，就在这。不是不点吗？点开了一看input吗？全部过来了吧，是吧，而且你会发现诶他说老说没有混合，有没有混合，有没有混合，大家看我在印的时候有没有印input。in.less是不是就它in.less嘛，你看它又去把很多全部导进来了吧，等说入口是不是我这个点，那我编译它是不就行了。能不理解那就编一下呗，咋整啊？干嘛，这个给他干嘛干掉吧，是不是是不是把这个干嘛直接。拎进来，哇哇哇哇哇。啊，不管这些错我们不管。啊，我们应该编译谁啊，编辑它吧，执行编译是吧，成功了吧，看上面是不是多了一个CS文件，看这个CS文件里面视频看是不是都在这是吧，那怎么办？我说这个混合我们需要吗？其他全部干掉吧。

是不是，哎，怎么有有这是我以前放的地方啊，这个这个这两个应该是没有的啊，这个应该是我自己写的，懂吗？啊，这个我先给他干掉。好大看，那我在这边，你看是不是这个这个混合我需要吗？不需要，为什么，记住每次硬input的时候，相当于会把这里面代码进行合并的，你说最终代码都在哪，不算CS里面懂不懂，就所有代码会合，会合并到一块去了，并不像我们CSS里面，你如果去用input的话，他不会帮你代码合并的，他只会帮你去多发请求，就以那个性能太低了，我们不用的，那里面这个硬input的，并不是说去服务，去网络上面把这个东西给你抓过来。而实习帮你合，帮你什么合并到一个文件里面去，懂不懂那这个就可以干嘛干掉删掉不要。

这边也都不要，是不是这个时候，其实它里面这个槽宽应该是多少。100的是不是不信？我们来看一下，我们之前不是写过代吗？三个L系统的吗？CTRLC直接给吗？贴过来，CTRLV，你好，那这个三个系统里面我们应该改什么，现在这个相当于这个样式，我。定制过了吧，OK，只有你给他干掉。只有你是不是把它加载进来就可以了，来看一下F。看朝宽入道。很明显草宽变大了吧，五十五十一百嘛，财宽是变大了，这是一种方式去改源码吧，是不是啊，可是有时候我们肯定干嘛不想动源码吧。是不是有时候我们说干嘛不想动圆码，为什么？因为动了源码的话，你会把他的结构给破坏掉嘛，没有办法干嘛还原吧，是不是动态性不高。

是不是这的，比如说你30还是30吗？那怎么办。我不给你源码，我自己在外面去写个文件。OK，我叫什么五点是吧，OK，我写完这个文，这些这些东西我全部改掉。全部干掉啊，我都不要考拉这个文件给他干嘛，删了是吧，怎么办？我说这个文件我。Put input，我去引什么？我去演你这个什么？里面的东西行不行，点点出去less里面的什么？去谁啊，你的入口吗？把你的入口什么拎过来是吧？问你现在我来编译这个达点，是不是相当于就在编译我这个不需要点是不的，可是里面有些东西我要改怎么办？

怎么办，比如说这个三格的这什么。诶，这个没了。草宽，我是不是要改啊，怎么办？找到我这个什么变量。是不是变量里面CTRLF，是不是它CTRLC。贴过来怎么办？把这个字给你改掉，改成200。问你，我有没有动员吗？没动源码，我只是把源码当成一个混合，干嘛引了进来？是不是这样的，能不能改掉，照样可以。把这个干嘛。拎过来刷新一下是不是就。出来了，我觉得这种方式更好。是不是走你干嘛换成是不是OK，我有没有改啊哥。我是不是这边改，我这边改成了多少。200了吧，好来看你打开了。

很明显干嘛布局是已经被我破坏掉了，这个咱们不管，你看是不是。一把一把。能理解我的意思吗？OK，那我是不是可以去定制化的去干嘛，去写一些什么样式啊，那这个需要你对这个less的源码是不是搜一个嘛了解一点啊哦，这里面那这个啊，这里面的东西最难的就是什么三格了，你可以看一下其他的，比如说看看表单能不能看到。就是一些最基本的属性，就是些最最最最什么基本的属性懂不懂，一般你需要去改一些自己的一些UI风格的话，你只要搬出什么变量就可以了，就是你要改哪一块你过来找。懂导，你要改文本颜色的，那你把这个字给他改掉啊，可以穿找。在哪定义的，看看是不是在这，你看是一个什么渐变是懂吗？这是也是less里面的一个函数，懂不懂，可是一般我们不会去操作它，如果想知道这个函数什么意思，上官网去看一下就行了，极其简单的，无非是上下去再下下去的，这这种东西懂吗？OK，教你，那这个应该嘛，这应该大家以后的话，如果让你去定制一个的话，应该干嘛？

有有能力去做，就是工作量的事情啊，根据UI给你的参数，你把里面一些东西给它改掉就行，懂吗？配色方案啊，呃，就是边框的一个什么，就是就是表格的一个展示形式啊，在这个里面都都是可以改的，懂吗？能理解我的意思吗？OK，这里这叫定制化，那定制化我们推荐推荐的方式是叫什么？不是要把less通过混合的形式引入到你自己的那里面去，还有一件事情，也就说你这个变量，我们说干嘛写到上面也是没有，也是没有问题的，它也是可以改掉的，默认在编译的时候的话，他是先读这个音什么，你不是，哪怕你是这种写法，最终最终也是这么去解析的。

懂吗？所以说你这个变量写上写下没事，只要写在外部就可以了，能理解好，那这个什么叫定制化算法啊，一般。不会有这种需求啊，有这种需求的话，说明你这个公司啊比较大啊，他要需要有一套自己的什么。要需要有有自己的风格，懂吗？有自己风格的时候的话，其实这个事情你只需要去改所有的参数，有产品，有UI，有设计，他们把这个整个界面的什么配色风格啊，边啊边框的展示啊，一些动画的展示，全部把你干嘛当成一个参数写完，然后再给你懂吗？啊你们可以看一下一个比较成熟公司的话，他们的UI应该长什么样，UI图应该长什么样。我也没给你们看过。我记得给你们看过。嗯，应该找标注啊，你看是应该有看过吧，那如果要让你们去改改风格的话，其实要比这个图还要什么还要详细啊，就直接出一个什么文档给你，然后你去改懂不懂，其实你要做的你就知道什么，怎么编译不表就行了，懂吗？OK。