Bootstrap/Bootstrap3栅格简单介绍

前言 00:00

就大概就是介绍一下，~~因为纱纱要完成他的任务~~。
所以比较重要的就是这个bootstrap的栅格，然后顺便就带着给他那个讲一下，咱们这边可能会用到的一些东西。然后顺带过一下，应该就会有印象一些。

栅格系统 00:43

这个链接之前应该大家都能都搜到了，或者自己搜一下就可以了。然后就是可以看屏幕，也可以自己再去翻一翻。
然后这个栅格系统，就是主要是这个bootstrap给现在的这个网页，他们规定了一个比较好用的一个布局吧。然后这个布局就是它能够去让咱们的这些不同尺寸的屏幕，然后浏览器，窗口的大小，然后可以有一个比较灵活的这么一个排版。然后让用户能更方便的去看一下咱们网页上的内容，要不然可能有的屏幕会过宽过窄，然后这样都不太适应咱们这个内容的展示。然后前面这边基本上就是一些说明，然后还有一些介绍。

实例：从堆叠到水平排列 01:32

然后比较关键的话就是从这里开始，然后它的一个原理的话就是把咱们这一个屏幕的这么一个区域，然后它等分成了12份。然后这12份的话，它可以把每1块内容，然后各占1份儿，也可以占2到12份儿都是可以的。
然后比较常用的话就是8和4，这样是一个2:1的宽度，或者是三个4，这是一个三列的1:1的宽度，或者说是两列的话。然后现在就是6和6，然后这样的话就是一个1:1的两边的宽度。

02:13

然后对应的话其实就是咱们找一个这个沙杯头（Cuphead）的这么一个新的站点看的话，它现在有这个预制的这个首页的话，就是一个8:4的这么一个两列的一个两列式的一个首页。然后比如说咱们再去原神这的话，就是用的是一个三列的，但是它这个三列也不是三等分，他是一个是多少，咱们看一下，这边就可以看到的话，这边是一个3-6-3的一个比例，它也是一个三列啊。咱们从这个开发者工具的话，应该是比较能容易看到这个三列的这么一个排版的。它这个是一个大的一个行，一个row，然后里面分了三个列，然后就是这个样子。然后基本上这个页面就是整个的三个大列，这个不用太说什么，这个样子的话就是有好处也有坏处。然后就是在现在这么展示的话，就先说到这里，然后待会儿的话再说一下它可能存在的问题也可能要可以解决的方式。

栅格参数 03:24

然后再回到这边看的话，比如说这个是一个刚才这个是一个三列的4-4-4,然后咱们刚才原神那边的话是3-6-3，然后这样的话就是一个它可以去自个儿去控制的一个两列或者三列这样一个咱们这样的v3首页的一个排版，一个布局。
然后这个是它一个预设好的一个新的样式，然后咱们用起来就会比较方便一些。然后这个东西到时候就查文档就可以了，如果记不住的话。
比如说它现在这个举例的话，举例的话它这个是md-1，md的话对应的话就是这个中等屏幕。然后他写的是970像素宽度的时候就是md。然后相应的还有lg和sm和xs。
这几个都是咱们平时在兼容PC和手机的时候，都要分别去选用的这么一个前缀。

实例：移动设备和桌面屏幕 04:29

然后在下面的话这边的话他就举例了，在同一个这么一个元素上，我可以同时写xs和md。xs的话就是当这个最小屏幕的时候的话，我是在12列的。然后12列的话就是1列，单列占满。然后这样的话就是在最小屏幕的时候占满。然后在PC的话就是md的话基本上就是咱们正常的PC的一个比较小的一个边界值嘛。然后这样的话它就是占一个8，然后这边的话相应的话，这边是xs给的是6，然后md给的是4，但是这个xs给的6的话，它如果是在缩小的时候，因为它前面已经占了一个xs-12了，那这个xs-6就会挪到下一行去。
然后这里的话就是我重新说一下，这边就是因为开了F12之后，然后这边的话宽度就整个的宽度就窄了，窄了之后，然后它下面一个12，现在是占满的，然后这个6就开始换行了。然后这个后面的话，这个xs-6 md-4三个和上面不是一个row，所以他就整个就换了一个行，没有往上去。

实例：手机平板桌面 05:46

然后他这个给的一个实例的话，就是分别是手机、平板、桌面。
然后这个地方的话他也会改，~~但是感觉好奇怪的样子~~。比如说再小的话，它因为最小的话，这个xs就是6，所以它再小也就是这个样子了。
这边就是多余的列嘛，然后另起一行排列。它这个4的话，它永远也拼不上9，所以说它就会挪到下面去。

响应式列重置、列偏移、嵌套列、列排序 06:27

这个地方其实主要就是说一下他这个12列，然后去做一个分布嘛。
然后咱们一般常用的就是一行里面加起来等于12，然后就别的就还好，然后再根据自己的需要，去调这个xs、md的这个比例就可以。
这个偏移咱们用的不是很多。

嵌套列 06:52

