私はTwitter Bootstrap 2.0が大好きです-完全なライブラリであることが大好きです...しかし、Bootstrapの角の丸い部分をすべて取り除くことで、非常にボックス型ではなく丸みを帯びたサイトをグローバルに変更したいと思います...
それはやり過ごす多くのCSSです。グローバルな切り替えはありますか、それとも丸められたものをすべて見つけて置き換えるための最良の方法は何ですか?
私はTwitter Bootstrap 2.0が大好きです-完全なライブラリであることが大好きです...しかし、Bootstrapの角の丸い部分をすべて取り除くことで、非常にボックス型ではなく丸みを帯びたサイトをグローバルに変更したいと思います...
それはやり過ごす多くのCSSです。グローバルな切り替えはありますか、それとも丸められたものをすべて見つけて置き換えるための最良の方法は何ですか?
回答:
次のように、すべての要素の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;
* { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; }
たが、Bootstrap 3.2では完全に機能しています。フィックスマンに感謝!
-webkit-appearance: menulist
。
ソース.less
ファイルをダウンロードして、.border-radius()
ミックスインを空白にします。
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;
}
この質問はかなり古いものですが、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
.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
}
px
いいえ、冗長ですか?
Bootstrap> = 3.0
ソースファイル(SASS
またはLESS
)を使用する場合、たとえば、navbarの丸い角を取り除くために、バグを引き起こしている要素が1つしかない場合は、すべての丸い角を取り除く必要はありません。使用する:
$navbar-border-radius: 0;
@navbar-border-radius: 0;
ただし、すべての角の丸い部分を取り除きたい場合は、@ adamwong246で言及したことを実行して使用できます。
$baseBorderRadius: 0;
@baseBorderRadius: 0;
これらの2つの設定は「ルート」設定であり、他navbar-border-radius
の値が指定されていない限り、他の設定の継承元となります。
すべての変数のリストについては、variables.lessまたはvariables.scssを確認してください。
上記で@BrunoSによって投稿されたコードは私にとってはうまくいきませんでした。
* {
.border-radius(0) !important;
}
私が使ったのは
* {
border-radius: 0 !important;
}
これが誰かを助けることを願っています
LESS
Bootstrapをカスタマイズする非常に簡単な方法があります。
SASS Bootstrapを使用する場合-自分でBootstrapをコンパイルしている場合-すべてのボーダー半径(またはより具体的な)を単純にゼロに設定できます。
$border-radius: 0;
$border-radius-lg: 0;
$border-radius-sm: 0;
@import "../node_modules/bootstrap/scss/bootstrap";
と、!default
bootstrap-sourceのキーワードで宣言されているため、bootstrapはそれらをオーバーライドしません。
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>
FlatStrapを確認することもできます。丸みを帯びたコーナー、グラデーション、ドロップシャドウのない、Bootstrap CSSのMetroスタイルの代替品を提供します。
ブートストラップを使用している場合は、ブートストラップclass = "rounded-0"を使用して、角の丸みのない鋭いエッジで境界を作成できます。
<button class="btn btn-info rounded-0"">Generate</button></span>
別の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;
}