web-dev-qa-db-ja.com

Twitter Bootstrapの丸みを帯びた角をすべて取り除きます

私はTwitter Bootstrap 2.0が大好きです - それがいかにそのような完全なライブラリであるかが大好きです...しかしBootstrapの丸みを帯びたコーナーをすべて取り除くために、非常に箱型ではないサイトのためにグローバルな修正を加えたいです...

これはたくさんのCSSです。グローバルな切り替えはありますか、それともすべての丸めを見つけて置き換えるための最良の方法は何でしょうか。

csstwitter-bootstrap
161
ina

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

* {
  border-radius: 0 !important;
}

後でこれを上書きしたくないと確信しているので、私はただ使用します！重要。

あなたがあなたのより少ないファイルをコンパイルしていないならば、ちょうどしなさい：

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

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

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

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

$enable-rounded:   false;
310
BrunoS

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

24
SLaks

ブートストラップバージョン<3を使用している場合...

Sass/scssとは

$baseBorderRadius: 0;

少ないと

@baseBorderRadius: 0;

あなたはこの変数を設定する必要があるでしょうbeforeブートストラップをインポートする。これはすべての井戸と航海艦に影響します。

更新

Bootstrap 3を使用している場合baseBorderRadiusにする必要がありますborder-radius-base

19
adamwong246

すべてを再コンパイルしたくない場合は、CSSに.btn {border-radius: 0;}を追加するだけです。

18
yves amsellem
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;
}
18
ymakux

Bootstrap> = 3.0ソースファイル（SASSまたはLESS）を使用するとき、たとえば、丸みを帯びた角を取り除くために、たとえば、バグとなる要素が1つだけあれば、角丸をすべて取り除く必要はありません。ナビゲーションバー。

SCSSの場合

$navbar-border-radius: 0;

レスで：

@navbar-border-radius: 0;

あなたがすべての上の角の丸い部分を取り除きたいのであれば、あなたは@ adamwong246が言及したことをして使用することができます：

$baseBorderRadius: 0;
@baseBorderRadius: 0;

これら2つの設定は "root"設定で、他の値が指定されていない限り、navbar-border-radiusのような他の設定が継承されます。

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

5
cwd

この質問はかなり古くなっていますが、Bootstrap 4関連検索でも検索エンジンでよく見られます。私はそれが丸みを帯びた角を無効にするための答えを追加する価値があると思います、BS4の方法。

_variables.scssには、フレックスグリッドシステム、丸みを帯びた角、グラデーションなどを有効または無効にするなど、すばやく変更するためのグローバル修飾子がいくつかあります。

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

丸みを帯びた角はデフォルトでenabledです。

Sassと私のようなあなた自身の_custom.scssを使って（あるいは公式カスタマイザを使って）Bootstrap 4をコンパイルしたい場合は、関連する変数を上書きすれば十分です。

$enable-rounded : false
5
edigu
.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
}
5
tomruss

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

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

私が使ったのは

* {
  border-radius: 0 !important;
}

これが誰かに役立つことを願っています

4
Smith

Bootstrapをカスタマイズする非常に簡単な方法があります。

  1. http://getbootstrap.com/customize/ にアクセスしてください。
  2. すべての "radius"を見つけて、あなたが望むようにそれらを修正してください。
  3. 「コンパイルしてダウンロード」をクリックして、独自のバージョンのBootstrapをお楽しみください。
4
Zbigniew Ledwoń

あるいは、境界の半径を削除したい要素のhtmlにこれを追加することもできます（この方法では、すべてのボタン/要素から削除することはできません）。

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

FlatStrap もご覧になることをお勧めします。それは丸みを帯びたコーナー、グラデーションとドロップシャドウなしでブートストラップCSSのメトロスタイルの代替品を提供します。

1
Florian Feldhaus

別の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;
}
0
Ruberandinda Patience