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

Question

我刚刚开始使用，Twitter Bootstrap，这里有一个问题。

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

有没有什么“正确”的方法可以通过使用预定义的类来做到这一点，或者我必须手动指定它，比如：

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

现在，我使用的是css样式。也许使用less来解决这个问题会更好呢？

Answer 1

我猜这就是你要找的：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种混音可以使用...

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

或者你也可以自己制作混音器，使用前4个可以一次完成。

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

Answer 2

<div class="img-rounded">将为您提供圆角。

Answer 3

Bootstrap只是一个大的，有用的，但简单的CSS文件-不是一个框架或任何你不能覆盖的东西。我之所以这样说，是因为我注意到许多开发人员坚持使用BS类，变得懒惰地“我不能再写CSS代码了”，当然，这不是你的情况！

如果它有你需要的特性，那就使用Bootstrap类--如果没有，就用好的ol‘style.css编写你的额外代码。

为了两全其美，您可以用LESS编写自己的声明，并根据需要重新编译整个代码，从而最大限度地减少服务器请求。