bootstrap怎么用虚线框
文章标签
虚线
bootstrap中可使用以下类为元素添加虚线边框:.border-dashed、.border-top-dashed、.border-right-dashed、.border-bottom-dashed、.border-left-dashed。此外,还可使用.border-dashed、.border-dashed-wider、.border-dashed-narrower自定义虚线样式,控制虚线间距。
Bootstrap中使用虚线边框
Bootstrap框架提供了一种简单的方法来为元素添加虚线边框。
要添加虚线边框,请使用以下类:
示例:
<div class="container"> <div class="row"> <div class="col-sm-6"> <div class="card border-dashed"> <div class="card-body"> This card has a dashed border. </div> </div> </div> <div class="col-sm-6"> <div class="card"> <div class="card-body"> This card has a solid border. </div> </div> </div> </div></div>
自定义虚线样式:
Bootstrap还允许您自定义虚线样式。您可以使用以下属性:
示例:
<div class="container"> <div class="row"> <div class="col-sm-6"> <div class="card border-dashed border-dashed-wider"> <div class="card-body"> This card has a dashed border with wider spacing. </div> </div> </div> <div class="col-sm-6"> <div class="card border-dashed border-dashed-narrower"> <div class="card-body"> This card has a dashed border with narrower spacing. </div> </div> </div> </div></div>