ブートストラップレイアウトのタイポグラフィスタイル、リストスタイル、テーブルスタイルの紹介-htmlチュートリアル-php.cn

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

青灯夜游

リリース： 2018-10-13 16:56:48

転載

4277 人が閲覧しました

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

レイアウトコンテナ

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-horizontal</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.table-hover tr:hover{ background:red; } /*控制各行的颜色,odd控制下标为偶数的行,even控制下标为奇数的行*/