bootstrap は 6 つのリスト スタイルをサポートします: 1. ul 順序なしリスト; 2. ol 順序付きリスト; 3. 削除されたリスト; 4. インライン リスト (垂直リストを水平リストに変更することを指します)、および箇条書きを削除します。リストを水平方向に表示し続ける; 5. 定義リストを dl; 6. 水平方向の定義リスト。
順序なしリスト
<ul>
<li>…</li>
</ul>
順序付きリスト
<ol>
<li>…</li>
</ol>
定義リスト
<dl>
<dt>…</dt>
<dd>…</dd>
</dl>Bootstrap は、通常の使用法に基づいて 6 形式のリストを提供します。
☑ 順序なしリスト ☑ 順序付きリスト ☑ ポイント リストに移動☑ インラインリスト ☑ 定義リスト ☑ 水平定義リスト 次は、Bootstrap が提供するこれを学びましょう リストの 6 つの使い方
<!DOCTYPE HTML> < html> <head> <meta charset="utf-8"> <title>列表--简介</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <body> <ul> <li>无序列表信息1</li> <li>无序列表信息2</li> <li>无序列表信息3</li> </ul> <ol> <li>有序列表信息1</li> <li>有序列表信息2</li> <li>有序列表信息3</li> </ol> <dl> <dt>定义列表标题</dt> <dd>定义列表信息1</dd> <dd>定义列表信息2</dd> </dl> </body> </html>
リスト -- 順序なしリスト、順序付きリスト
ul,
ol {
margin-top: 0;
margin-bottom: 10px;
}
ul ul,
ol ul,
ul ol,
ol ol {
margin-bottom: 0;
} ソース コードから、Bootstrap はリストの margin にいくつかの調整を加えただけであることがわかります。
リストのネスト
ブートストラップではリストをネストすることもできます。 リスト -- リストに移動Bootstrap では、デフォルトで、順序なしリスト と 順序付きリスト が箇条書きになっていることがわかります。ただし、実際の作業では、ナビゲーションに順序なしリストを使用する場合など、多くの場合、リストにはこの番号は必要ありません。 Bootstrap は多くの開発者に配慮しており、順序なしリストに「.list-unstyled」というクラス名を追加することでデフォルトのリストスタイルを削除することができます。 /*ソース コードについては、bootstrap.css ファイルの 580 ～ 583 行目をご覧ください*/
.list-unstyled {
padding-left: 0;
list-style: none;
}例からわかるように、項目番号に加えて、デフォルトの left パディングリストの # も含まれます。##Alsocleared0。 List--inline list
Bootstrap はリストと同じように「
.list-inline」というクラス名を追加することでインラインリストを実装します。 垂直リストを水平リストに置き換えます、箇条書き(数字)を削除します、水平表示を維持します。インライン リストは水平方向のナビゲーションを作成するために生まれたとも言えます。 /*bootstrap.css ファイルの 584 ～ 593 行目のソース コードを表示します*/.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}例を見てみましょう:
<ul class="list-inline">
<li>W3cplus</li>
<li>Blog</li>
<li>CSS3</li>
<li>jQuery</li>
<li>PHP</li>
</ul>List--Definition list
定義リストについては、Bootstrap はあまり多くの調整を行わず、
、マージン 、および フォント太字 効果のみを調整しました。 。 /*ソース コードについては、bootstrap.css ファイルの 594 ～ 607 行目をご覧ください*/dl {
margin-top: 0;
margin-bottom: 20px;
}
dt,
dd {
line-height: 1.42857143;
}
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}定義リストの使用については、実際には非常に簡単です。以前の方法と同じです。定義リストの使用:
<dl>
<dt>W3cplus</dt>
<dd>一个致力于推广国内前端行业的技术博客</dd>
<dt>seashen.cn</dt>
<dd>一个真心在做HTML5教育的网站</dd>
</dl>List--水平方向の定義リスト
水平方向の定義リスト インライン リストと同様に、Bootstrap はクラス名「##」を追加できます。 #.dl-horizontal
@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.dl-horizontal dd {
margin-left: 180px;
}
}ここにメディア クエリが追加されます。つまり、画面 が 768px より大きい場合にのみ、クラス名「.dl-horizontal」を追加することで、水平方向の定義リスト効果が得られます。主な実装方法: 1. dt を左浮動小数点数に設定し、幅を 160px に設定します 2. dd を左マージンの値 180px に設定して、水平方向の効果を実現します 3. タイトルの幅が 160px を超える場合、3 つの省略記号 が表示され、その使用法は次のとおりです。
<dl class="dl-horizontal">
<dt>W3cplus</dt>
<dd>一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文</dd>
<dt>seashen.cn</dt>
<dd>一个专业的HTML5网站</dd>
<dt>我来测试一个标题，我来测试一个标题</dt>
<dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd>
</dl> ブラウザ画面を縮小すると、水平定義リストは元の状態に戻ります。 推奨学習:「ブートストラップの使用方法のチュートリアル
」以上がブートストラップはいくつかのリスト スタイルをサポートしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ブートストラップの分解：それが何であり、なぜそれが重要なのかApr 14, 2025 am 12:05 AMbootstrapisafree、open-sourcessframeworkthatsthatssponsiveandmobile-firstwebitedevelopment。
ブートストラップ：Webデザインを簡単にしますApr 13, 2025 am 12:10 AMWebデザインがブートストラップを簡単にするものは何ですか？そのプリセットコンポーネント、レスポンシブデザイン、豊富なコミュニティサポート。 1）プリセットコンポーネントライブラリとスタイルにより、開発者は複雑なCSSコードの作成を避けることができます。 2）ビルトイングリッドシステムは、レスポンシブレイアウトの作成を簡素化します。 3）コミュニティサポートは、豊富なリソースとソリューションを提供します。
Bootstrapの影響：Web開発の加速Apr 12, 2025 am 12:05 AMBootstrapはWeb開発を加速し、事前に定義されたスタイルとコンポーネントを提供することにより、開発者は迅速にレスポンシブWebサイトを構築できます。 1）プロジェクトの数日以内に基本的なレイアウトを完了するなど、開発時間を短縮します。 2）SASS変数とミキシンを通じて、ブートストラップにより、カスタムスタイルが特定のニーズを満たすことができます。 3）CDNバージョンを使用すると、パフォーマンスを最適化し、負荷速度を向上させることができます。
ブートストラップの理解：コアの概念と機能Apr 11, 2025 am 12:01 AMBootstrapはオープンソースのフロントエンドフレームワークであり、その主な機能は、開発者がレスポンシブWebサイトを迅速に構築できるようにすることです。 1）複雑なUI効果の実装を容易にするために、事前定義されたCSSクラスとJavaScriptプラグインを提供します。 2）ブートストラップの作業原則は、メディアクエリを通じてレスポンシブデザインを実現するために、そのCSSおよびJavaScriptコンポーネントに依存しています。 3）使用の例には、ボタンの作成などの基本的な使用法や、カスタムスタイルなどの高度な使用法が含まれます。 4）一般的なエラーには、クラス名のスペルミスやファイルの導入が誤っています。ブラウザ開発者ツールを使用してデバッグすることをお勧めします。 5）パフォーマンスの最適化は、カスタムビルドツールを通じて実現できます。
ブートストラップディープダイブ：レスポンシブデザインと高度なレイアウト技術Apr 10, 2025 am 09:35 AMブートストラップは、グリッドシステムとメディアクエリを介してレスポンシブデザインを実装し、さまざまなデバイスにウェブサイトを適合させます。 1.事前定義されたクラス（COL-SM-6など）を使用して、列の幅を定義します。 2。グリッドシステムは12列に基づいており、合計が12。3を超えないことに注意する必要があります。ブレークポイント（SM、MD、LGなど）を使用して、異なる画面サイズの下のレイアウトを定義します。
ブートストラップインタビューの質問：夢のフロントエンドの仕事を着陸させますApr 09, 2025 am 12:14 AMBootstrapは、レスポンシブWebサイトとアプリケーションを迅速に開発するためのオープンソースのフロントエンドフレームワークです。 1.レスポンシブ設計、一貫したUIコンポーネント、迅速な発展の利点を提供します。 2。グリッドシステムは、12列構造に基づいてフレックスボックスレイアウトを使用し、.container、.row、.col-sm-6などのクラスを通じて実装されています。 3.カスタムスタイルは、SASS変数を変更するか、CSSを上書きすることで実装できます。 4.一般的に使用されるJavaScriptコンポーネントには、モーダルボックス、カルーセル図、折りたたみが含まれます。 5.最適化パフォーマンスは、必要なコンポーネントのみをロードし、CDNを使用し、マージファイルを圧縮することで実現できます。
Bootstrap＆JavaScriptの統合：動的な機能と機能Apr 08, 2025 am 12:10 AMBootstrapとJavaScriptをシームレスに統合して、Webページに動的な機能を与えることができます。 1）JavaScriptを使用して、モーダルボックスやナビゲーションバーなどのブートストラップコンポーネントを操作します。 2）jQueryが正しくロードされていることを確認し、一般的な統合の問題を回避します。 3）イベント監視とDOM操作を通じて、複雑なユーザーの相互作用と動的効果を実現します。
ブートストラップ検索バーを取得する方法Apr 07, 2025 pm 03:33 PMブートストラップを使用して検索バーの値を取得する方法：検索バーのIDまたは名前を決定します。 JavaScriptを使用してDOM要素を取得します。要素の値を取得します。必要なアクションを実行します。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
Dreamweaver Mac版
ビジュアル Web 開発ツール
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
ドリームウィーバー CS6
ビジュアル Web 開発ツール
