欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

bootstrap样式

程序员文章站 2023-12-28 21:44:46
...

bootstrap按钮样式

​
<button class="btn btn-block btn-primary">Like</button>
<button class="btn btn-block btn-info">Info</button>
<button class="btn btn-block btn-danger">Delete</button>

​

运行结果:

bootstrap样式

btn为按钮添加圆角样式

btn-block将按钮长度扩充至块级元素长度

btn-primary,btn-info,btn-danger为按钮添加颜色

给按钮添加图标

<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary fa fa-thumbs-up">Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info fa fa-info-circle ">Info</button>
</div>
<div class="col-xs-5">
<button class="btn btn-block btn-danger fa fa-trash">Delete</button>
</div>
</div>

运行结果:

bootstrap样式

页面布局

<div class="row">
<div class="col-xs-4"><button class="btn btn-block btn-primary">Like</button></div>
<div class="col-xs-5"><button class="btn btn-block btn-info">Like</button></div>
</div>

col-xs-*:指定元素占多少列宽,*= 4即占4个像素列宽

bootstrap样式

 

上一篇:

下一篇: