bootsrap常用语句总结
2019-05-27 本文已影响0人
何赛艾慕
对于一个前端刚刚入门的小白,直接做web API和前后端分离的工程太不现实了,为了能做出点还看得过去的东西,尽管bootstrap好像已经没那么流行,但是由于其简单好用易上手,做出来的效果也还看得过去,那就用一下吧。
但是作为一个CSS库,怎么说呢,语句真的太多了,看的我都严重怀疑学习Flask的正确性(学Django的时候好像不是这样啊,好吧可能那时候菜,没感觉),因此在这里整理一下我曾经用过的并且挺不错的bootstrap语句吧,还有一些别的小分享。
第0章:来个网站尝尝鲜
有时候官方的bootstrap.min.css看的烦了,总想换换口味,或者美其名换个主题,这个网站很不错哦:
当然如果,这几个即插即用的模板都很简单,换换样式和背景而已,如果更复杂的主题还有这个网站也很不错。
正文
-
image.gif<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit = no" />
上文这个标记是指bootstrap可以在任意尺寸的设备上完整显示元素的意思,也就是人们常称作的响应式布局。
-
bootstrap中有列表组的概念,要为元素<ul>添加:
image.gif<class="list-group">
同时要为每一项添加:list-group-item
-
为了鼠标移到每个列表项时有阴影效果,"list-group-item-action"也是必不可少的,
-
如果想要不同的颜色,记住这几个常用的:
image
image.gif -
image.gif<span class="badge badge-primary badge-pill">777</span>
如果想为每行添加个标签,并想附上777的数字,上面的语句可以实现。
-
flex-column,设定每一项的排列方式,即列对其的方式,mb-1等格式是在设置边距和填充。
-
image.gif<button type="button" class="close" data-dismiss="alert">Χ</button>
点击按钮,关闭属于该按钮的块的全部内容。
-
如需添加一个提示工具(tooltip),只需向一个锚标签添加 data-toggle="tooltip" 即可,然后在js的代码中加以配合即可。
先记录到这里,以后遇到了继续更新。。。