我刚刚开始使用Twitter Bootstrap，这是一个问题。
我正在创建自定义<header>块，我希望它的底角是圆形的。
是否有任何“正确”的方法可以通过使用预定义的类来做到这一点，或者我必须手动指定它，例如：
border-radius: 10px; // and all that cross-browser trumpery
现在，我正在使用css样式。也许它会更好地less用于那个问题？
问问题
233644 次
9 回答
94
<div class="img-rounded">会给你圆角。
于 2014-01-11T00:00:19.547 回答
68
我想这就是你要找的东西：http: //blogsh.de/tag/bootstrap-less/
@import 'bootstrap.less';
div.my-class {
.border-radius( 5px );
}
你可以使用它，因为有一个 mixin：
.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);
}
于 2012-08-23T03:00:17.473 回答
17
Bootstrap 只是一个大的、有用的、但简单的CSS 文件——不是一个框架或任何你不能覆盖的东西。我这样说是因为我注意到许多开发人员都坚持使用 BS 类并且变得懒惰“我不能再写 CSS 代码”编码器 [这当然不是你的情况！]。
如果它具有您需要的功能，请使用 Bootstrap 类 - 如果没有，请使用 good ol' 编写您的附加代码style.css。
为了两全其美，您可以在 LESS 中编写自己的声明，然后根据需要重新编译整个东西，从而最大限度地减少服务器请求。
于 2012-08-23T03:18:54.570 回答
10
根据引导 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 然后试试这个
于 2013-09-30T14:38:02.887 回答
10
你想要的是一个 Bootstrap面板。只需添加panel类，您的标题将看起来统一。您还可以添加 classes panel panel-info、panel panel-success等。它几乎适用于任何块元素，并且应该与 一起使用<header>，但我希望它主要与<div>s 一起使用。
于 2015-04-01T04:50:35.490 回答
8
没有更少，简单地为给定的 div ：
在 CSS 中：
.footer {
background-color: #ab0000;
padding-top: 40px;
padding-bottom: 10px;
border-radius:5px;
}
在 html 中：
<div class="footer">
<p>blablabla</p>
</div>
于 2014-04-18T15:42:21.347 回答
6
使用 bootstrap4，您可以轻松地做到这一点：-
class="rounded"
或者
class="rounded-circle"
于 2017-12-03T18:35:34.757 回答
0
如果您使用的是Bootstrap Sass，这是另一种避免向元素标记添加额外类的方法：
@import "bootstrap/mixins/_border-radius";
@import "bootstrap/_variables";
.your-class {
$r: $border-radius-base; // or $border-radius-large, $border-radius-small, ...
@include border-top-radius($r);
@include border-bottom-radius($r);
}
于 2017-02-14T22:32:02.997 回答
0
在 Bootstrap 4 中，给元素加边框的正确方法是在元素的类列表中按如下方式命名它们：
For a slight rounding effect on all corners; class="rounded"
For a slight rounding on the left; class="rounded-left"
For a slight rounding on the top; class="rounded-top"
For a slight rounding on the right; class="rounded-right"
For a slight rounding on the bottom; class="rounded-bottom"
For a circle rounding, i.e. your element is made circular; class="rounded-circle"
And to remove rounding effects; class="rounded-0"
要使用 Bootstrap 4 css 文件，您可以简单地使用 CDN，并在您的 HTML 文件中使用以下链接：
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
这将为您提供 Bootstrap 4 的基础知识。但是，如果您想使用大多数 Bootstrap 4 组件，包括工具提示、弹出框和下拉菜单，那么您最好使用以下代码：
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
或者，您可以使用 NPM 或 Bower 安装 Bootstrap，并链接到那里的文件。
*注意，三个的底部标签与第一个链接路径中的第一个标签相同。
一个完整的工作示例可能是：
<img src="path/to/my/image/image.jpg" width="150" height="150" class="rounded-circle mx-auto">
在上面的示例中，图像通过使用 Bootstrap 的左右边距自动居中。
于 2018-09-21T15:14:49.633 回答