在Twitter Bootstrap中创建圆角的正确方法

Question

我刚开始使用Twitter Bootstrap,这是一个问题.

我正在创建自定义<header>块,我希望它的底角是圆形的.

是否有任何"正确"的方法通过使用预定义的类来执行此操作,或者我必须手动指定它:

border-radius: 10px;               // and all that cross-browser trumpery

现在,我正在使用css样式.也许这个问题会更好用less吗？

Answer 1

<div class="img-rounded"> 会给你圆角.

Answer 2

我想这就是你要找的东西:http://blogsh.de/tag/bootstrap-less/

@import 'bootstrap.less';
div.my-class {
    .border-radius( 5px );
}

你可以使用它,因为有一个混合:

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

对于Bootstrap 3,你可以使用4个mixin ......

.border-top-radius(@radius);
.border-right-radius(@radius);
.border-bottom-radius(@radius);
.border-left-radius(@radius);

或者你可以使用前4个单独制作你自己的mixin.

.border-radius(@radius){
    .border-top-radius(@radius);
    .border-right-radius(@radius);
    .border-bottom-radius(@radius);
    .border-left-radius(@radius);
}

Answer 3

Bootstrap只是一个大而有用但简单的CSS文件 - 不是框架或任何你无法覆盖的东西.我之所以这么说,是因为我注意到很多开发人员都坚持使用BS课程并变得懒惰"我不能写CSS代码 - 编程"[当然不是你的情况!].

如果它具有您需要的功能,请使用Bootstrap类 - 如果没有,请将您的附加代码编写好style.css.

为了充分利用这两个方面,您可以在LESS编写自己的声明,并根据您的需要重新编译整个事物,最大限度地减少服务器请求作为奖励.

Answer 4

根据bootstrap 3.0文档.div 标签没有圆角 类或id.

您可以使用使用圈子行为的图像

<img class="img-circle"> 

或者只是border-radius在css中使用自定义css3属性

仅用于底部圆角锥形使用以下

border-bottom-left-radius:25%; // i use percentage  u can use pix.
border-bottom-right-radius:25%;// i use percentage  u can use pix.

如果你想要响应循环div,那么试试这个

来自响应式CSS圈子

Answer 5

你想要的是一个Bootstrap 面板.只需添加panel该类,您的标题看起来就是统一的.您还可以添加类panel panel-info,panel panel-success等等.它适用于几乎所有的块级元素,并应与工作<header>,但我相信它会大多与使用<div>秒.

Answer 6

没有更少,只是为了一个给定的div:

在一个CSS:

.footer {
background-color: #ab0000;
padding-top: 40px;
padding-bottom: 10px;
border-radius:5px;
}

在html中:

 <div class="footer">
        <p>blablabla</p>
      </div>

Answer 7

使用 bootstrap4 你可以轻松地做到这一点：-

class="rounded" 

或者

class="rounded-circle"