Twitter Bootstrapのすべての角丸を取り除く


172

私はTwitter Bootstrap 2.0が大好きです-完全なライブラリであることが大好きです...しかし、Bootstrapの角の丸い部分をすべて取り除くことで、非常にボックス型ではなく丸みを帯びたサイトをグローバルに変更したいと思います...

それはやり過ごす多くのCSSです。グローバルな切り替えはありますか、それとも丸められたものをすべて見つけて置き換えるための最良の方法は何ですか?


すべてまたは一部の丸みを帯びた角を削除しますか?
Andres Ilich

:あなたは、現在の場所に持っているもの変更できない場合、私は0に、すべての国境半径セットを持ってMODファイルを作成mkamyszek.tumblr.com/post/61791361233/...
マーク・Kamyszek

1
いな、私の答えはあなたのためにうまくいきましたか?あなたはそれを正しいものとしてマークしますか?
BrunoS 2014

はい。ありがとうございました!..しかし、なぜ反対票を投じるのか
ina

回答:


330

次のように、すべての要素のborder-radiusを「0」に設定します。

* {
  border-radius: 0 !important;
}

後で上書きしたくないと確信しているので、!importantを使用します。

少ないファイルをコンパイルしない場合は、次のようにします。

* {
  -webkit-border-radius: 0 !important;
     -moz-border-radius: 0 !important;
          border-radius: 0 !important;
}

ブートストラップ3では、コンパイルしている場合、variables.lessファイルに半径を設定できます。

@border-radius-base:        0px;
@border-radius-large:       0px;
@border-radius-small:       0px;

ブートストラップ4でコンパイルしている場合は、_custom.scssファイルでradiusをすべて無効にできます。

$enable-rounded:   false;

2
これは、コアファイルを変更せずにブートストラップをカスタマイズしようとする場合に最適なソリューションです。正解です。
マーティ

4
ええ、ええ、クイックnダーティ!
プログラマー

1
私はこれを使用しまし * { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; }たが、Bootstrap 3.2では完全に機能しています。フィックスマンに感謝!
Todor Todorov 2015

1
このソリューションは、ブートストラップスタイルの<select>入力では機能しません。おそらく-webkit-appearance: menulist
johnsorrentino 2015

これはおそらく良い解決策ですが、最善ではありません。これにより、要素ごとに不必要に多数の冗長CSSが生成されます。これは@ymakuxが提供する最良のソリューションの1つだと思います。これを試すことができます
MB Parvez Rony、2015年

25

ソース.lessファイルをダウンロードして、.border-radius()ミックスインを空白にします。


これは、Bootstrap CSS処理を習得する効率に関しては、おそらく最良のソリューションです。
クレウィス2016年

20

Bootstrapバージョン<3を使用している場合...

sass / scssを使用

$baseBorderRadius: 0;

少ない

@baseBorderRadius: 0;

ブートストラップをインポートする前に、この変数を設定する必要があります。これは、すべてのウェルとナビゲーションバーに影響します。

更新

Bootstrap 3を使用している場合、baseBorderRadiusborder-radius-baseである必要があります



18
code,
kbd,
pre,
.img-rounded,
.img-thumbnail,
.img-circle,
.form-control,
.btn,
.btn-link,
.dropdown-menu,
.list-group-item,
.input-group-addon,
.input-group-btn,
.nav-tabs a,
.nav-pills a,
.navbar,
.navbar-toggle,
.icon-bar,
.breadcrumb,
.pagination,
.pager *,
.label,
.badge,
.jumbotron,
.thumbnail,
.alert,
.progress,
.panel,
.well,
.modal-content,
.tooltip-inner,
.popover,
.popover-title,
.carousel-indicators li {
    border-radius:0 !important;
}

7

この質問はかなり古いものですが、Bootstrap 4関連の検索でも検索エンジンで非常に目に付きます。丸みを帯びたコーナーを無効にするための回答をBS4方法で追加することは価値があると思います。

_variables.scssいくつかのグローバル改良剤が存在することは、迅速勾配等のようなフレックスgirdシステムを有効または無効にするようなもの、丸い角を変更するために存在します。

$enable-flex:          false !default;
$enable-rounded:       true !default; // <-- This one
$enable-shadows:       false !default;
$enable-gradients:     false !default;
$enable-transitions:   false !default;

