对于一个前端刚刚入门的小白，直接做web API和前后端分离的工程太不现实了，为了能做出点还看得过去的东西，尽管bootstrap好像已经没那么流行，但是由于其简单好用易上手，做出来的效果也还看得过去，那就用一下吧。

但是作为一个CSS库，怎么说呢，语句真的太多了，看的我都严重怀疑学习Flask的正确性（学Django的时候好像不是这样啊，好吧可能那时候菜，没感觉），因此在这里整理一下我曾经用过的并且挺不错的bootstrap语句吧，还有一些别的小分享。

第0章：来个网站尝尝鲜

有时候官方的bootstrap.min.css看的烦了，总想换换口味，或者美其名换个主题，这个网站很不错哦：

在这里有几个不错的免费模板

当然如果，这几个即插即用的模板都很简单，换换样式和背景而已，如果更复杂的主题还有这个网站也很不错。

复杂的主题

正文

1. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit = no" />
   

   image.gif

   上文这个标记是指bootstrap可以在任意尺寸的设备上完整显示元素的意思，也就是人们常称作的响应式布局。

2. bootstrap中有列表组的概念，要为元素<ul>添加：

   <class="list-group">
   

   image.gif

   同时要为每一项添加：list-group-item

3. 为了鼠标移到每个列表项时有阴影效果，"list-group-item-action"也是必不可少的，

4. 如果想要不同的颜色，记住这几个常用的：

   image

   ​

   image.gif

5. <span class="badge badge-primary badge-pill">777</span>
   

   image.gif

   如果想为每行添加个标签，并想附上777的数字，上面的语句可以实现。

6. flex-column,设定每一项的排列方式，即列对其的方式，mb-1等格式是在设置边距和填充。

7. <button type="button" class="close" data-dismiss="alert">&Chi;</button>
   

   image.gif

   点击按钮，关闭属于该按钮的块的全部内容。

8. 如需添加一个提示工具（tooltip），只需向一个锚标签添加 data-toggle="tooltip" 即可，然后在js的代码中加以配合即可。

先记录到这里，以后遇到了继续更新。。。