我刚开始与Twitter的引导 ，这里是一个问题。
我创建自定义<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;
}
自举3，有4个混入可以使用...
.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 2:
<div class="img-rounded">会给你圆角。
Answer 3:
引导只是一个大的，有用的，但简单的CSS文件 -不是一个框架或任何你不能覆盖。 我这样说是因为我发现很多开发商拿到坚持BS类，并成为懒惰的“我 - 不能 - 写CSS代码-了”编码器[这不是你的课程的情况！]。
如果它的功能你需要，去自举类的东西-如果不是，请写出好醇”你额外的代码style.css 。
有两全其美的，你可以写自己的声明中LESS并在您需要重新编译整个事情，最大限度地减少服务器的请求作为奖金。
Answer 4:
按照引导3.0文档。 没有圆角class和id为div 标签 。
您可以通过使用循环行为形象
<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.
如果你想响应圆格，然后试试这个
从被称为响应CSS圈
Answer 5:
你想要的是一个引导面板 。 只需添加panel类，和你的头看起来均匀。 您还可以添加类panel panel-info ， panel panel-success ，等它适用于几乎所有的块级元素，并应与工作<header>但我期望它主要与使用<div>秒。
Answer 6:
没有少，只是ANS对于给定格：
在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"
Answer 8:
在引导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"
要使用引导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>
这将会为您提供了自举4的基础。然而，如果你想用引导的4个大部分组成部分，包括提示，popovers和下拉菜单，那么你最好使用下面的代码来代替：
<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，或鲍尔，并链接到那里的文件安装引导。
*请注意，这三个底部标签是一样的，在第一个链接路径的第一个标签。
一个完整的工作示例，可以是：
<img src="path/to/my/image/image.jpg" width="150" height="150" class="rounded-circle mx-auto">
在上面的例子中，图像是通过使用在左和右引导程序自动余量居中。
Answer 9:
如果您使用引导萨斯 ，下面是避免了额外的类添加到您的元素标记另一种方式：
@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);
}
文章来源: Correct way to create rounded corners in Twitter Bootstrap
