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

我刚开始讲 Bootstrap,这里有一个问题。

我创建自定义 <header>块,我希望它的底部角落是圆的。

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

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

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

236287 次浏览

我想这就是你要找的: 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个混合在一个镜头做它自己的混合。

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

Bootstrap is just a big, useful, yet simple CSS 文件 - 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 类-如果没有,用好的 ol’style.css编写你的附加代码。

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

根据 bootstrap 3.0文档,div 标签没有圆角 同学们身份证

你可以使用图像的圆形行为

<img class="img-circle">

或者只是在 css 中使用自定义的 border-radius 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 圈引用

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

没有更少的,仅仅是给定 div 的值:

在 css 中:

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

在 html:

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

你想要的是一个引导 面板。只需添加 panel类,您的头部看起来就是统一的。还可以添加类 panel panel-infopanel panel-success等。它适用于几乎所有的块元素,应该与 <header>一起工作,但我希望它将主要与 <div>一起使用。

如果您正在使用 鞋带 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);
}

使用 bootstrap4,你可以很容易地这样做:-

class="rounded"

或者

class="rounded-circle"

在 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 自动边距在左侧和右侧居中显示图像。