边框
使用边框工具可以快速设置元素的边框和边框半径的样式。 非常适合图像,按钮或任何其他元素。
边界
使用边框实用程序添加或删除元素的边框。 从所有边界中选择,或一次选择一个。
添加剂
<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>减法
<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>边框颜色
使用基于我们主题颜色的实用程序来更改边框颜色。
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>边界半径
向元素添加类可以轻松地实现其转角。
<svg aria-label="Example rounded image: 75x75" class="bd-placeholder-img rounded" focusable="false" height="75" preserveaspectratio="xMidYMid slice" role="img" width="75" xmlns="http://www.w3.org/2000/svg"><title> 圆角图像示例 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 75x75 </text></svg><svg aria-label="Example top rounded image: 75x75" class="bd-placeholder-img rounded-top" focusable="false" height="75" preserveaspectratio="xMidYMid slice" role="img" width="75" xmlns="http://www.w3.org/2000/svg"><title> 示例顶部舍入的图像 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 75x75 </text></svg><svg aria-label="Example right rounded image: 75x75" class="bd-placeholder-img rounded-right" focusable="false" height="75" preserveaspectratio="xMidYMid slice" role="img" width="75" xmlns="http://www.w3.org/2000/svg"><title> 示例右舍入图像 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 75x75 </text></svg><svg aria-label="Example bottom rounded image: 75x75" class="bd-placeholder-img rounded-bottom" focusable="false" height="75" preserveaspectratio="xMidYMid slice" role="img" width="75" xmlns="http://www.w3.org/2000/svg"><title> 底部圆角图像示例 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 75x75 </text></svg><svg aria-label="Example left rounded image: 75x75" class="bd-placeholder-img rounded-left" focusable="false" height="75" preserveaspectratio="xMidYMid slice" role="img" width="75" xmlns="http://www.w3.org/2000/svg"><title> 示例左舍入图像 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 75x75 </text></svg><svg aria-label="Completely round image: 75x75" class="bd-placeholder-img rounded-circle" focusable="false" height="75" preserveaspectratio="xMidYMid slice" role="img" width="75" xmlns="http://www.w3.org/2000/svg"><title> 完全圆形的图像 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 75x75 </text></svg><svg aria-label="Rounded pill image: 150x75" class="bd-placeholder-img rounded-pill" focusable="false" height="75" preserveaspectratio="xMidYMid slice" role="img" width="150" xmlns="http://www.w3.org/2000/svg"><title> 圆形丸图像 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 150x75 </text></svg><svg aria-label="Example non-rounded image (overrides rounding applied elsewhere): 75x75" class="bd-placeholder-img rounded-0" focusable="false" height="75" preserveaspectratio="xMidYMid slice" role="img" width="75" xmlns="http://www.w3.org/2000/svg"><title> 非舍入图像示例（覆盖在其他位置应用的舍入） </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 75x75 </text></svg>尺码
Use .rounded-lg or .rounded-sm 用于更大或更小的边界半径。
<svg aria-label="Example small rounded image: 75x75" class="bd-placeholder-img rounded-sm" focusable="false" height="75" preserveaspectratio="xMidYMid slice" role="img" width="75" xmlns="http://www.w3.org/2000/svg"><title> 小圆形图像示例 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 75x75 </text></svg><svg aria-label="Example large rounded image: 75x75" class="bd-placeholder-img rounded-lg" focusable="false" height="75" preserveaspectratio="xMidYMid slice" role="img" width="75" xmlns="http://www.w3.org/2000/svg"><title> 示例大的圆形图像 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 75x75 </text></svg>