嵌套的话，咱们是会用到的。比如说我是在这边一个，9的一个宽度内，然后再分两列，这种是可以用到的。
比如说在那个，就举个例子吧，比如说原神这边是中间这个是6，它是比较宽的那我可以在某一个列这边，再一分为二，然后做两个块块。

列排序 07:23

这边排序那就是这个地方的话，就是现在这个宽度的时候，push是在后面的。
然后如果他要是窄了之后，调窄了之后，然后他的布置是到前面去了。然后然后这个主要的话咱们在wiki里的话，如果是PC这样排版的话，然后他一般会默认左边这一列，然后是在最前面，然后是中间这一列，然后最后是右边这一列。
就是大概是这么一个顺序。所以如果是咱们刚才左边第一列的话，它前面的一些内容，咱们不希望它是在最前面的时候，就是可以利用它这个pull和push来调整，也可以再用这个visible和hidden去控制。
然后这个地方的话是单独给左边这个列，然后加入了一个visible-xs，就是说它只在xs的时候显示，所以它会在前面展示出来这一部分。就是因为这一部分是咱们本身中间的第二列的这个内容，他就单独写了一份在第一列。然后这样的话只在最小的时候把这一块展示出来的话，那就达到了咱们想要咱们这个指定内容，在最前面的这一个目的。
然后对应的话就是它本身第二列的最前面的这些部分，它给了一个hidden-xs，然后hidden-xs的话，这样的话就可以在中间这个列，然后给它隐藏起来。

Less mixin 和变量 09:19

这边就基本上想看一下自己看吧，反正因为我平时本身平时不是很用不习惯，所以有时候用的也不是很多。

栅格结尾

然后栅格的话，这边就先简单介绍到这里，因为它主要就是给咱们做这个两列或者三列排版的这个首页的。
然后其他地方咱们也可以用得到，就是在内容里头也可以去按照这么一个方式方法去设计。
然后好用是比较好用的，因为咱们其实有很多的手机游戏的wiki，咱们肯定要照顾一下手机用户。那手机用户的话就肯定要去做这么一个自适应的处理，然后让它去把内容不像PC似的都堆在一起，然后让它可以以一个整列或者什么每块每行每列去这么一个去层层组合调整。

响应式工具10:16

就刚才说到了这个就是，visible-xs和hidden-xs咱们是在原神这边用到的。然后这边最后对应的这个响应式工具，然后它也设计了一些工具类。然后这些工具类的话就是可以对应的咱们这个xs、sm、和md这些不同的宽度，然后去调整咱们的每块的这个可见性。
然后这些的话就是一个测试嘛，测试的话就是一个方便的一个东西，然后可以再自己试一试，拿它这个工具。然后这边的话第二块要就是整个栅格和响应式这块都比他的这个，和他的自己设定的这个宽度是有关系的。然后到时候可以再反复翻这个文档。然后完了然后再去试一试，然后再去应用一下，然后再去翻一翻别的wiki到底是咋用的。

组件 11:20

然后这个bootstrap的比较常用的话，可能是图标这块儿。可以翻一翻。
当然这个bootstrap3的内置的一些图标还是比较少的。然后可能会大家会再去引用一些其他的一些图标库啊，这个都可以。有的就可以先用一下。

11:43

然后这边其实能用的说实话也不是很多。大家可以看一下，就是简单地去过一下，这边咱们它给的一些这些设计的一些样式，因为咱们在一些wiki里头也是用到过。
然后他的一些设计的一些思路，或者说就是这么一个风格，大家可以可以去借鉴一下。
然后就是一个比较正经的这种，比较办公化的这种样式。然后咱们如果站点，如果想要再去定制的话，然后就可以在这个上面改也可以，然后重新写也是可以的。
然后像这种的话，可能大家应该平时会看到一些站点它的那个文章页面的开头可能会以有一些这样的提示，然后就差不多是这个样子，那个就好像折磨了纱纱好几天的实在听不清楚。
你可以把咱们的那个东西，也就是设计成这样的样式。而不是咱们的那个箭头的一个样式，也可以去这么去写一个面包屑的模板，什么就可以了。

分页 12:54

分页的话，分页我就是在动态查询那边会用了一下下，因为懒得写，我就直接抄了一下，没有什么说的了。
然后就比如说这个其实刚才也是他用他的一个预制的这种文本和底色，然后去组合出来一个东西，然后组合出这么一个提示框，警告框，然后他还有新的样式。
然后可关闭的，可以关闭的。然后可以写链接。

13:32

