bootstrap4有很多边框样式,整理了一些,详细如下

bootstrap4边框样式代码整理
bootstrap4边框样式代码整理

将在span元素的前后左右分别添加边框。
在顶部添加边框。
在右侧添加边框
在底部添加边框
在左侧边框。

控制某一边的样式

,不显示边框
,除顶部不显示边框,其他均显示
,除右侧不显示边框其他均显示
除底部不显示边框其他均显示
,除左侧不显示边框其他均显示。

bootstrap边框颜色










使用圆角方式:bootstrap Border-radius

...,使用rounded表示4个角均使用圆角的方式。
...,top则表示上面的上左和上右
...,right表示左上和坐下角
...,bottom表示下作和下右位置
...,left表示左上角和左下角
...,circle显示为圆形
...,pill表示显示为一个椭圆形状
...,如果是0则不使用Border-radius。

关于自适应圆角的问题,针对不同宽度的屏幕,比如某个图片或div在PC上显示圆角而在手机上不显示圆角该怎么做呢,因为默认的Border-radius是在所有的屏幕上都会显示的,具体代码如下。

...,在sm(大于等于576px)的屏幕上显示圆角,而小于576px的屏幕则不会显示圆角。
...,在大于lg(大于等于992px)的屏幕上显示圆角,小于992px的屏幕则不显示圆角。

发表回复

后才能评论