Bootstrap

bootsrap常用语句总结

2019-05-27  本文已影响0人  何赛艾慕

对于一个前端刚刚入门的小白,直接做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的代码中加以配合即可。

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

上一篇下一篇

猜你喜欢

热点阅读