角が丸いのがenabledデフォルトです。

Sassを使用してBootstrap 4をコンパイルし、自分の_custom.scssような独自のもの(または公式のカスタマイザを使用)をコンパイルする場合は、関連する変数をオーバーライドするだけで十分です。

$enable-rounded : false

1
あなたは揺るがします;)Bootstrap 4が口コミで広まったら、これは受け入れられる答えになるはずです...申し訳ありませんが、公開しました。すでにアルファ版で使用している人にとっては、ここに隠されています。
kub1x 2017年

5
.btn {
  border-radius:                    0px;
  -webkit-border-radius:            0px;
  -moz-border-radius:               0px;
}

または、ミックスインを定義して、丸みのないボタンが必要な場所に含めます。

@mixin btn-round-none {
  border-radius:                    0px;
  -webkit-border-radius:            0px;
  -moz-border-radius:               0px;
}

.btn.btn_1 {
@inlude btn-round-none
}

4
pxいいえ、冗長ですか?
ta.speot.is 2013

1
私は通常「px」を保持するので、値を変更する必要がある場合に「px」を再度入力する必要はありません。
nkkollaw 2013

1
しかし、余分なデータバイト
Anthony Shaw

5

Bootstrap> = 3.0ソースファイル(SASSまたはLESS)を使用する場合、たとえば、navbarの丸い角を取り除くために、バグを引き起こしている要素が1つしかない場合は、すべての丸い角を取り除く必要はありません。使用する:

SCSSの場合:

$navbar-border-radius: 0;

LESSの場合:

@navbar-border-radius: 0;

ただし、すべての角の丸い部分を取り除きたい場合は、@ adamwong246で言及したことを実行して使用できます。

$baseBorderRadius: 0;
@baseBorderRadius: 0;

これらの2つの設定は「ルート」設定であり、他navbar-border-radiusの値が指定されていない限り、他の設定の継承元となります。

すべての変数のリストについては、variables.lessまたはvariables.scssを確認してください。


4

上記で@BrunoSによって投稿されたコードは私にとってはうまくいきませんでした。

* {
  .border-radius(0) !important;
}

私が使ったのは

* {
  border-radius: 0 !important;
}

これが誰かを助けることを願っています


3
@brunosが使用していたLESS
afaolek 2015年


2

または、ボーダーの半径を削除する要素のhtmlにこれを追加することもできます(この方法では、すべてのボタン/要素から削除するわけではありません)。

style="border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px;"

2

SASS Bootstrapを使用する場合-自分でBootstrapをコンパイルしている場合-すべてのボーダー半径(またはより具体的な)を単純にゼロに設定できます。

$border-radius:               0;
$border-radius-lg:            0;
$border-radius-sm:            0;

丁度。これらの宣言はegの前に置く@import "../node_modules/bootstrap/scss/bootstrap";と、!defaultbootstrap-sourceのキーワードで宣言されているため、bootstrapはそれらをオーバーライドしません。
Jeppe

2

Bootstrapには、次の.rounded-0ような要素の丸みを帯びた角を取り除くなど、ボーダー用の独自のクラスがあります。buttons

https://getbootstrap.com/docs/4.4/utilities/borders/#border-radius

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<a class="btn btn-primary">Regular Rounded Corners</a>
<a class="btn btn-primary rounded-pill">Pill Corners</a>
<a class="btn btn-primary rounded-0">Square Corners</a>



1

ブートストラップを使用している場合は、ブートストラップclass = "rounded-0"を使用して、角の丸みのない鋭いエッジで境界を作成できます。 <button class="btn btn-info rounded-0"">Generate</button></span>


ブートストラップのバージョン
INA

0

別のcssファイルを作成し、次のコードを追加しましたすべての要素が含まれているわけではありません

/* Flatten das boostrap */
.well, .navbar-inner, .popover, .btn, .tooltip, input, select, textarea, pre, .progress, .modal, .add-on, .alert, .table-bordered, .nav>.active>a, .dropdown-menu, .tooltip-inner, .badge, .label, .img-polaroid, .panel {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 0px !important;
    border-collapse: collapse !important;
    background-image: none !important;
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.