bootstrap studio使用教程

这个视频我们看一下怎么引入波斯群，我们先在这里找到他的光芒， 这里拼错了， 可以看到这走到这个就是中门的挂满了，我们现在用这个案例是要第四把， 为什么用到他呢？这个他兼容到 a 十吧，看一下他这个应该兼容到 a 十，最新版他没有兼容，不管阿姨了，虽然阿姨已经 已经下线，是还是有不少的阿姨用户的。在这里下载他的 侦查文件，我们看一下这里直接下载，我，我已经下载过了，我就不是一操作，看一下这个，点击他就能下载了，下载之后得到这样一个文件， 得到这样一个文件，打开之后有两个把，把 css， 把他这个 cs 引到我们的文件，这个是我们要做的文件引到这里，然后再把他的 gs 引入， 把这静爱使用，把他这个静爱使用，如用到我们的 文件，新建一个文件， 我们引入他， 在这里引入他 gs， 要注意这条，这条一般我们那是不用记住的，你直接去光芒这里找到他，找到他，然后复制过去就行了， 找到他了，然后复制放这里，这样一个引入我们就完成了。

网页设计想要美观漂亮，网页小图标是必不可少的，我是陶老师，今天向大家介绍如何使用 botostop 图标库，让你的网页设计更加出色，欢迎点赞收藏。 波特式错谱图标库呢，一共有一千八百多个图标，我们怎么来调用这个图标呢？首先我们要在页面里面引入波特式错谱图标的 css， 我们切换到中国耳里面， 我们将光标定位到斜杠 head 之前，然后呢我们粘贴引入或者是错过图标的 c s 时，当然呢我们也可以把这个 c s 时文件下载到本地来进行引入也是可以的。那接下来 我们想把这个修改，把它替换为我们的这个漂亮的图标，我们找一个编辑的图标，我们就用这个吧，我们点击进去，然后我们看，我们通过图标字体的方式来对他进行调用， 复制它，然后我们到页面里面来粘贴它。 接下来我们再来找一个删除的图标，我们用这个吧点击它，然后复制代码，接下来我们来进行粘贴 好，我们保存它。那现在我们这个网页呢，就变成了一种图标来展示，修改和删除， 我们把这里改为编辑好，现在我们到网页里面的进行预览一下，我们刷新， 我们看现在这个效果是不是就美观很多了，不都是错误。图标库作为一个功能强大，起义于使用的工具， 如果能够灵活的运用波特斯收获图标库，你将能够创造出深受欢迎的网页设计作品。今天的视频就到这里，我们下期再见。