然后在咱们用这个提示的这个模板的时候，可能会有一个小小的坑，我看看这里的。
然后就比如说刚才它提到了一个就是可以在内容里面去写这个链接之类的话。那咱们有的时候可能会，比如说想写颜色。这个颜色的话，那这边的话咱们预期的效果应该是这个c变成红色，预览之后呢，它abc全没了。
这个就是因为他在这个模板在写的时候的话，因为他会把这个等号作为分割符来去分割咱们这个模板传参，然后他会把前面当做这个模板的这个参数，而不会就把前面当做这个模板参数的参数名。然后把后面再去当做这个参数的参数值，然后它本身预期应该是处理参数2，但是这个地方因为分了之后，它就不是参数2，所以咱们就需要重新搞。~~没有搞出来~~~听不清楚+2
写2它出不来，写3它出来了。我想起来了，因为如果这个地方写2的话，这个地方写3它才能出。这样就对了。
如果这个地方，我刚才只写了一个2=，然后这个地方没有写3=，然后这个地方会把参数2给覆盖掉，然后他参数2就变成了“第一句话”，然后它的abc还是没有。然后这个地方的话，那就它就是把这个地方补上。2=把这个地方补上3=，然后这个模板他才能按预期出来，这个是一个小坑的地方。

进度条 16:05

然后进度条这个地方，可能大家会有这个需求嘛。
这个是咱们的时间的进度条，先不说了。先说这个东西。
然后这边的话完全是用一个那个bootstrap做的一个进度条。然后这个进度条的话，主要就是直接是比较好的话，就是用了它这个计算的这个解析函数，然后直接计算它的宽度的比例，这个地方就可以实现咱们这个进度条的这个效果。然后我的这个就是数量也都是直接查询数量或者写出来的话，比如说这个总数的话，就是直接写进去了，但是很久没有更了。
然后这个地方你看也用到了ask，也是就是咱们这个语义维基（SMW）的这个功能。然后他可以直接查到就是，这个分类到底是有多少条记录，然后直接format等于count，这个东西都是要自己慢慢慢去查文档的，然后慢慢去去做的。
然后这个地方就是这个功能吧，就是比较简单。
可能但是一开始看上去就是在一开始，可能大家可能看着比较炫酷，但是它其实确实是没有什么东西的。当然因为这个地方没有涉及到JS, 所以说整体的难度会比较低。
然后如果是咱们那个活动的倒计时的话，那它其实虽然可以抄吧。图片103%是因为没有改，然后后来还又传图了。这个东西有的时候懒得改，然后有时候就没有改。
然后正因为这个数也是计算出来的，然后只是计算出来一个大概的那个数，然后总数，因为算不出来，就大概是我可能最多的那个需要多少张图，然后这么一个数。这个地方就查了一个文件总数。

18:33

当然其实我还是比较希望新站点大概可能会有这么一个东西。因为大家一上来就会能看到，这个站点的一个建设的一个情况。
因为很多的新人没有办法很快的转换成劳动力，是因为他们不知道做什么。然后他们可能会有自己感兴趣的东西，当然也有可能没有，只是想过来问问有什么能帮的。然后这个地方这个时候如果咱们的管理或者是站长，不知道他们现在要能让他们干什么，不能把他们的马上都安排起来。这个部分这个劳动力可能就要流失掉了。因为他们的积极性可能只有当时的半天，甚至都到不了一天。

解析函数 19:15

虽然很多家都有写这个解析函数的这个教程和文档，但是就是THB这边是都写在了一个页面上，就很方便PC用户。然后直接ctrl+F然后来去搜这个页面上到底有什么。然后比如说看到一个不会的解析函数，然后直接到这边上面搜，就大概率可以得到你的这么一个需要的一个答案。
然后像那个MediaWiki官方的网站的话，它基本就是基本解析函数写了一个页面，然后部分扩展出来的这些函数它单独在它自己的扩展的页面里头写。所以说就那样就很难查。
然后像那个语义维基的文档就更难查了。它是特别碎的一个东西，然后一点写一个页面，然后查一个东西要跳那么七八回十几回，然后最后可能还找不着东西，就很烦。
所以说包括像这个就是东方wiki这边，然后有技术帮助，然后有这个进阶代码和函数，包括语义维基，这些都是大家可以去看一看，咱们这些因为都是基于MediaWiki，然后都是大多数都是通用的东西，然后就都可以去看一看，然后基本上也都会，反正就是常看常新吧，都有自己的收获。
到底具体有什么支持的，这个情况的话，咱们是去可以去特殊页面去查的。就是咱们这个特殊页面，特殊:版本页面。这个页面的话就是在这个安装的扩展的情况，然后它就是包括所有的支持解析函数都在下面。然后包括解析器扩展标签，然后这是咱们这个bwiki所有完整的支持这个东西。

结尾 21:19

然后之前小马还在的时候，其实大概是想写一个东西，就是我这边给他做了一个链接嘛。链接的话，其实按理说是直接导到工具站的，但是其实因为没有人写，就这个样。然后当时这个东西也是想接机器人的，但是现在就荒下来了，因为这个东西确实是很需要人手去写。然后时间上其实……但还不能是特别新手去写，因为新手也不知道写什么，就很麻烦。
然后咱们很快的用不到1个小时，然后就差不多稍微把这边文档这块儿去过了一下。
这个地方有个群号，然后大家可以来一下，这个是tools，这个是咱们的这个工具站，然后大家也可以来编辑一下，还可以当沙盒。如果没有看到的话，可以在这个群里面呼我一下。