web-dev-qa-db-ja.com

Bootstrap= 4つのボーダーユーティリティ

これを見つけるのは明らかだと思うが、何も思いついていない。 Bootstrap 4には境界線を追加および削除するためのユーティリティクラスがありますが、境界線の幅または実線または破線などのスタイルを定義するためのサポートはありますか

<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>

mr-3やpt-2など、マージンとパディングを変更するクラスがいくつかあります。

たぶん自分で定義する必要があるのでしょうか？

htmlcsstwitter-bootstrapbootstrap-4
7
user9266304

いいえ、Bootstrap 4に境界線の幅またはスタイルのクラスはありません。

次のようなものを簡単に追加できます。

.border-3 {
    border-width:3px !important;
}

https://www.codeply.com/go/ktnEeWExvh

注：Bootstrapは、!importantのような多くの ユーティリティクラス でも！importantを使用するため、この場合はborder-*が必要です。

20
Zim

bootstrap 4で使用できる境界線は、次の場合のみです。

  • ボーダー-ボーダーの削除を追加
  • ボーダの色
  • 境界半径
  • Float
  • レスポンシブフロート
  • 中央揃え
  • 幅
  • 高さ
  • 間隔

次のような独自のクラスを作成できます。

.border-dotted{
 border-style: dotted;
}
.border-10{
border-style:solid;
 border-width: 10px;
}
<h1 class="border-dotted">Hi</h1>
<h1 class="border-10">Hi!</h1>
2
Teshtek

bootstrap npm libraryがあり、_variable.scssを見ると、$ border-width：1px！default;

bootstrap=モジュールをインポートできる新しいscssファイルを作成することでオーバーライドできます。

$myborder-width : 3px;

$border-width:$myborder-width;

@import "../node_modules/bootstrap/scss/bootstrap";(you can include only the required modules here)

このmain.scssファイルをcssに変換し、htmlでbootstrap.cssの代わりにこのcssを使用できます。

1
Akash Singh

BootstrapのBorder Documentationを参照してください。

基本的なスタイリングクラス（btn-default、btn-warningに類似）のセットと境界の半径が設定されています。しかし、他のスタイリングは自分で行う必要があります。

これは、Bootstrapをフレームワークにネイティブに追加するための十分な需要がない、効率的に定義するためのオプションが多すぎる、またはそれらを記述するのがいかに簡単であるかのいずれかです独自のクラス。

0
David Picksley

bootstrap=拡張機能を追加することを提案します。

/* _border-width-customs.scss */
$border-width-custom-1: 1px !default;
$border-width-custom-2: 2px !default;
$border-width-custom-3: 3px !default;
$border-width-custom-4: 4px !default;
$border-width-custom-5: 5px !default;
$border-width-custom-6: 6px !default;
$border-width-custom-7: 7px !default;
$border-width-custom-8: 8px !default;

$border-width-customs: ("1": $border-width-custom-1, "2": $border-width-custom-2, "3": $border-width-custom-3, "4": $border-width-custom-4, "5": $border-width-custom-5, "6": $border-width-custom-6, "7": $border-width-custom-7, "8": $border-width-custom-8);

@each $name, $size in $border-width-customs {
    @each $var in '', 'top-', 'right-', 'bottom-', 'left-' {
        .border-#{$var}#{$name} { border-#{$var}width: $size !important; border-#{$var}style: solid; border-#{$var}color: $border-color;}
    }
}
0
CisSasGot