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

Posted

技术标签:

【中文标题】在 Twitter Bootstrap 中创建圆角的正确方法【英文标题】:Correct way to create rounded corners in Twitter Bootstrap 【发布时间】:2012-08-18 12:37:05 【问题描述】:

我刚开始使用 Twitter Bootstrap,这里有一个问题。

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

是否有任何“正确”的方法可以通过使用预定义的类来做到这一点,或者我必须手动指定它:

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

目前,我使用的是css 样式。对于这个问题,使用less 会更好吗?

【问题讨论】:

检查this最近我尝试了左方右圆,希望对某人有所帮助 我假设通过“预定义类”,您只想将一个类添加到您的<header> 并给它圆角,并且通常让它看起来很容易引导。方法如下:***.com/a/29383075/1450294 【参考方案1】:

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

【讨论】:

@EdwardRuchevits 不。它也适用于 div。我不喜欢使用它,因为它有点令人困惑,但它确实有效。 如果不是图像,它很可能是一个面板,并且还有一个语法正确的类:***.com/a/29383075/1450294【参考方案2】:

我想这就是你要找的东西: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);

【讨论】:

所以,我必须为此使用less,而使用bootstrap.css 是不可能的? Bootstrap3 没有这样的 mixin。 关于“预定义类”的问题——您正在这里创建类。有关预定义类,请参阅此答案:***.com/a/29383075/1450294 每个 Bootstrap 3 快捷方式 mixin(.border-top-radius、.border-right-radius 等)都围绕 2 个角,因此您可以通过 .border-radius mixin 将所有 4 个圆角仅使用左和右,或顶部和底部。您也可以通过适当的组合来圆 3 个角,例如top 和 left 将舍入左下角、左上角和右上角。 Chrome 对该 blogsh.de 站点发出恶意软件警告【参考方案3】:

Bootstrap 只是一个大而有用但简单的 CSS 文件 - 不是框架或任何您无法覆盖的东西。我这么说是因为我注意到许多开发人员都坚持使用 BS 类,并且变得懒惰“我不能再写 CSS 代码”的编码器了[这当然不是你的情况!]。

如果它具有您需要的功能,请使用 Bootstrap 类 - 如果没有,请使用 style.css 编写您的附加代码。

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

【讨论】:

是的,当然。 :) 只是不想发明自行车。 你的意思是重新发明***:) 发明自行车真是太棒了。 这是关于自行车车轮类比的自行车脱落吗? #幽默 我认为问题在于当自行车被拉起皮条时会发生什么——他希望他的小部件仍然适合。 (我的意思是认真的,即使听起来有点可疑。?)直接操作 CSS 的问题是它可能不适合整体主题,特别是如果主题发生变化,例如带有插件或 Bootstrap 更新。我认为使用适当的 CSS 类并不比在代码中使用适当的常量更“懒惰”,而不是输入一个幻数。【参考方案4】:

根据 bootstrap 3.0 文档。 div tag 没有圆角 classid

您可以使用

对图像使用圆形行为
<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 然后 try this

转自Responsive CSS Circles

【讨论】:

【参考方案5】:

你想要的是一个引导程序panel。只需添加panel 类,您的标题就会看起来统一。您还可以添加类panel panel-infopanel panel-success 等。它几乎适用于任何块元素,并且应该适用于&lt;header&gt;,但我希望它主要适用于&lt;div&gt;s。

【讨论】:

【参考方案6】:

没有更少,简单地为给定的 div :

在 CSS 中:

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

html 中:

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

【讨论】:

【参考方案7】:

使用 bootstrap4,您可以轻松地做到这一点:-

class="rounded" 

class="rounded-circle"

【讨论】:

【参考方案8】:

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

【讨论】:

【参考方案9】:

在 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"   class="rounded-circle mx-auto">

在上面的示例中,图像通过使用 Bootstrap 的左右边距自动居中。

【讨论】:

以上是关于在 Twitter Bootstrap 中创建圆角的正确方法的主要内容,如果未能解决你的问题,请参考以下文章

如何在 WPF 中创建/制作圆角按钮?

如何在 MFC 中创建圆角矩形按钮

如何在android中创建圆角surfaceview

在 Drupal 中创建基于标准的、跨浏览器兼容的圆角的最佳方法是啥?

如何在 Flutter 中创建带有圆角的模态底页?

如何在 Android 中创建带圆角的 ListView?