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

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

我正在创建自定义<header>块，并且希望将其底角弄圆。

是否有任何“正确”的方式通过使用预定义的类来做到这一点，或者我必须手动指定它，例如：

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

现在，我正在使用css样式。也许最好使用less该问题？

我想这就是您要寻找的东西：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);
}

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

Bootstrap只是一个很大，有用但简单的CSS文件-并非框架或您无法覆盖的任何内容。我之所以这样说，是因为我注意到许多开发人员坚持使用BS类，并且变得懒惰“不再写CSS代码”（当然，这不是您的情况！）。

如果它具有您需要的功能，请使用Bootstrap类-否则，请使用ol'编写其他代码style.css。

为了兼顾两者，您可以在LESS中编写自己的声明，然后根据需要重新编译整个过程，从而最大程度地减少服务器请求。

根据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圈子引用

您需要的是Bootstrap面板。只需添加panel类，您的标题就会看起来统一。您还可以添加class panel panel-info，panel panel-success等等。它几乎适用于任何block元素，并且应与一起使用<header>，但我希望它将主要与<div>s一起使用。

没有少，ans只是给定的div：

在CSS中：

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

在html中：

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

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

class="rounded" 

要么

class="rounded-circle"

如果您使用的是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);
}

在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自动边距将图像居中。