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>
运行结果:
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>
运行结果:
页面布局
<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个像素列宽