CSS 在 Twitter Bootstrap 中创建圆角的正确方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12084121/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Correct way to create rounded corners in Twitter Bootstrap
提问by Edward Ruchevits
I've just started with Twitter Bootstrapand here is one question.
我刚刚开始使用Twitter Bootstrap，这是一个问题。
I am creating custom <header>block, and I want it's bottom corners to be rounded.
我正在创建自定义<header>块，我希望它的底角是圆角的。
Is there any "correct" way to do this by using predefined classes, or I have to specify it manually like:
是否有任何“正确”的方法可以通过使用预定义的类来做到这一点，或者我必须手动指定它，例如：
border-radius: 10px; // and all that cross-browser trumpery
For now, I'm using cssstyles. Maybe it will be better to use lessfor that issue?
现在，我正在使用css样式。也许less用于那个问题会更好？
采纳答案by Danil Speransky
I guess it is what you are looking for: http://blogsh.de/tag/bootstrap-less/
我想这就是你要找的：http: //blogsh.de/tag/bootstrap-less/
@import 'bootstrap.less';
div.my-class {
.border-radius( 5px );
}
You can use it because there is a mixin:
您可以使用它，因为有一个 mixin：
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
For Bootstrap 3, there are 4 mixins you can use...
对于 Bootstrap 3，您可以使用 4 个 mixin...
.border-top-radius(@radius);
.border-right-radius(@radius);
.border-bottom-radius(@radius);
.border-left-radius(@radius);
or you can make your own mixin using the top 4 to do it in one shot.
或者您可以使用前 4 名制作自己的 mixin，一次性完成。
.border-radius(@radius){
.border-top-radius(@radius);
.border-right-radius(@radius);
.border-bottom-radius(@radius);
.border-left-radius(@radius);
}
回答by Swade
<div class="img-rounded">will give you rounded corners.
<div class="img-rounded">会给你圆角。
回答by moonwave99
Bootstrap is just a big, useful, yet simple CSS file- not a framework or anything you can't override. I say this because I've noticed many developers got stick with BS classes and became lazy "I-can't-write-CSS-code-anymore" coders [this not being your case of course!].
Bootstrap 只是一个大而有用但简单的CSS 文件- 不是框架或任何你不能覆盖的东西。我这么说是因为我注意到许多开发人员坚持使用 BS 类并且变得懒惰“我不能再写 CSS 代码了”编码器 [这当然不是你的情况！]。
If it features something you need, go with Bootstrap classes - if not, go write your additional code in good ol' style.css.
如果它具有您需要的功能，请使用 Bootstrap 类 - 如果没有，请使用 good ol' 编写您的附加代码style.css。
To have best of both worlds, you may write your own declarations in LESS and recompile the whole thing upon your needs, minimizing server request as a bonus.
为了两全其美，您可以在 LESS 中编写自己的声明并根据您的需要重新编译整个内容，最大限度地减少服务器请求作为奖励。
回答by Sanket Shembekar
As per bootstrap 3.0 documentation. there is no rounded corners classor idfor div tag.
根据引导程序 3.0 文档。div标签没有圆角 类或id。
you can use circle behavior for image by using
您可以通过使用为图像使用圆形行为
<img class="img-circle">
or just use custom border-radiuscss3 property in css
或者只是border-radius在 css 中使用自定义css3 属性
for only bottom rounded coner use following
仅用于底部圆形锥体使用以下
border-bottom-left-radius:25%; // i use percentage u can use pix.
border-bottom-right-radius:25%;// i use percentage u can use pix.
if you want responsivecircular div then try this
如果你想要响应式圆形 div 然后试试这个
referred from Responsive CSS Circles
回答by Michael Scheper
What you want is a Bootstrap panel. Just add the panelclass, and your header will look uniform. You can also add classes panel panel-info, panel panel-success, etc. It works for pretty much any block element, and should work with <header>, but I expect it would be used mostly with <div>s.
你想要的是一个 Bootstrap面板。只需添加panel类，您的标题就会看起来统一。您还可以添加类panel panel-info、panel panel-success等。它几乎适用于任何块元素，并且应该与 一起使用<header>，但我希望它主要与<div>s一起使用。
回答by mcbjam
Without less, ans simply for a given div :
没有更少，简单地针对给定的 div ：
In a css :
在 css 中：
.footer {
background-color: #ab0000;
padding-top: 40px;
padding-bottom: 10px;
border-radius:5px;
}
In html :
在 html 中：
<div class="footer">
<p>blablabla</p>
</div>
回答by Natesh bhat
With bootstrap4 you can easily do it like this :-
使用 bootstrap4，您可以轻松地这样做：-
class="rounded"
or
或者
class="rounded-circle"
回答by cmprogram
In Bootstrap 4, the correct way to border your elements is to name them as follows in the class list of your elements:
在 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"
To use Bootstrap 4 css files, you can simply use the CDN, and use the following link in the of your HTML file:
要使用 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>
This will provided you with the basics of Bootstrap 4. However if you would like to use the majority of Bootstrap 4 components, including tooltips, popovers, and dropdowns, then you are best to use the following code instead:
这将为您提供 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>
Alternatively, you can install Bootstrap using NPM, or Bower, and link to the files there.
或者，您可以使用 NPM 或 Bower 安装 Bootstrap，并链接到那里的文件。
*Note that the bottom tag of the three is the same as the first tag in the first link path.
*注意三个的底部标签与第一个链接路径中的第一个标签相同。
A full working example, could be :
一个完整的工作示例，可能是：
<img src="path/to/my/image/image.jpg" width="150" height="150" class="rounded-circle mx-auto">
In the above example, the image is centered by using the Bootstrap auto margin on left and right.
在上面的示例中，图像通过使用左右两侧的 Bootstrap 自动边距居中。
回答by Hello Hack
you can do like this:
你可以这样做：
<style>
.container .container-rounded {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0 0 5px rgba(1, 1, 1, 0.7);
-moz-box-shadow: 0 0 5px rgba(1, 1, 1, 0.7);
-webkit-box-shadow: 0 0 5px rgba(1, 1, 1, 0.7);
}
</style>
<div class="container">
<div class="container-rounded text-center bg-danger">
<!--your codes -->
</div>
</div>
回答by Abe Voelker
If you're using Bootstrap Sass, here's another way that avoids having to add extra classes to your element markup:
如果您使用的是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);
}