好的，大家好，那么接下来的话呢，我们来学习一下咱们的本套课程啊，不是 jf 五空驾技术行解的第二集啊，变速安装与测试啊，变速安装与测试， 那么在这个里面的话呢，我们来看一下，这里面比较简单，今天的话就讲这么三点，第一个是 bs 五，他的官方叫到底叫什么对吧？好多人是晕头转型的，在国内，咱们在国内搜一下这个布特斯坠破，这个布特斯拽破啊，我以前的时候老读他布特斯坠破，这个无所谓了， 不要太纠结，他好来看一下啊，你比如说这部的教程啦，部的一些手册啦，文登啦，更多的一些中文的手册在国内都停留在 v 三版本，四 版本都比较少，五版本就更少了，现在目前的话呢，在全球还没有，还没有一套正儿八经的这么一套布特斯 rap bs 五的中文手册，对吧？既然没有， 我们也别别对吧，我们也不要太煽情了啊，我们就直接用他的英文的英文的这么一套东西啊，这么一套手册来学习就可以了，因为这是你的官方，我们不跟着他学，跟着谁学啊，对不对？我个人建议啊，很多东西一定要去官方学习，如 如果你不喜欢视频，或者说你你更喜欢文等，那我建议你去官方学习，你不要在国内，国内的文等的质量 可重复性真的太太高了，就是一篇文等质量本来就差，然后呢，你再去搜，你会发现出来一万篇星同的，雷同的，百分之九十九雷同的，要错，大家错到黑，对， 这要对吧？要跑，跑到黑，要搓搓到底，这怎么能行呀？所以说这这这些年呢，我个人呢，对我自己的一个习惯啊，个人的习惯，你邀请节约时间，你就去官方，不管他是英文的还是其他语言的，因为这样反而是最节约时间。 国内呢，很多的一些手册呢，与作者的水平有一定的关系，可能都跑偏了，对吧？可能都跑偏了，我不是说都不好，但是绝大部分都跑偏了，对不对？这一点大家一定要注意一下，这也是咱们的本套课程，咱们全部都取材和跟着这套官方他的文档去学习的原因 好不好，希望大家能够理解啊。不是不是我自己装逼啊，我就是拿一个英文，其实我的英文好吗？我英文也不好，是不是啊？ 真的不是装逼啊，是因为时间长了以后，你会发现国内的是文等质量真的太差劲了，对不对啊，本来本来我 就差劲，现在好了，谷歌你还打不开，对不对？更好的英文文登，更好的技术技术文登和权重的一些东西你还拿不到啊，真的非常耽搁时间，你们以后就明白了，就是说你从业五年以上的人，你就会，你就会明白了，不光是哪个计算机领域里面的东西，一些 一些特别重要的棘手的一些文等，都是英文文等都在国外，国内你几乎就拿不到你自己想要的东西，只真的就是浪费时间，特别浪费时间， 好吧，我也是受够了啊，哈哈，所以被逼无奈啊，现在是更喜欢用官方的东西来学习了，对不对啊？来接下来的话呢，咱们来看一下本套的东西啊，第一个就是他的官方 get git， 我们现在打开，然后呢我们呢现在去下载登录的，对吧？登录的里面的话呢，咱们去下载一下啊，已经编辑好的东西，对吧？已经编辑好的四 s gs 的东西，好， 我们直接呢，对吧？直接打开它，对吧？直接打开它就 ok 了啊？点下载下载呢，你可以看一下左，我把这鼠标一划，你看一下左下角这个地方会有一个地址，会有一个 地址，这个地址就是我放在这的地址，你或者拿它去下载下就好了，对吧？拿它去下载下就好了，好， ok， 在这呢已经快速的下载下来了，我们来看一下，把它拿过来，好， ok， 拿过来，在这个里面的话呢，我们把它解压，解压以后呢，我们来看一下 bs 五，目前的话呢，已经进行到五点零点零，对吧？他的一个五点零点零，他的一个 b 三版本了，也就是他的一个测试版本的一个三版本，很快他就会进入稳定版本，其实五点零的这个版本的话，其实已经经历了至少半年的时间了，时间周期很长， 国外呢，他更新升更新升级很多东西呢，他都比较谨慎，而且都会拿一线进行反馈和测试，对吧？不会拍脑袋杠啊。然后咱们来看这里面一 一个是不得啊，一个是不得拽破他的 cs 里面的东西啊，一个是 bs 里面的 cs 的东西，还有一个的话呢，是 gs 里面的东西，看到吧？是 gs 里面的东西， 在这的话呢，我们呢也把这个是变异后的东西，就是已经变异完毕了，你看不到他的，你看不到他，他的这个，你比如说，你比如说这个塞塞斯拉里面的很多的东西呢？他呢都是基于萨斯来开发的，对不对？哎？萨斯源文件的东西，所以说你要想拿到真正的一些萨斯源文件的元代码，那么请你去下载他，对吧？登陆的扫斯 好，正在下载，有的人说我在国内，我访问这个咱们的给他宝有点慢，那么建议大家的 dnds 一定要修改成幺幺四点幺幺四点，幺幺四点幺幺四，或者 八点八点八点八，对吧？四个八下载的话呢，下载国外的很多的站点呢，相对来说会比会稍微快一些啊，好， 我们把它拿过来，这个呢就是说啊，这个是因为三六零的作用啊，他正在扫描，稍微等那么几秒钟啊，稍微等几秒钟，好，听，我简单来说一下这个地方， 也就是说这个的话呢是已经已经什么呀？已经呢？把很多的一些底层的萨斯文件的萨斯编程的东西，已经编译成什么？通过萨斯已经编译成了四 s 和 js， 已经编辑成 css 好， ok， 然后呢我们通过 gs 呢，我们去使用了等等一系列，我们去使用了等等一系列，对吧？那么这个是什么呀？这个就是说他保留了我们的萨斯文件，那么你就可以看一下这个 super 开源的所有东西， 这个不是他的元代码，现在的元代码都是什么？都是萨斯，对吧？因为他都是用萨斯来开发的。好，然后呢我们帮他解一下啊，对吧？我们来看一下这里面的东西， 你会发现这里面的东西呢，要比要比我们上面的东西要多得多，对不对？要多多多多，以及这里面的话呢，也给我们准备了这里面所有的 s， s， s 就是杀死的东西， 看到了吧？就是萨斯的东西，哎，我这个时候呢，现在呢我呢把这个和这个啊，把这另一个东西呢？我呢方便大家学习，我都考到咱们的第二集里面来，可以吧？我都考到咱们的第二集里面来， ok， 方便大家学习啊，方便大家学习。 那么接下来的话呢，接下来的话我们已经下载下来了，那么好， bs 五的话呢，我如何去使用呢？对吧？如何去使用呢？那么为了方便我们后边的东西，我再给你们写一个 bs 五，对吧？在 这个里面的话，我们新建一个目录，叫帕布雷克啊，叫帕布雷克。然后呢新建一个文件，比如说我们要使用这个 bs 五，怎么玩呢？我们就直接拿一个英带字典 tm， 对吧？测试一下里面没有任何 的东西，打开，对吧？里面没有任何的东西，还有呢就是这个帕布里克里面的话呢，我们呢拿一个，我们拿一个 bs 进来，对不对？哎，帕布里克里面是我们 bs 里面的真正的东西，是 bs 里面的真正的东西，那么我在这地方我就新建一下 js 以及 css 以及以及 cs， 完了以后呢这帕贝克里面的话呢，我们还有一些除了 bs 以外的 gs 以及 cs， 以及我们测试肯定要用的那些图片， 对吧？哎，这个目录结构大家一定要注意啊，然后呢我们呢就，嗯，我们就把这些东西我们想要的东西拿过来吧，是不是？ 我们把这里面东西我们拿过来吧，好，首先呢第一个呢是我们把它拿过来，这才是我们真正想要的东西，这里面一堆的东西，这里面一堆的东西，其实我们很多人的话，很多人可能也没 闲工夫区这里面看到上万行的四 s 的代码，所以说我们直接使用生产线上，我们用的东西就是闷，对吧？生产线上的东西， 为了好调试，我们一定要把这个卖铺拿过来，卖铺是什么我就不多说了，为什么呀？因为在，因为在第一集里面我已经推荐大家去学习一下萨斯那套课程，在那个里面都有详细的境界， 什么是萨斯，什么是 scs， 什么是 cs， 什么是卖铺，好不好？在这我就不再去伸说了，我们把这个闷直接拿过来，然后呢接着呢，我们再把他的 js 的东西拿过来， js 东西拿过来，那么那么这就是他的 js 以及卖铺，对吧？把他的闷拿过来，对不对？ 我就不要那么多东西了，这么多的东西基本上我们后面也用不着，也用不着，对吧？因为这个是最全的，对吧？哎，这个是最全的， 这是 css 里面的东西，那么接下来的话呢，我呢为了方便咱们后面的学习，那么我们呢就来一个什么呀？ scss， 我们把这套元代码的东西拿过来，因为我们在后面的课程里面的话呢，就会去学习我们如何利用官方发布出来的萨斯编程的一些元代码，然后呢来得到我们想要的，对吧？来得到我们想要的东西，我们把它全部都复制过来，剪切过来，或者把这个文件夹整个的复制过来， 拿过来帕布里克下 xs， 对吧？把他整个的刚才整个的元旦码考过来，把整个的元旦码考过来，这其实 这里面所有的东西最终其实生成的就是他，就是我们真正想要的东西，就这就是所谓 他真正所有的东西，不得所有东西啊，非常非常重要，对吧？不得不说白了就是一套 cs， 就是一套 cs， 把里面含有大量的类和应试，还有标签的应试，方便我们去拿着这些类去使用，得到我们想要的东西。如果说你仅仅只会拿着这些类，然后呢跟着手册，然后得到你想要的界面，这还是一个低水平的一个状态，对不对？ 你如何对他进行二次开发，如何对他进行定制开发，这很重要呀，对吧？他里面的很多东西，他他里面的很多的东西，要求你这个 fx box 你也要熟练，你不能刻意的去背啊，对不对？他为什么盛装下左乘右要使用 flax 呢？对不对？ 这些东西的来龙去脉我们都要把它搞定，这呢也是为什么我在之前学习这个 bs 五的课程之前给大家专门录制了萨斯课程体系 以及 fxx box 课程题，有人摸不着头脑，为什么要学这些东西呢？其实还是为了让大家更专业的去学习 bs 五，因为有这套 bs 五在手，那么一切的界面，外部界面都不怕，对不对？ 好， ok， 那么接下来呢，我们就简单的来玩一下呗。好，我们这个呢，我们已经打开了，或者说我们把 bs 五，我们把这个 bs 五整个的拿到我这里来，对吧？ 拿到我这里来啊， bs 五上面这个是我以前做的测试，那么 bs 五里面所有的东西都在这隔着呢，看到了吧？都在这里面，都在这里面隔着呢， ok 了吧？好， ok， 那么接下来呢，那么我们呢？此时此刻我们在这英呆的铁路，那么我们呢就开始引入一下 bs 五， 然后呢对吧？然后在这个地方呢，我们在没有引入的情况下呢？你比如说我们来个 cat 呢？你比如说来个 这个看腾的，有时候真的是很长啊，很累啊，然后在这个里面来个看腾的，看腾的里面的话来个 a 十一， a 十一面，来来个 对吧？买那本 a 字 bs 五，对吧？哎，看弹对吧？看弹词，来个斯安的萨斯啊，萨斯，好， ok， 就这么一段东西，我们来刷新一下目录，我就关了刷新， 是不是就是这个样子的呢？就这个样子的啊？啊，那么完了以后呢，接下来的话呢，我们把这个对吧？我们把这些 bs 啦什么的都把它包进来，我们来看一下， 对吧？我们都把都把他包进了，那么首先的话相对于我来说的话，就是帕布里克下，帕布里克下的， bs 下的， cs 下的，然后呢？不是 girp 点闷点 cs 还有一个是还有一个，如果学到组件的时候呢， 回到组件的时候呢，那么我们就一定要把它拿过来， bs 下的， gs 下的，然后呢把它点闷点 gs 好刷新，哎，你会发现硬是变了，硬是变了，这其实就是 bs 五，咱们在第二季里面最主要的要体现出来给大家讲的东西， 对吧？他的一个简单的使用他的一个简单的使用，这个呢，其实呢就全包上来了，对吧？就全包上来了， ok， 其实这呢就给我们后面打了个基础，说到这，其实本集就已经可以结束了，对不对？哎，他的应式呢就发生了一定的变化，那么在这呢简单的夹一点东西吧简单的夹一点东西吧，比如说我们来一个类 来一个类，完了以后呢？你比如说我们来一个背景颜色打 call， 对不对？背景颜色，然后呢我们来一个 fact 我们的文本颜色 vip， 对不对？哎？文本颜色 vip 是不是这呢？就是，其实就是简简单单的使用了 bs 五里面的东西了使用了 bs 五里面的东西了，对不对？那比如说我现在呢？形容他，形容他这个看头呢？然后呢？离上面的 mark man top 离上面咱们稍微保留那么几十个，对吧？稍微保留的一部分的 mon， 对不对？是不是？哎， 我们瞬间就已经打到这了，瞬间就搞定了，看到了吧，以及圆角啦，等等等等一系列啊，以及拍顶，拍顶的话呢，我们也可以加一些啊拍顶的话我们可以加一些，加一些拍顶 来看一下，来看一下。哦，因为我们现在用的是什么呀？我们现在用的是 d i v， 我们现在只用的是 h 一，对吧，其实我们用一个 d i v 也可以，用一个 d i v 也可以，我们来看一下，因为 h 一本身具有他自己的样式，来看一下，对吧？是这个样， 然后我们在这个人身上我们来看一下，刚才的话主要是加错地方了。好， ok， 完了以后呢，我们在这个地方我们来看一下你，比如说皮刚三，那么这样的话就有了拍顶， 是不是就有了？拍点。 ok， 那么这里的颜色呢？你也可以用你自己喜欢的吧，用你自己喜欢的颜色 money， 对不对？ money， 用你自己喜欢的颜色，是不是？哎，对，这样的话呢，是不是就很开心了？甚至这个颜色呢？我想让他变得淡一些， 等等一些他都可以做，对吧？这个颜色太深了，哎，我想让他变淡一些，怎么怎么办？在 bs 五里面已经非常强大了，这些所基本上我不能说他完美啊，但是他基本上解决了很很多 之前的 bsbs 二、 bs 三、 bs 四里面的很多地方的不足和灵活度上的不足啊。所以说 bs 发展到今天已经不是一套裤了，也 是一套四 s 四文件了，他已经演变成一套控价了，就是前端界面空价，我们今天就可以把它定位为前端界面空价他的一个 标准了。以前大家觉得他是一个非常简单的四 s 的，有啥意思呢？现在已经不是了，现在他已经非常标准化，非常标准化，对吧？他的可扩展性已经非常强了。 ok， 那么到现在为止，那么我们第二集去简单的说完了。好，谢谢大家。

