ブートストラップ レイアウトのタイポグラフィ スタイル、リスト スタイル、テーブル スタイルの紹介

この記事では、ブートストラップ レイアウトのレイアウト スタイル、リスト スタイル、テーブル スタイルについて紹介します。困っている友人は参考にしていただければ幸いです。ブートストラップ関連のビデオ チュートリアルをさらに学習して入手したい場合は、ブートストラップ チュートリアルにアクセスしてください。

レイアウトコンテナ

bootstrap すべての Web ページは固定幅であるべきだと考えています。コンテナ内の水平方向と垂直方向の中央に配置されるか、コンテナの幅の 100% を占めます。

Bootstrap は、グローバル フォント サイズを 14 ピクセル、行の高さを 1.428 (20 ピクセル)、

段落の行の高さを 1/2 (10 ピクセル) に設定します。 color を # 333

1) 固定幅

.container クラスを使用します。固定幅とレスポンシブ レイアウト (水平中央) をサポートするコンテナー。

#2) 幅のパーセント

##.container-fluid 幅 100% のコンテナ。視覚化ウィンドウ全体を占めます。

#植字スタイル

.text-center 中央揃え

.text-right 右揃え

.text-left 左揃え

.text-uppercase 小文字を大文字に変換するために使用されます

#。 text- lowercase は、大文字を小文字に変換するために使用されます。

.text-capitalize は、最初の文字を大文字にするために使用されます

#

タグは、「WWW」や「NATO」などの略語を示します (検索エンジンの検索に適しています)

#<マーク> テキストを強調表示 (網掛け)

#ブートストラップによってコピーされたタグは次のとおりです

## は、マシンが読み取ることができるコンピューターのソース コードまたはその他のテキスト コンテンツを表すために使用されます。 (網掛けの追加)

#

 <span style="font-family:'PingFangSC-Regular', Verdana, Arial, '微软雅黑', '宋体';color:#000000;">一般的なアプリケーションはコンピュータのソース コードを表します (網掛けと境界線の追加)<span style="font-size:14px;background-color:rgb(253,252,248);"></span> </span></p>
<p style="text-align:left;"><span style="font-family:'PingFangSC-Regular', Verdana, Arial, '微软雅黑', '宋体';color:#000000;"><span style="font-size:14px;background-color:rgb(253,252,248);"><span style="color:rgb(0,0,0);font-family:'PingFangSC-Regular', Verdana, Arial, '微软雅黑', '宋体';font-size:14px;text-align:left;background-color:rgb(253,252,248);">リスト スタイル</span></span></span></p>
<p><span style="color:rgb(204,102,0);"><strong>##リスト: 順序付きリスト、順序なしリスト、定義リスト。 <span style="font-size:18px;"></span></strong></span><br></p>.sr-only <p>行、列、またはテーブル全体の要素を非表示にします<span style="font-size:14px;color:#000000;"><strong><p><span style="font-size:14px;color:#000000;"><em>.list-unstyled</em> リストの前の箇条書きを削除し、リストのデフォルトのマージン値を削除するために使用されます。 </span></p>
<p><span style="font-size:14px;color:#000000;">.list- inline は、リストの内容を同じ行に配置し、少量のパディング値 </span></p>
<p><span style="font-size:14px;color:#000000;">.dl-horizo​​ntal</span><span style="font-size:14px;color:#ff6666;"> を追加して、使用するリストを定義します </span><span style="font-size:14px;color:#000000;"> は、定義タイトルと定義説明情報を同一行に配置し、dt タグと dd タグの内容を同一行に配置します</span></p>
<p><span style="color:rgb(0,0,0);"><span style="color:rgb(204,102,0);"><strong>##テーブル スタイル<span style="font-size:18px;"> </span></strong></span><br></span></p>
<p>#.table<span style="font-size:14px;color:#000000;"> .table クラスを任意の <table> に追加します。タグを使用すると、基本的なスタイル、いくつかのパディング、水平分割線を指定できます。 <em></em></span></p>
<p>.table-border<span style="font-size:14px;color:#000000;"> テーブルとテーブル内の各セルに境界線を追加します。 -ストライプ <em>各行の色の変更効果を実現します (</em></span>IE8 は </p>
<p> をサポートしていません)<span style="font-size:14px;color:#000000;"><em><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">table.table-striped tr:nth-child(odd){
            background:red;
            }
            /*控制各行的颜色,odd控制下标为偶数的行,even控制下标为奇数的行*/

ログイン後にコピー

.table-hoverマウス配置の効果を理解する

		 table.table-hover tr:hover{
            background:red;
            }
            /*控制各行的颜色,odd控制下标为偶数的行,even控制下标为奇数的行*/

.table-condensed コンパクトなテーブルの場合は、パディング値を半分にします

.table-sensitive テーブルの親要素に応答性を設定します。画面が 768px より小さい場合、その周囲に枠線が表示されます。

## ステータス クラス

# は tr または td または th にのみ設定でき、テーブル タグには設定できません

これらのステータス クラスを通じて、行またはセルに色を設定できます

##.success#操作が成功したことを示します##お試しください##.警告.danger

#カテゴリ

##説明

インスタンス

.active

ホバーカラーを行またはセルに適用します

#試してみましょう

#1 回試行します

#.info

##情報の変更を示す操作

警告操作を示します

お試しください

危険な操作を示します

一度試してください

#詳細については、次を参照してください。

##製品名製品価格製品の状態成功色Xiaomi携帯電話 1499 配信アクティブ カラーXiaomi 携帯電話1499 配信infoColor##Xiaomi 携帯電話##1499#配送# Xiaomi 携帯電話1499配信

#警告カラー
危険な色			概要: 上記がこの記事の全内容ですので、皆さんの学習に役立つことを願っています。

以上がブートストラップ レイアウトのタイポグラフィ スタイル、リスト スタイル、テーブル スタイルの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。