Bootstrapのクラススタイルのまとめ

基本クラス

.code 単一行のインラインコードを表示します
.pre 複数行のブロックコードを表示します
.kbd ユーザー入力コードを表示します
.pre-scrollable 高さが 340px を超える場合、スクロールバーが表示されますY 軸

Table クラス

.table 基本テーブル margin-bottom: 20 ピクセル、ヘッドの下部に 2 ピクセルのライトグレーの実線、各セルの上部に 1 ピクセルのライトグレーの実線
.table-striped: ゼブラテーブル、1 行おきに明るい灰色の背景色
.table-border: 枠線のある表、すべてのセルに 1 ピクセルの枠線があります
.table-hover: 背景色が強調表示され、表の行の上にマウスを置きます
。 table-condensed: セルを変換します パディングを 8px から 5px に調整します
.table-sensitive: クラス名 .table-sensitive でコンテナを設定し、このコンテナに

を配置します

;テーブル行のクラス

.active は現在のアクティビティ情報を示します
.success 成功または正しい動作
.info は中立的な情報または動作を表します
.warning は警告を表します
.danger は危険または間違った動作を表します

.active に加えて、他の 4 つのクラス名は、Bootstrap フレームワークのグリッド システムに合わせて .table-hover

Form

.form-horizo​​ntal 水平フォーム効果と調整する必要があり、フォーム コントロールのパディングとマージンの値を設定します。グリッド システムの「行」に似た「フォーム グループ」の式
ブートストラップで入力を使用する場合、さまざまなフォーム スタイルでコントロール スタイルを正しくするために、タイプ タイプも追加する必要があります。 add .form-control. 複数行選択は、multiple 属性の値を multiple に設定し、cols は幅を設定します。 .form-control、colsは必要ありません
チェックボックスとラジオの両方でラベルパッケージを使用します
チェックボックスを横に配置する必要がある場合は、ラベルlabelにクラス名「checkbox-inline」を追加するだけです

修正されましたナビゲーション バー

ページのメイン コンテンツの上部と下部 すべてが固定ナビゲーション バーでカバーされます。固定ナビゲーション バーがコンテンツを覆わないようにするには、本文でいくつかの処理を行う必要があります:

body {
padding-top: 70px;/*有顶部固定导航条时设置*/
padding-bottom: 70px;/*有底部固定导航条时设置*/
}
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
　…
</div>

実際、このソリューションに加えて、固定ナビゲーション バーを上に配置する他のソリューションもあります。ページのコンテンツ フロント:

<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
　…
</div>
<div class="content">我是内容</div>

次のスタイル コードをファイルに追加します:

.navbar-fixed-top ~ .content {
padding-top: 70px;
}
.navbar-fixed-bottom ~ .content {
padding-bottom: 70px;
}

上記は、エディターによって紹介された Bootstrap クラス スタイルの概要です。