好，回到我们刚刚这里啊，我们刚刚在这里面不是去步子 stop 里面看了一些基于步子 stop 构建出来的这种响应式的网站了吗？那接下来的话我们就要去学一下， 不能错过。那怎么学呢？不能错过的这个学习路径啊，他基本上遵循于我们上面给列出来的这几点。第一个就是关于什么他有入门 全军事业城市主见，借此插件，然后的话定制，我们这里面现在又学不到，一般情况下我们就不用去学他了，那就学前面的这几个部分就可以了，明白吗？好，那知道这个了之后，那我们就知道到那一个不是错误的这个什么学习的这个什么方法啊？不是错误的这个学习方法， 那学习方法是完全基于官网上给我们的这个学习步骤啊，那我们就这一个一个来。好，第一个的话，那如果大家要用的话，那就在这里面或者 top 他是一个什么？我说了他就是一个别人跟我写好的 四 s 是文件，我们拿过来用就行了。那在这里面的话，他有几种？什么几种文件？那这几种文件的话呢？啊，我们用的话其实用这个比较合适，用于什么？ 这个已经给我们处理好了的，像这个的话，之前我们不是给他借过杀杀死了吗？这个就用杀死帮我们写好的。除了杀死的话，他还给我们提供了一个什么，提供了一个 nice 这个版本的，那大家根据实际的需求，假如说你后期想改这一个不得差不里面 默认的那些样式的话，那你就把刹的死或者说 nice 下下来，然后你重新写修过来之后，然后再重新变一层我们想要的面吧。好，那这个下好了之后，接下来呢我们就要去用， 那在用的过程中啊，大家可以看得到这里面有一个东西叫不得，不得不得是 cdn， 那在这里面大家可以先去查一下什么是 cdn 啊？这个东西的话一般在做我们网站提速的时候，在网页做性能优化的时候， 我们会用到 cd 这种技术。好，等到后面我们项目上线了，我再给他具体解释这一块的东西。好，接下来的话还有其他的方式啊，还有像这个豹，还有像这个 npm 都可以用，那我们的话就自己去下载，下载了之后我这边已经跟他下好了，下好了之后我放到对应的这一个里面，我给他拿过来。好 啊，找到对应的这个资料，资料里面这个地方的话就是我们他下好的这个版本啊，下好了之后，那我们把它放到这里来，放到这里来之后，然后进行这一个什么解压， 你解压了之后啊，他这边就给我们提供了很多的东西，然后再把它解压出来，解压出来之后我把孩子也放到外面一层啊， 不用放那么多层。好，大家可以看得到啊，他其实就跟我们我们要用的其实就是他给我们提供的一个 cs 这个文件，当然 cs 他给我们提供了很多种，那在这里面其实 我们关心的其实就这一个跟上面的这个啊，那大家需要注意啊，这一个只是上面的一个压缩板，什么是压缩板呢？ 下面的这个相加于上面的来说，它里面的那些空格换行什么全部都去除了，因为我们说过 cs 是对空格换行不什么不敏感，所以说的话是给去除了。你看去除之后再往这个文件的大小，他相比前面的他大概是不是减少了三十 kb， 然后减小就是为了网络传输的时候快一点，那我们在本地开发的时候一般用这种文件，然后项目上线了，一般用迷你文件，好吧？好，接下来的话呢，我们把这个文件打开，看一下他到底长什么样一个样子。好，那我们点到这里试试，我们看一下这个文件。 好，然后以及对应的这个迷你文件。好，那大家需要注意一下啊，这两个文件其实本质上来说都是一模一样的，只是后面的这个文件，迷你这个文件他把代码全部干嘛压在一起了，然后的话 前面的这个是没有压缩的，没有压缩的话我们阅读起来就方便一些，好吧？他给我提供了很多的这些类，明白吗？那我们在合理的去运用这些类，然后就可以做我们的开发了，明白吗？好， 那知道不能插补这个了之后，接下来的话我们就去用，那用的话已经下好了，下好了之后接下来大家需要注意下，你用这个不能插补呢，他也给我们提供了一个简单的一个耳机天把模板，那我们需要按照这个模板来写我们的这个代码，明白吗？好， 那这边呢，我们就把他的这个代码把他再点这里。货币也可以啊，货币分出来，货币分出来之后，然后在这边我们需新建我们的第一个页面。 好，然后的话这么淋一啊，我就往淋一吧啊淋一啊，鼻涕，然后踹 好，这样做好了之后，接下来我们就把这个都不要了啊。好，那这边做好了之后，大家可以看得到他跟我们做的这个页面结构呢，其实 是啊，大致上也是差不多的，然后就是也是个与天白骨的文档，明白吗？做好了之后，那接下来的话，这个抬头我们其实可以很好的看清楚，那这个的话，是不是就是我们的这个不是川普的这样一个， 我们把不能错把弦写为 bt 啊？好，接下来的话，他引落了一个不能错把的一个样式文件，其他是引的一个什么，引了一个线上的地址，你看这是个绝对地址，明白吗？那我们为了本地调试方便，那我们快一点，我们就拿哪一个当前目录下。 cs 是， 这不是创文里面，他不就有一个四 s， 是吗？四 s 里面不有个不是创文四 s 吗？那我们一个本地的。好，接下来的话，这里面还有两项代码，这两个代码是什么意思呢？这两个代码啊，大家需要注意点。注意啊，就是因为我们现在还没有学， 还有天马五里面的一些雨衣标签，大家需要注意啊。后面啊，下面的这个东西主要是为了啊，主要是为了解决 这个什么，解决这一个什么，就是按一下啊，不能识别什么不能识别啊？哪一个呢？不能识别这个？而且天脉五里面啊，里面引流的什么？引流的 一些新的什么新的雨衣画的啊，这标签明白吗？在 htm 五里面其实引入了其他的标签，例如像 have 这种标签， liver 这样的标签，明白吗？那这些标签的话在 i 一下是识别不出来的。 都说需要引入这两个什么两个文件，那这两个文件里面大家可以看得到，下面这里面多了一个这样一个东西，这个东西的话他代表的就是什么？就是义父，就是 如果 l e 就是小鱼，如果说小鱼二一九的话，他才会加载这两个文件，明白吗？意思说你可以这样理解，下面的这两行代码，只有在二一六七八下他才会发网络请求，不是二一六七八 他是不会发送网络请求的，这就相当于一个判断语句。好，那这个的话跟我们本次课程到关系不大，反正你按照这个模板引路就没有问题。好，那这样做好了之后，接下来的话，我们在这里面的多线我们先暂且用不到，那我们在这里面就可以看得到，现在这个就写好了，写好了之后呢？这个的话我们只需要引一个 不是 top， 这样那个文件。好，那我们就说不是 top 给我们提供了很多，就刚不是说了吗？不是 top 提供了很多的这种什么很多的这种样式类吗？他不是提供了一个不是 top 点 cs 文件吗？那有什么样的东西呢？例如我们家说快速的先放在页面上，然后做一个什么，做一个版型，那我们直接写一个孔腾的。 好，这个啊，好，你直接这样写一个孔子，那这样写好，这写好了之后他会自动的。干嘛呢？这里面还有自动的啊？帮我们就不得超薄，不得超薄，提供了一个 什么？提供了一个叫做什么？一个叫这个问题 an 一样的类啊，这个类就可以根据啊不同分辨率的大小 来确定什么来确定这个版型，明白吧？那等下我们再去看啊。好，那除了这个的话，假如说我们在开发的过程中，我们家是想快速的有一个什么快速 出来生成一个按钮，那这怎么办呢？我们可以直接这样做啊。好，那我在这里面我给一个 a 链接，那我在这边做好了之后，大家看，我在这边一个 plus， 一个 bt， 然后一个 bt 杠是个色式。好，这个的话是我们的按钮一， 那出了这个的话，我还写一个按钮啊，大家看，在我不会设置的情况下，我只需要合理的去使用这些类名，然后的话他就 可以购买的，他就可以跟我组织好一些。什么这一些按钮大家看啊，我现在什么都没学的情况下，我 比我 cs 都不会，我只要合理的去用这些类名，大家看组织出来效果长什么样子好，然后在这边去看一下，大家看这个时候有按钮是不是就可以看到这两个按钮了，明白吗？好，你看相比于之前来说， 这个你好世界是不是放到我的坑坑了之外的，他是不是就是顶着我们的浏览器显示的？但是大家看一下我们的这个按钮是不是放在坑坑的里面的？坑坑的是不是就相当于有一个什么？有一个板心，他是不是居中了？ 并且我们可以把这个孔腾的自己手工的干嘛去调点样式用，我们学过四 s 是什么？好，然后在这边我们是不是给他一个 bd， 好，给一个什么？给一个这个蓝色的这个边框啊，做好了之后大家看我刷新一下，大家可以看得到这个 bd， 这个孔腾的是不是有 有一个什么一个板心，看得到了吧？并且板心两侧他是不是有一个什么，有个内填充，明白吗？但是你看你好世界他是没有板心的吧？没有，他是不是通蓝的，因为他没有放到什么，他没有放到孔子那里面，但是如果我把它放到孔子那里面，大家看他正好有区域什么版型来显示了，看到了吗？ 这个时候我们如果去改变浏览器的大小啊，大家看一下啊，你看我刷新啊，我的我的这个浏览器现在是这么大的吧，你看我在缩小的时候，这个版型也感觉在什么？是不是在缩小并左右两侧 这个版型的左右啊？他都会有这个潘地内填充，大家看再缩小，再缩小，你看是不是又，这个版型是不是又变了？那我再缩小，再缩小，你看这个版型是不是在不断的什么？不断的在变，好，当我说的足够小的时候，大家看是不是都会有一些变化？你看这好，你看变，那我们可以 手工的去看一下这个版型到底有多大啊？那我们可以通过右键，然后检查元素的方式，我们把它调到 pc 模式好，然后在这里我们去看一下他的这个孔腾的这个大小，好，在这边我们看一下这个孔腾的，大家看 这可能的大小现在是多少？是不是这个什么幺幺七零这样一个大小，明白吧？好，那我再把它缩小一点点啊，大家看 再缩小，缩小的时候，你看现在这个大小是什么？九七零，好，然后我们再把这个再缩小一点点，好，缩小这个时候大家看他的大小是不是七五零，明白吗？好，然后的话我们再可以去缩小一下他，好， 这个你看再缩小的话，这个他就什么，他是不是相当于就四中了？就是你屏幕有多大，他这他这个自己就会占据了，明白吗？ 这边出来的这个是由于他本身的这个填充啊，盘顶造成的。版型的话是什么？你看两侧是什么有留白的啊？所以说的话 大家大致可以看得到，那在我们开发的过程中，那这一个他的版型是不是在不断的什么不断的在变化，那为什么会不断的变化呢？这个的话底层就基于我们的哪一个呢？叫迷掉快锐，大家可以大致看到类似这样的语法，他就可以帮我们去实现，好吧？ 好，这个呢？快速入门啊，就说啊通过，对不是错误的，这个什么快速 通过，对，这个 bottop 的这个什么快速入门的使用啊，我们发现 我们只需要什么，只需要合理的去什么？合理的去使用 c 或者插播提供的什么，提供的这种样式类文件或者类名 即可，什么即可实现快速的这种什么快速的这种布局以及一些什么一些其他的样式效果， 是吧？布局的时候我们刚刚明显可以看得到这边是不是在不同的屏幕下是不是有不同的版型，并且我们在这边是不是通过我们写的话是不是按钮也出来了，知道吧？

