コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > ブートストラップのチュートリアル > 本文

ブートストラップで境界線の色を div に設定する方法

爱喝马黛茶的安东尼
リリース： 2019-07-17 13:45:10
オリジナル
9512 人が閲覧しました

ブートストラップで境界線の色を div に設定する方法

#ブートストラップで div の境界線の色を設定するにはどうすればよいですか?

境界線の設定方法:

1.

border:1px solid red;
ログイン後にコピー

2. 

border-width:1px;边框的粗细
border-style: solid;边框的风格
border-color: red;边框的颜色
ログイン後にコピー

3. 

border-left:1px solid red;
border-right:1px solid blue;
border-top:1px solid green;
border-bottom:1px dotted grey;
ログイン後にコピー

関連する推奨事項: 「

bootstrap 入門チュートリアル 」

線/境界線のスタイル:

none: スタイルなし。点線: 点線; 破線: 点線; 実線: 実線;

double: 二重線; 溝: 溝線; リッジ: 稜線; インセット: 凹; アウトセット: 凸 

div{padding:20px;width:10px;background:red;color:#fff}
ログイン後にコピー

(パディングとマージンの違い: ボックスに幅と高さがない場合、パディングはボックスの幅と高さに重ねることができますが、ボックスにコンテンツがない限りマージンは重ねることができません)

実際の幅ボックス = 独自の幅、左マージン、右マージン 左境界線、右境界線;

ボックスの実際の高さ = 独自の高さ、上マージン、下マージン、上境界線、下境界線;

例: 

<div style ="border:solid 1px red;  "></div>
ログイン後にコピー

以上がブートストラップで境界線の色を div に設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
bootstrap div
ソース：php.cn
前の記事：ブートストラップを使用して年、月、日の時間セレクターを実装する方法 次の記事：ブートストラップモーダルボックスにスクロールバーを追加する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
CSSでページ下部の謎の空白を解決する方法 Bootstrap と D3 を使用して単純な Web ページを構築しようとしていますが、下部の空白をすべて削除する方法がわかりません。それをなくしたいのです。 bodyとhtml...
から 2024-04-06 20:22:15
0
1
454
CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
から 2024-04-06 12:53:11
0
1
376
Web ページのサイズを変更するとブートストラップ スイッチが正しく動作しない これはコードです: <navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"clas...
から 2024-04-05 08:45:39
0
1
3443
Laravel のブートストラップ モードで AWS PDF ファイルを表示する https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/6557122022151745398XtquBSY.pdf のよ...
から 2024-04-04 22:16:18
0
1
1450
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート