- Bootstrap从入门到项目实战
- 李爱玲
- 275字
- 2025-02-23 08:23:42
5.3.1 添加边框
通过给元素添加.border类来添加边框。如果想指定添加某一边,可以从以下4个类中选择添加。
■ .border-top:添加元素上边框。
■ .border-right:添加元素右边框。
■ .border-bottom:添加元素下边框。
■ .border-left:添加元素左边框。
在下面的示例中,定义5个div,第一个div添加.border设置4个边的边框,另外4个div各设置一边的边框。
【例5.11】添加边框示例。

在IE 11浏览器中运行结果如图5-12所示。

图5-12 添加边框效果
在元素有边框的情况下,若需要删除边框或删除某一边的边框,只需要在边框样式类后面添加-0,就可以删除对应的边框。例如.border-0类表示删除元素四边的边框。
【例5.12】删除边框示例。

在IE 11浏览器中运行结果如图5-13所示。

图5-13 删除边框效果