哈喽，小伙伴们大家好，我们久违的这个 web 前端课程又很久没有跟大家见面了啊，那么之前的话，我们其实在普特 当中啊，给大家要介绍这个是 boot strip 这样的一个框架啊，我们给大家来呃介绍这个框架该如何去开发，对吧？那么这个框架课程的话呢，应该来说是属于在我们这个 web 前端课程当中的一个前置啊，前置就像前有， 对吧？那么那个课程学完之后的话，再来学习我们现 在的这个啊，不得不得这样的一个开发教程啊，那么我们废话不多说，这节课我们主要用这个 vs code 来搭建我们的这个开发环境啊，那么我们为什么要选用它呢？首先第一个， 呃，就是我觉得啊，这个作为一个开发人员，那么我们各种开发工具啊，我们首先你自己平时的时候可能习惯一种，对吧？那没有关系啊，那么其他的一些开发工具的话呢，我个人认为啊，你还是都要去接触一下啊。那么 visco 的话呢，这款开发软件也是属于非常知名的，因为他 它是属于微软公司开发的一款产品，那么大家都知道微软公司开发出来的产品啊，必定都是精品，对吧？那么为什么呢？这个是也是老牌的软件公司了，对吧？那么我们也知道啊，老大啊，比尔盖茨啊，这个就 不用说了，世界首富已经占据多年，对不对？那么我们现在他这个 vs 扣的啊，他有哪些功能呢？首先第一个就是我们现在符合我们的 but strip 的一个网页开发的一个课程，那么他 其实啊不止还有这个功能，他还有可以用我们的这个点奈特的一些来开发，还有什么新需要的，什么 pison 什么都可以。为什么说他会这么的强大？因为这款工具这个 vs 扣的仅仅只是一个编辑 而已啊，那么他的强大之处之所以会强大呢，是因为首先他那个开源出去了，完了之后他就有很多的这个社区的这个呃同志们呃在开发，那么相当于一些大牛老，或者说是一些呃其他的一些呃很多的一些优秀的开发人员，对吧？他们在做什么呢？做的就是这 这个呃 vs 扣的一些插件，比如说把它弄一开始的时候，它可能是因为未来公司开发的这款工具的话呢，它一开始是属于呃英文的，那么我们还有呢，就是可以通过一个插插件的安装的话呢，我们就可以把它 转成中文，这是一个。那么其他的比如说我们呃有的 啊，就是可以解析我们本地的这个这网页的啊， gs 的一些 这个一些代码的，那么这样的一个服务器的，好像 gs 的一种服务器的环境啊，那么他也是可以通过这个插件可以去安装啊，包括一些其他的拍摄的一些解释器啊，啊，给他一起合合着一起安装啊，对吧？这些插件啊，哎， 各种开发环境都可以被他搭建，因此啊，这款工具在开发人员的心中啊，应该来说是属于非常的呃，非常的实用吧，应该来说啊，那么我们来看一下这款开发工具啊，其实我们也是可以看 到的这款开发工具，因为他是属于开源的话呢，我们这个现在网上一搜就搜到了啊，那么我本地上其实已经安装了， 那么我虽然说安装了，我们在现在百度当中也给大家搜索一下，那么这款工具的话呢，大家应该也要自己能够会去找，对吧？什么？首先他的一个官网是什么啊？我想知道，那官网就是扣的 with you studio 啊，然后呢是这个 看好点 com 啊，我们就直接点进去就可以了。点进去，那么点进去之后我们发现的是这样的一张网页，这样的一张网页马上就可以让你进行下载，对吧？下载他会有各种版本，因为他是一个跨平台的一个呃，编辑器嘛，那么他可以在呃马克上面啊，马克笔，马克笔记本上面，马克电脑上面，苹果电脑，对吧？啊？ windows 电脑啊， 还可以在 linux 电脑上面啊，这几个电脑平台上面都可以编辑，因此这款编辑器啊才会受到这么的欢迎啊，好，那么各种开发人员在不同的这个使用场景下面都能够使用到， 对吧？然后呢他这个地方大家看到最后一块有一个扩展啊，这个扩展的话其实就是叫做插件，对吧？那么这个地方他点了之后的话呢，这个首页这当中他显示了目前他显示这个什么，一个是拍摄对不对？拍摄的一个调试啊，然后呢后面的话有 c 加加 c 语言啊，什么其实，呃什么还有 view 啊这一些 等等一些有利有用的这些插件啊，都可以能够被我们去使用哎，这种各种功能都可以被我们去使用的话呢，就使得我们这种在开发的时候啊， 就好像这款编辑器感觉很灵活，对吧？那那么它能适用各种的场景，然后呢我们这款编辑器的右侧这个位置啊，就是正式的属于编织编辑区了啊，编辑区的时候大家看到他是属于啊，他在写这种对象啊，属性的时候的话呢啊，都是属于一一级一级啊，副级子级是属于这个 用点之间啊，然后呢后面会有很好的一个语法提示，对吧？那么这款编辑器这些功能就显得非常的强大，大家直接到了正边之后的话，就直接下载就可以了啊，因为我已经下载好了时间关系，我这个地方我就不下载了。那我们简单的看 来看一下这个地方他有哪些功能可以调试，对不对？因为他其实主要啊，那么还可以这个地方啊， beauty in get 啊，是不是什么意思呢？就是可以在这个 get hub 上面，我们可以把我们这个代码实时的进行 啊，写完之后啊提交上去啊，或者说攒下来，对吧？这些功能都是非常强大的，这个还有是一个扩展的一些功能啊，那么这一款开发工具的话呢，有很多外国人在使用，对吧？外国的这个程序员在使用啊，那么我我我身边有一些外国的这些啊，程序员的话呢，他们也他们用家了， 咱们也是也有用这个啊， vs 扣的等等啊，他们当然用的这个工具还是比较灵活的啊，什么 adt 啊，这些也是在用的啊，就相当于一个程序员的话，你拿到呃，一个一一些程序的时候，在各种平台上面，你至少要能够能够怎么说呢，基本上还是能够有个入门，对吧？你不能最好不要就是说这 工具啊，什么都没接触过啊，如果没接触过当然也没有关系，要冷静下来，对吧？把它能够学好啊，那么这个地方的话还有这个给给给按 也是在一些命令，对吧？啊？然后可以提交上去啊，那么这个地方有一些扩展功能，就相当于是刚刚的一些明细吧。啊，那么这个最后的话呢，还有一些啊，这个下载平台啊，直接就可以点击下载就可以了，那么我的话呢是属于六十四位的啊，因为我这是属于温室六十四位的，对吧？那么我就下载六十四位，大家如果是三十二位就下载 三十二位的啊，那么你如果说是在零零四平台或者是 max 平台都可以建议下载。 ok， 那么这个地方 大家比如说这个地方大家在看的时候啊，呃，你觉得英文比较麻烦怎么怎么办呢？你现在我们用的是这个谷歌浏览器的话，我们可以右键啊，右键这个叫做翻译成中文啊，中文简体，对吧？那么这样的话呢，这些都可以变成中文， 你就可以进一步的进行了解了，语法突出，对吧？哎，可以高亮啊，显示可以打断点啊，来调试这些语句，等等，这就是啊，你看这样的一个代码编辑器啊，代码编辑器，好，接下去我就来直接安装了，因为我已经下载好了，大家直接下载就可以了啊，那么我们就 直接安装，我下载完大家，我下载完成之后的话呢，就是这样的一个安装软件，大概有五十三点，呃，五十三点九兆，大概是五十四兆左右，对吧？那么我们就直接双击安装就可以了，那么这款软件的话 也是比较绿色的，我在之前的有一期给大家老刘问答当中给大家就是介绍这款软件的卸载，对吧？在卸载的时候呢，他其实自己已经提供一个软件卸载了一个路口，卸载之后他就会清的比较干净了啊，我们现在这个地方他有个提示，双击之后这个什么意思意思呢？大家看到这种提示啊，千万不要怕，你要去读一下，因为他这 地方都是有一些英文的意思给大家解释的，对吧？ this use the install 那个什么意思啊？你不是一个用啊管理员模式运行的啊，你是否还要继续？那么我们又重新来一看右键用管理员模式，我们来看看啊， 管理员身份啊啊管理员身份啊就就不一样了，提示就啊上面还是有这些，哈哈哈。安装者不是是是不是不止跑在呃，作为一个管理员什么什么什么啊，那如果你喜欢安装 vs 扣的啊 啊给所有的人啊，在这个系统上面，那么我们就下载就得得就去这样的人像， 那么我这个地方因为已经下载好了，下载好了大家直接装就行了，我们直接点击确定他这个地方也是一个提示啊，他就是相当于有一点广告类型的，有我感觉对吧？还给你一个一个呃什么这种链接啊什么的啊，那么我们这个地方就接受， 接下去就是点击这个接受协议啊， vs 扣的，那么这个地方其实这个这个就是我们简单的所说的话，就是他就是一款编辑器啊，这个编辑器的话呢，类似于我们的这个文本编辑器啊，什么记事本编辑器对不对？ 那么只不过这款编辑器的话被二次开发了啊，然后呢他的一个功能就非常强大，还可以进行插件的扩展啊，然后在我们自己呈现进行开发的时候的话，也会显得非常的舒适啊，那么我们在这里面的话， 我们给他装到这个啊 c 盘啊，我们把这个 m m v s 扣的，对吧？ v s 扣的这个文件夹，我们给他浏览一下吧，浏览一下，比如说我们浏览到这个 c 盘的这个，呃， program， 因为 我们是六十四位吗？我们就直接就 program five 好了啊，浏览到这里，好，我们下一步，下一步。呃，是否要创建这个开始菜单啊？那默认情况应该是要创建的，不创建的话你就呃这个地方就勾掉就行了。开始菜单就是在这个位置，对吧？开始菜单点击一下他就会有啊， 那么是否选择安装的这个位置，然后呢开始猜单创建的时候的话呢，他会有一个这样的一个文件奖啊。 vs 扣的。 ok， 那么我们再点击下一步，点击下一步之后我们在这里面要执行哪些任务呢？我们来看到啊，这里面的话呢，他有一些选择，请安装这个，安装这个什么程序的带来 任务啊？什么？是否要创建桌面快捷方式？那么我们这个地方就创建一个桌面快捷方式啊，反正自己要用到，对吧？哎。然后呢我们在这里面的话呢，默认情况他有个勾叫做添加 pass 啊，添加到 pass 什么意思呢？添加到 pass 的话呢，实际上就会添加到这个啊，这个地方， 这个地方就是有一个啊，我们我们比如说现在到这个有个伏电脑啊，就是我们自计算机里面有个高级的环境配置啊。呃， 高级系统，高级系统设置，高级系统设置，这里面这个地方有一个叫做高级，对吧？高级高级。这里有个叫做环境变量啊，环境变量这个 pass 其实就是是要添加到这个环境变量的呢，这个 pass 当中啊，是要添加到这里面，要是添加这里面有什么好处的？添加到这个地方的话呢，我们 是意味着就可以用呃 windows 的这个系统命令啊，就可以去运行了，比如说我们就在 windows 键加上 r， 对吧？用 用 c m d， 哎，然后呢这个地方呢，输入一个 c m d 就是相当于可以在面临提示服当中去运行一些他相关的一些 指令啊，在这个地方就可以运行了，这就是添加到这个 pass 的一个好处啊。这个地方我给大家应该是介绍的非常细了啊，如果说大家听到啊，如果说你没有跳过听到这一步的话呢，你如果还不懂的话呢，这个地方应该是呃属于比较精华的一个部分， 那么这待会的话我简单要进行记录一下。好，那么我们接下去的话，他这个地方还有就是其他通过扣的打开添加。呃，操作 windows 什么什么窗，呃，什么什么目录啊，这个地方我们就不要将客的注册为支持文件类型的这些编辑器啊，这些东西我们就暂时就让他默认不勾不勾选好了啊，如果勾选的话呢，我们其实就多了一些呃，多了一些他的一些默认的一些控制嘛，比如说这个就是默认文件嘛，对不对？ 然后上面的话就是呃你的一些操作菜单啊，相当于这种这种操作菜单。好，那么我们下一步我们就不用管那些菜单 里面，我们直接需要他打开就打开就行了啊，对吧？然后我们目目标安装位置一些其他的一些任务，他这个地方就写的非常的清楚啊，然后我们直接点击安装就可以了，安装起来也非常快，因为他只有五十四兆，对不对？很快就好了。我们他他其实做的一部安装的时候，大家看到啊，一个程序他安装的时候其实在干什么呢？ 其实就是一个解压程序的一个过程，对吧？其实就是说我们有点像我们平时的这个哎呀的这种打包啊，无非就是说他这个地方的话打包成的是一个 ex 的可执行程序啊了，然后可以让你一步一步 下一步的进行下去的，然后最后还有一个注册注册表的这个功能，也就说默认装完之后的话呢，应该是我们在我们的 regail 里面注册表里面是可以看到的，对吧？啊？这个地方就 就是启动按 vs 扣的啊，我们就直接启动好了啊，装完之后就直接启动了，我们简单的来哎，标注一下啊这个地方，那么我们这个这里面概述一下这地方的话呢，这个 vs 扣的 vs 扣的啊，工具啊，可以，呃，是是什么，对吧？首先第一个是什么？是什么是是什么呢？是一个文本编辑器啊，编辑器，那么这个地方的话呢？编辑器，编辑器，这个编辑 是非常高级的啊，非常高级的，他可以强大的啊，强大到哪一些东西呢啊？可以编辑啊，所以可以进行什么开发环境的代码编辑，对吧？各种啊，开发环境的代码编辑， 代码编辑啊，那么这个地方各种开发环境，我们指的是有哪些开发环境呢？比如说我们现在 的话就是有一个前端开发环境，对吧？ a 区天庙啊啊，这个前端开发环境的话就是 h 天庙啊，什么什么什么 css 啊，对吧？啊，这个，这个肯定是可以的啊， css 啊，对吧？然后呢？这个地方还有其实是 js 也是可以的啊，那么还有就是比如说是加网啊，加网啊， c 语言， 那我们就简单的列几列几列一些啊，啊？ c 元 c 佳佳啊， c 佳佳，那么 c 下巴当然也是可以的，这个 c 下巴就是点奈他的一个功能嘛，对吧？简单的基本上是属于这一些啊，那么什么 php 当然也是可以的， 他很多啊，呃，基本上这些东西就相当于是桌面端的这种开发啊，基本上在这个地方啊，就会用到了啊，啊，那么呃，桌面端的开发，或者说软软件的一个开发，对吧？网页的一个开发啊，基本上用到这些啊，就比较 差不多了啊，差不多了，那么我们呃常用的就是这个地方，对吧？那么我们他的话呢？下载第二个啊，从哪里下载，对吧？下载，那么下载的时候的话，其实是微软官网啊，就这个地方其实是一个是微软，微软的啊，微软公司开发的开发的 vs 扣的 你也是扣的啊啊官网啊官网。那么这个官网的话呢我给大家这里面其实标注一下，其实百度一 搜就知道了啊那么我们列的话呢还是列一下这个官网对吧？这个官网壁纸好，那么他可以提供第三个可以在哪些操作系统上对吧？可以在哪些 哪些操作系统上啊上运行啊运行这个 vs 扣的啊，对吧。那这就比较关键了啊哪些操作系统上去都可以啊什么 mark 啊什么呃马 mark 上啊对吧。哎 mark ok。 那么什么 windows 啊 windows ok 这一类那基本上是还有一类就是 linux 对吧？ linux 这几类啊这三类其实都可以啊。好那么呃这这几点我们在接下去的话就是一个安装了，对吧？安装的时候的话我们提到一个就比较关键的啊，就是说安装的时候安装 软件的时候啊提示啊什么加入到 pass 啊 pass pass 是什么意思对吧是什么意思？那么这个地方的话主要是呃到哪里呢？就是相当于是呃加入到啊意思是加入到什么呢？这个环境变 电量啊电量中的这个 pass pass 张 pass 中对吧。那么这样的话呢呃有利于什么呢？有利于这个进一步使用命令 命令控制控制这个什么开发环境编辑器啊 啊编辑器相关的相关的功能啊就可以找的起来起来就相当于方便一点啊什么的啊。那么我们这个 地方现在已经装完了啊那下一下一步的话呢就是我们就呃因为哎这个地方我装完之后我上一次已经汉化过了所以他这个地方 因为我是第二次安装了，那说明他这地方我，我下次上一次卸载的时候，说明我们在这个里面啊，我没有把某个文件给删掉，对吧？或者说是他这个地方，呃，我在安装他的这一个叫做什么呢？汉化 工具的时候啊，他是在另外一个文件下当中啊，就是我没有把它删掉，对吧？那么我们这个地方如果说大家装完之后你是一个英文的 状态，那该怎么办呢？可以汉化，点击这个扩展啊，这个扩展这个扩展，这里面的话呢，可以搜索这个 chinese dhin ese， 对吧？搜索全历史，搜索这个全历史啊，那你这个地方点击一下，点击下，然后呢这个地方点击安装就可以了，那么我这里面现在你看这这些这些安装的是一个复杂版本，这相当于繁体版本的，对吧？我装了一个简体版， 当然这个地方你看，哎，就相当于在这个环境，当环境的扩展当中可以有，有卸载，可以有安装啊，你就这这里点一下就好了， 点一下之后我们这个软件再进行重启就可以了，对吧？那么接下去的话呢，其实我们重要的一步的话呢，在这个地方其实就是汉化的时候，呃，需要大家呢就要把这一块给啊， 给给给，能掌握的，对吧？要给能掌握的，那么首先的话呢，就是点击的是这一步啊，然后呢点击的输入这个权利，对吧？那点击他，然后最后再再就是安装就可以了，这这几个箭头的位置啊啊，这几个箭头的位置非常重要，那么如何将软软件汉化啊？ 如何将，哎，这个这个怎么是全黑的啊？我们给他稍微重新标注一下啊，标注一下 如何将软件汉化，对吧？将软件汉化， 如何将啊？软件汉化汉化，汉化其实很简单，只要呃这样的一个图给大家一看就可以了，对吧？输入一个权利马上就知道了啊，这个地方汉化的步骤啊，那么然后最后呃就是 安装完成，安装完插件啊插件后，直接这么直接就是一个 呃重启重启软件即可啊，即可完成这个安装啊，那么我们这样的话呢，这个软件的安装汉化就没有问题了，对吧？那么接下去的话， 我们无非就是要装的是，比如说有一些我们为什么用它呢？其实它的话呢，其实有一个波特 stribe 我们也可以收到啊，波特 stribe 它里面也有类似的这种啊，你看这个地方啊，我这里面安装了一个 v 四的啊，因为 我们到时候讲给大家讲的时候呢，就是讲一个 v 四这个版本啊，那么我们就讲这个 boot strip， 那么这个波特 strip 我们讲的时候的话呢，我们就把这个地方输入之后，我们就把这个呃 v 四给他安装上去，那么这样的话有什么好处呢？就可以相当于是有些呃很多的这种这个 代码提示啊，就可以给你用到了啊，那么我们就加下一步的话呢，我们其实是要安装这个插件中安装 啊，这个第一个，对吧？那第二个呢？就是啊，在插件啊插件中输入这个 boot 啊 strip 啊，然后呢安装这个 v 四 v 四版本的啊，安装 v 四版本的插件啊， 差键，因为我们现在这个波特斯 gap 的话，我们这个官网上次给大家看过啊，他就是属于 v 四这个版本的，对吧？ v 四这个版本，那么这样的话呢，有利于代码提示啊，有利于啊，在开发的时候代码提示 啊，这个地方就非常关键，对吧？非常关键，那么提示的话我们就可以省很多的这些事情啊，那么这里面有很多 v 这个版本啊，大家看到啊，那么我们就先建议先装第一个好了，普通的这个 v 四啊，还有就是这些字体啊什么的，后面的这种都是属于字体啊啊， ov 啊，这个什么发放词放放特什么什么什么，这个 这个的话呢，他其实是免费开放给这个 boot strip 的这样的一个字体图标啊，字体图标他都里面也都有了，这相当于那就非常的舒适了，对吧？啊， 那么后面的话呢，我们就相当于在这个地方我们环境已经搭建好了，对吧？那我们在这里面的话，直接打开编辑器，打开这个项目创建就可以了啊，那比如说我们这里面，我我这个地方，我我现在这个路径的话，我项目已经已经把它给创建，就给它给它已经关掉了，那么我们这里面自己可以 新建一个文件，或者新建一个文件夹，或者自己打开的文件夹都可以，对吧？都可以。然后呢自己新建完的文件夹，把它在这里面打开也可以，那或者说你自己新建一个文件也可以啊，比如说自己 简单的一个新建一个文件，然后保存啊，保存， ctrl 加 s 保存，那保存的时候我们自己保存的，比如说我们现在假设这个地方桌面上有一个镜片的，这个买位吧，对吧？假设我们自己这里 面有个马位吧，那么我们这个地方保存的时候，这里面大家注意啊，保存的这个地方如果说你自己有一个这种格式的话呢，你 假设这个地方我们要保存成 html 的，对吧？那么就你就选择这个 html 啊， html 呢，假设这里面有个 index 啊， ok， 那么我们就这样就可以把这个 html 的这个网页给保存好了，对吧？那么这样的话呢，就是一个最为基本的一个网页，就说是 进与编程啊，改进与编程，那好，那么这个地方的话呢，我们就啊时间啊，这里面右下角还会提前更新啊啊，及时更新，那么我这个地方我可以点击更新一下，如果说大家已经安装完成之后，后面后期还有一些更加 多的内容，他也会可以更新，那么现在刚刚我在桌面上不是创建了一个买外本吗？对吧？那么这样的一个网页其实就有了，我们直接打开之后就会出现一个流金于编程，那么这个地方我们知道啊，这个地方掌握我们之前的这个课程的话呢，这个都是知道的，对吧？那么 我们其实在这里面这些代码都还没有写了啊，真正的我们还得写这个 h 学喵的代码，对吧？啊？那么今天的话，我们主要是因为这个环境的搭建啊， 搭建完成之后，后面我们来给大家制作一个第一个的这个不得死坠的这样的一个啊，小小的一个案例啊啊，好，那么我们今天的话呢，最后给大家进行一波总结，在好，那么我们来 看一下，呃，如果说你看到这里啊哈欢迎为我的这个教程啊啊关注点赞留言啊，订阅啊，如果说你还喜欢的话啊啊，继续看到后面的这些课程啊，那么，呃，这里面的话，哎，我们这个这个地方， 哎，这个地方我们给它放到底层啊啊底层啊，那么这里面的话呢，我们其实还有就是大家可以在其他的平台，比如说在抖音上面搜索流经域啊，就可以找到我的更多的视频教程啊，或者说在 这个西瓜视频当中搜索刘金啊，就可以找到我的一些其他的一些教程合集， ok， 那么我们呃最后来总结一下今天给大家讲到哪些东西呢？首先就是，呃什么？是啊，对吧？啊，讲到这个 vs 啊 扣的啊扣的的作用啊，作用啊，概念和作用减减要概数，对吧？ 也要盖住， ok， 第二个的话呢，其实主要给大家讲到的是一个 vs 扣的啊环境的，呃环境的，呃，这个环境插件的，对吧？简单啊，简单安装 与卸载，安装于卸载啊这两步，对吧？好，那么这里面的话呢，我们主要是涉及到一个叫做汉化，对吧？主要是一个汉化，一个是汉化，一个是就是，呃，就是这个代码提示，对吧？ 代码提示相关的插件啊，插件啊，那么其他的还有一些，其实还有一些很多，比如说我们写 html 的时候，写 css 的时候啊等等，那么这样的一些啊插件的话呢，后面还有需要的时候，我给大家再进行介绍啊。好，那么我们今天的话这个教程就讲到这里，如果说你还喜欢的话呢？ 欢迎哎，为我的这个教程点赞啊，流星编程啊，编程创造城市。好啊，小伙伴们，那我们下期再见，拜拜。

下这个 bootstrap， 呃，那么这个 bootstrap 呀来自于 twitter， 呃，是目前呢很受欢迎的一个前端框架， 那么不下巴是基于 html css 和加 skebe， 那么他简洁灵活，使我们的外部啊开发呢变得非常的快捷。 呃，注意这个不是下巴呀，其实呢是怎么出现的呢？是啊，这个脸书大家都知道，是吧？哎， facebook， 当然呢， facebook 这个推特也属于 facebook 是吧？ 啊，那么这个 facebook 呀，啊，里面他有一个叫，呃，类似于这种 haction， 就是每年都会有一次。什么呢？啊？这个叫技术大会啊，就是呢，在一天的时间里，或者在一段的时间里面啊，你们去自己去创造创作去吧，然后呢，创作出来之后啊，参加一个评比， 然后呢平底啊，第一名啊，冠军奖励一百万啊，叫名啊，这个百万美元，是吧？然后呢，当初呢，这个下巴就是有两位公司啊写出来的， 一会咱们回去看啊，其实他难吗？不难，但是为什么他会得奖呢？因为呢，他将我们的开发变得非常的简单啊，让我们的开发变得非常的简单啊。 好了，那么注意它是对 htmlcss 加斯给的一个封装，那么使用它啊，使用它，我们啊开发起来更加的容易。 嗯，然后呢，我们呢，只需要使用它已经甚至好的类或规则就可以快速的创建出业 面了啊，就可以快速的应用他提供的功能，什么意思呢？他越类似于我们呀，嗯，在这里面定义的，我们在在写项目里面定义的什么呢？定义的这个圆形类啊，比如说呢，我们呢想画一条线，咱们怎么做就行了，哎，咱们是不是在下面添加一个 dna 点烂是不是就可以了？ 哎，我们一看，哎，怎么样啊，在下面是不是多了一条线呢？哎，就是这个意思，他给我们呀，里面提供了大量的肋，大量的规则，我们直接使用就可以了， 但是呢，这个里面具体实现怎么实现的不用你管，因为他已经给咱们实现了，你想想这是不是很简单呢？很容易。男的是什么呀？哎，这个线，这个 啊，再有这个梯形，这个线啊，这个不一，不是等宽，这个线怎么画出来呀？哎，你把它画出来很难，但是你想使用它是很容易 的啊，那么不错，就是这样的，给我们提供了大量的类，我们可以直接使用，比如说我们盒子啊，其中我们是不是给他一个肯定的类就可以了，哎，他里面有大量的类似于这样的类，我们直接使用就可以了， 那么这就是咱们的这个 boostrop， 那 pootrop 呀，使用了一些 h 五和 css 三的属性啊，比如说后面咱们讲的媒体查询，我们后面会将响应式啊， 那么为了让他正常的工作啊，那么需要使用 h 五文档类型啊，就是 dog type h t m l， 这是我们以前讲过这个 h t m 五的骨架啊，这个文档声明，那么如果在 ctrl 中创建网页开头啊，不使用 h 五的文档 啊，那么可能会面临一些浏览器显示不一致的问题啊，据说呢，它里面 使用了一些 h 五的元素， h 五的属性，那么如果呀，你不把这个页面声明成 h 五问道，那么在不同浏览器下，那就会有这种兼容性的问题了啊， 那么框架是代码的可重用设计啊，体现为一些主见或抽象的方法， 就说呢，四岔吧，为什么让我们开发更加的容易，因为他的可重用啊，可复用啊，可重用啊，在这方面做的非常的好，我们啊可以在一门中大量的服用他给咱们提供的功能啊，就说呢，很多功能啊，都给咱们写好了， 哎，那咱们使用起来是不是非常的容易啊，好了，那么下巴的主称大概分成三个部分，分别是 选举样式，主见以及加对吧插件啊，这个主见呢，咱们以后咱们会详细去讲的啊，咱们俩这次主要学习的就是我们这个啊， css 的样式啊 啊，首先首先说一下什么是全局 csss 样式啊，那么基本 htm 元素均可以通过克拉斯类来设置样式并得到增强的效果。 那么还有啊，比较例如啊，先进的宣革系统啊，就比如 如这个上个系统啊，呃，什么叫主见呢？咱们这里面简单说一下啊，主见 就是啊，可附用的，就说呢，可附用的模块 被称为主见，可附用的模块被称为主见，包括自己图标、下拉菜单、导航、警告框、弹住框等等功能，哎，就说呢，嗯，什么叫全局样，什么叫主见？简单说一下啊，比如说， 嗯，我们呢有一个肯定的泪，可以让任何元素居中，那么他就是一个全局的样式，哎，他就是一个全局的样式， 那么什么叫主见呢？主见要比前置样式更大了，比如说这一块是导航哎，我们通过一个类实现了这个导航，那么这就是主见，是一个大的整体， 让我们可以服用这个整体，那么什么叫全局样式呢？咱们通过一个类就可以让咱们这个元素剧终了，哎，这叫全局样式，哎，大家能够区分开吧， 哎，再说一遍，什么叫全球样式，通过一个类就可以实现某一个效果。什么叫主见呢？是一块区域通过一个一个类可以实现一块区域的效果，比如咱们的导航条，哎，他就是一个主见啊，就是一个主见 啊，然后最后一是嘴块插件，那么嘴块啊，后面咱们讲的一个 cs 框架啊，咱们这里面简单提一下就行了啊，那么他呀，是为 bug 下巴主见赋予了生命，因为主见呢，有的时候是需要交互的， 比如说下拉框，咱们一点开，它是不是要下面弹出一个下拉框上，哎， 所以那么怎么实现这种交互呢？就是通过咱们这个 cs 插件实现的啊，那么他可以啊，简单的一次性的引入所有插件啊，或足够引入你所需要的， 或逐个引入到一分钟 啊。最后是响应式设计啊，什么是响应式设计呢？那么萨瓦亚啊，他的响应式啊，使这个 css 能够自适应台式机、平板电脑和手机， 嗯，使我们 css 啊，能够自适应咱们的这个电脑。据说呢，咱们写出来的页面， 你在电脑上展现出电脑的效果，在平板上展现出平板的效果，在手机上展现出手机的效果，这叫响应式，在不同的设备上展现不同的效果啊，需要显示这个显示呢，后面咱们还会讲的啊。 嗯，好了，那么怎么去使用他的样式库呢？注意，现在咱们还没有讲 zs， 所以咱们不考虑 zs 插件这一块，咱们现在只是学习他的全局样式以及部分主见的样式 好了，那么首先去下载，哎，那么官网，哎，是我们这个啊，不刷吧， css 点 com。 嗯，啊，这是他的一个重要网啊。然后呢，这个是 boot 下的三 啊，是我们今天学习的这个版本啊，也是用的比较多的啊啊，然后四呢，是在我们这个魔法开发中可能会使用到的啊。嗯，这是这个三，这是他的一个啊，中文网站啊，并不是他的官网，是他的一个中文网站啊，我们可以在这里面去点击 bug 叉吧去下载。 嗯，点击去下载， 哎，就是我们就可以把这个步伐，哎，下载下来，这怎么去下载？ 嗯，好。 嗯，然后呢，下载完成之后啊，啊，那么生产环境不差呀。下载之后啊，那么有三个文件夹，分别是 css 沐浴露 放肆目录以及 ds 目录啊，那么这三个目录啊，要放在我们这个 一个三炮目录中啊，要放在我们安利的目录中啊， css 里面会有这些个 css 文件啊，那么上次会有这些个字体图标啊，这个字体图标后面咱们会讲 啊，一妹啊，一妹就不是啊， gs 是他给咱们提供的这个不错的一些脚本啊，是不错的一些脚本。 嗯，好了，那么我们说在 htmrv 档中引入我们钥匙文件啊， bug 点 c s s， 你可以引入他压缩后的，你也可以引入他没有压缩的 啊。然后呢，我们使用 htm 五的文档声明方式啊，因为 boot strap 使用的是 h 五啊，它包含了 h 五版本的这个文档声明。然后呢，添加使用移动版本的标签， 给他一个 vipod y 等于 dy 就可以了啊，因为呢，我们呢，现在越来越多的用户使用移动端设备，那么为了让部下巴开发的网站呢啊，对移动端设备友好， 哎，那么确保，嗯，适当的绘制和触屏缩放，那么需要在网页的嗨的之中啊，添加 vipod 标签，也就是说咱们使用不差不留酷写完的网站，它既能在 pc 端电脑上去显示，也可以在移动端的派的 ipad 的这些平板电脑上去显示，还可以在用户的手机上去显示。 哎，总之呢，他可以兼容多个端啊，兼容多个端，这也叫响应式开发，后面咱们也会讲响应式的实验原理，咱们先看一看啊，他是怎么去用的啊？好了，那比如说呢，我们要来体验一下这个， 嗯，首先啊，在这个里面我们新建一个零，到零几了，到零三了啊，是体验啊， 好了，那么首先呢，在这个里面去引入啊，去引入我们的样式文件，嗯， r e l 等于 style 睡， 嗯， tree 是我们的当前部下面的 css， 下面的， 咱们是一个没有压缩的版本，嗯，注意看啊，注意看，嗯，这个 带点面的是压缩后的啊，腰后都压缩成一行了啊，那么至于怎么把这个啊没有压缩的文件变成压缩的呢？后面咱们会讲一个工具啊，叫前端共同化，哎，讲完之后你就明白了，哎，想给他压缩，非常的简单啊。 呃，好了，这是我们这个样日库啊，那么咱们引入完成之后啊，那么注意看，嗯，比如咱们写一个 h 一啊，比如说呢，给他一个， 嗯，开窗可藏，注意看，咱们没有引入啊，这个样式图文件，那么咱们在流眼线中把它打开啊，我们会发现，哎，是这个样子的。 那么我们引入了 bus trouble 之后啊，引入了 bus trouble 之后啊，那么注意看，哎，字体就是这样的，那么这 有什么意义呢？注意看，没有引入的话啊，在不同练习下展现的效果可能是不一样的，比如说呢， prome 里面是这个效果啊，咱们啊换一个 farfast 来看一下， 哎，这效果比较相似，是吧？哎，效果比较相似啊，看看 i e 是一样的吗？ 嗯，我们复制一下文件的路径， 我们要再挨一下 打开。 嗯，好，你看，哎，这个就是这个样子，你看，哎一下是这个样子， freforth 下是这个样子，哎，科目下是这个样子， 因此呢？嗯，因此呢，他的样式啊，不统一。而我们引入了 box 之后，这回你再看，在不同浏览器下，哎， coon 下是这个样子的， fairboss 呀， 也是这个样子的啊，然后按一下也是这个样子的，哎，那么这样的话，他们样式怎么样就一致了，就同意了。哎，都是相同的字体样式了。 那么这样的话，我们在开发的时候啊，就不要再，就不会再担心乱七的金融性问题了啊，就不会再担心他在不同乱七下崭新的样式 不一样的问题了，因为他都给咱们做了剪容了。嗯，好了，然后呢，我们首先先学第一个啊，山格系统。

网页表格不漂亮怎么办呢？向大家推荐一款可以快速简单美化网页的框架，它就是不透视。我是陶老师，定期向大家分享追梦儿可视化编程视觉网站的知识，欢迎点赞收藏视频。 波特式戳破是一个前端框架，提供了许多现成的样式和组件，只需要在 h t m l 文件中引入 c s 十和 javascript 的文件即可开始使用手工写代码来调用的话，像下面这样写 追梦人不需要手工引入，只需要点击菜单即可自动生成代码。下面呢就演示给朋友们，看看怎样轻轻松松搞定漂亮的网页表格。我们切换到追梦人里面， 我们先来调用 brotherstrube， 我们点击插入，然后找到 brotherstrube 主键，然后我们随意的插入一个 contender， 然后单击保存。这个时候啊，我们就看到了自动生成了调用 boths 出口 c a s 十的文件代码， 不需要手工去写，知道代码他是自动生成的，接下来呢，不只是错谱，他自带了表格的样式，我们来把这一段代码把它删掉，宽度和这个表格边框我们都不需要了，我们单击空格键， 然后输入 class， 然后我们输入 table， 这样呢就调用了 b to sport 的表格的样式，我们看现在上面已经自动的变化了， 这样看起来是不是就比刚才美观许多了？那接下来我们看一看 bts 出谱，他还有哪些样式呢？比如说这个是交替的背景色的样式。好，我们复制这一个样式， 切换到这个里面，我们来 table 后面敲一下空格键，然后粘贴进来， 我们再来单击一下，然后保存，哎，我们看现在这个表格，他就是隔行变色了，是吧？ 看起来就更美观了，那么还有哪些呢？比如说我们这里还有一个带边框的啊，带边框的这一个，我们把这个复制一下，我们来测试一下 粘贴它，单击一下我们的保存 好，这就是一个带边框的表格，我们再来看一看 旋停变色的，我们单击，我们复制它，然后来进行粘贴 好，我们也是保存它， 这个时候我们就发现 鼠标一过这个行的时候，他就自动变色了。那么除了这样一些常见的表格样式设置之外呢，大家还可以去自己探究响应式表格， 然后呢还会对表头表格单独使用不同的表格样式。 今天的视频就到这里，追梦人可视化编程设计网站，大大的简化了写代码的工作量，你喜欢吗？欢迎访问陶老师主页观看更多内容，我们下期再见。

今天给大家介绍下 studio 的操作，这是电脑软件安装问题，自行搜索第一行的这几个基本只有第一个文件用的上，下面首先是新建，然后是打开，让我们打开今天的案例，接下来是打开最近打开过的文件，然后就是最重要的保存了， 在下面一个是令存为没事一定要多保存血的教训，下面这些导出搭建用不到以后再讲。然后我们看到构建主界面，按住鼠标右键拖动就可以旋转，而按住空格键同时按住鼠标右键就是平移了，鼠标滚轮可以放大缩小， 其实键盘上 awsd 也可以实现平移，可以看到是一格一格移动的数字，键盘上的一二三四五六 分别代表了各个视角，但还是鼠标控制方便点。第二行工具栏第一个是选择，可以选择单个积木， 拖动到颗粒位置会默认装上去，在选择状态下按住左键拖动，可选择多个颗粒。如果这一部分你觉得不用再修改了，可以全部选中后点下面的组合键，这里会让你对这个组合命名，点击确定，这就成一个整体了。 要取消组合还是点下面这个位置会选择后，其实我们就可以开始搭了，在左侧的零件库中选择分类，然后在下方的零件中选择拼搭就好。 选中一个键，放好后会发现键还在鼠标位置，按鼠标右键取消复制的键，这里我们试一下工具栏的第二个旋转，点击后选择键会提示哪些方向 向可旋转，我们选中其中一个方向拖动鼠标就可旋转，这时我们发现我们只想转动转板，结果他是整个都转了，这时候我们就要用前面刚说过的解除组合，再选中其中一部分，这时发现就只有一个角度可供旋转， 这个键演示完我们不需要了，选中后暗地里的删除。我们回到第一个选择，发现他有一个下拉框，可以指定选择颜色和形状，比如说今天的猪吃了很多黑豆，导致今天的线有点黑， 通过指定选择就可以马上选中所有的线，然后在右边的颜色选区换成黑色，可以实现指定颜色的积木。一键换色，这个区域也会显示出整个构建用过的颜色，用过的颜色就不用费力去搜。 除了指定颜色和形状，还可以选择搭建在一起的整体。我觉得这个功能可以检查作品是不是拼在一起的，有些可能看着拼在一起，实际上是悬空的工具栏。第三个是复制，点完这个再点积木就能复制。前三个都是有快捷键的， 复制是 c， 选中后 ic 就是复制，而前两个的快捷键是 v 和 h， 这就需要多用来熟悉了。镜像复制在右下角点击后会出现对称的构建，这个在做机甲的时候，做完一条腿就可以把另外一条腿镜像出来。 第四个隐藏，比如说今天猪大肠不小心洗太干净了，忘了放线，我们要故意把线放进去，而这个位置在内部我们看不见，这个时候就可以用隐藏， 把线塞好后，点击右上角显示所有，就能修改一些复杂的内部结构。第六个碰撞警告， 点击后变透明的就是穿模的，我们可以看到现有一部分是和外面重叠的，这个功能我感觉可以配合旋转使用。选中一个关节后， i at 旋转开着碰撞警告，转到最大就转不过去了，当然因为我主要做变形的关系，我都是关了的。第五个颗粒连接， 比如说我们九转大肠做好了要装盘，结果怎么也放不到指定位置，这个时候点颗粒连接，选中这个大肠， 就会看到大肠上可拼搭的点，然后点击到要拼的地方，直接就拼上去了。第七个点击后跟第五个相反，就是不按颗粒拼搭了，你看想放哪到哪就是不按颗粒上，所以这个 按钮平时就别关了。后面这个网格是精细度，比如说我拿常用的 t 管连接这里 t 一下，拿出来的键，按方向键可以改变朝向，网格最大时按左 一就直接穿模了。而把网格改成最细后呢，再按 a、 d， 左右移动距离就很小了，当然平时还是鼠标拖动更快。只能说提供了一种精细的方式，按 delete 删除， 在往后渲染稳定性说明书马赛克这次不讲左边的零件库，要知道一个快捷键 tab， 按下 tab 后，零件库会展开，寻找积木更方便。在积木上方可以选择颜色， 构建里已有的颜色，在这可以直接选取。第二个是印刷键，点击后会显示有印刷的积木，关了能少好多积木。第三个 积木展示大小，这么多积木位置要慢慢熟悉，这里叫初学者一个方法，比如你很喜欢现的这个键，可以右击添加到收藏加，这里需要命名，收藏加名称，在这里的下拉菜单中 就能看到刚才收藏的箭，把自己常用的箭找出来收藏，应该就能顺利度过新手期了。不过一开始收藏的箭是什么颜色， 收藏家里就是什么颜色，但改颜色总比找零件快吧。这里的最后一个可以编辑收藏家改名字或者删除。到这里应该都学会怎么虚拟拼搭了吧，学会了记得点个赞再走哦！