はじめに
Twitter 発の Bootstrap は、現在最も人気のあるフロントエンド フレームワークです。 Bootstrap は HTML、CSS、JAVASCRIPT に基づいており、シンプルかつ柔軟で、Web 開発を高速化します。
Bootstrap パッケージの内容
基本構造: Bootstrap は、グリッド システム、リンク スタイル、および背景を備えた基本構造を提供します。これについては、ブートストラップの基本構造 セクションで詳しく説明します。
CSS: Bootstrap には、グローバル CSS 設定、基本的な HTML 要素スタイルの定義、拡張可能なクラス、および高度なグリッド システムの機能が付属しています。これについては、ブートストラップ CSS セクションで詳しく説明します。
コンポーネント: Bootstrap には、画像、ドロップダウン メニュー、ナビゲーション、アラート ボックス、ポップアップ ボックスなどを作成するための再利用可能なコンポーネントが十数個含まれています。これについては、レイアウト コンポーネント セクションで詳しく説明します。
JavaScript プラグイン: Bootstrap には 12 を超えるカスタム jQuery プラグインが含まれています。すべてのプラグインを直接含めることも、個別に含めることもできます。これについては、ブートストラップ プラグイン セクションで詳しく説明します。
カスタマイズ: Bootstrap コンポーネント、LESS 変数、jQuery プラグインをカスタマイズして、独自のバージョンを取得できます。
Bootstrap をダウンロード
Bootstrap の最新バージョンは http://getbootstrap.com/ からダウンロードできます。このリンクをクリックすると、次のような Web ページが表示されます:
2 つのボタンが表示されます:
ブートストラップをダウンロード: ブートストラップをダウンロードします。このボタンをクリックすると、Bootstrap CSS、JavaScript、およびフォントのプリコンパイルされた圧縮バージョンをダウンロードできます。ドキュメントとオリジナルのソース コード ファイルは含まれません。 ソースをダウンロード: ソースコードをダウンロードします。このボタンをクリックすると、最新の Bootstrap LESS および JavaScript ソース コードを直接入手できます。
必要な js および css ファイルを導入します
<!-- 新 Bootstrap 核心 CSS 文件 --><link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"><!-- 可选的Bootstrap主题文件（一般不使用） --><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"></script><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
ログイン後にコピー
注: Jquey ファイルは bootstrap.min.js の前に導入する必要があります
最初の例、Hello World
<!DOCTYPE html><html><head> <title>在线尝试 Bootstrap 实例</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script></head><body> <h1>Hello, world!</h1></body></html>
ログイン後にコピー
ブートストラップ ブラウザ/デバイスsupport
Bootstrap は、最新のデスクトップ システムやモバイル ブラウザーで適切に動作します。
古いブラウザではうまくサポートされていない可能性があります。
次の表は、Bootstrap でサポートされているブラウザとプラットフォームの最新バージョンを示しています:
ChromeChrome Firefox Firefox IIE OperaOpera Safari Safari
| Android | | YES YES | YES 該当なし | いいえ | 該当しません |
| iOS | YES | 該当なし | 該当なし | NO | YES |
| Mac OS 該当 | YESはい | | | Windows | はい |
はい | YES* YES | NO | | * Bootstrap は、IE ブラウザの Internet Explorer 8 以降のバージョンをサポートします。 | | Bootstrap テーブル | Bootstrap は、テーブルを作成するための明確なレイアウトを提供します。次の表に、Bootstrap でサポートされているいくつかのテーブル要素を示します。
タグの説明
基本スタイルをテーブルに追加します。
| テーブルのヘッダー行のコンテナ要素 ( |
)。テーブルの列を識別するために使用されます。 | |
| テーブル本体内のテーブル行のコンテナ要素 ( |
)。 | |
|
| 単一の行に表示される表セルのグループのコンテナ要素 ( | または | )。 | |
| | デフォルトのテーブルセル。 | |
| 列または行を識別するために使用される特別なテーブル セル (範囲と位置に応じて)。 内で使用する必要があります。 | | | テーブル ストレージの内容の説明または概要。 | | 表格类 下表样式可用于表格中： 类 描述 | .table | 为任意 添加基本样式 (只有横向分隔线) | .table-striped | 在 | 内添加斑马线形式的条纹 ( IE8 不支持) | .table-bordered | 为所有表格的单元格添加边框 | | .table-hover | 在 | 内的任一行启用鼠标悬停状态 | .table-condensed | 让表格更加紧凑 | | 联合使用所有表格类 | , | 和 | 类 下表的类可用于表格的行或者单元格： 类 描述 | .active | 将悬停的颜色应用在行或者单元格上 | | .success | 表示成功的操作 | | .info | 表示信息变化的操作 | | .warning | 表示一个警告的操作 | | .danger | 表示一个危险的操作 | 基本的表格 如果您想要一个只带有内边距（padding）和水平分割的基本表，请添加 class .table，如下面实例所示： <!DOCTYPE html><html><head> <title>Bootstrap 实例 - 基本的表格</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script></head><body><table class="table"> <caption>基本的表格布局</caption> <thead> <tr> <th>名称</th> <th>城市</th> </tr> </thead> <tbody> <tr> <td>Tanmay</td> <td>Bangalore</td> </tr> <tr> <td>Sachin</td> <td>Mumbai</td> </tr> </tbody></table></body></html> ログイン後にコピー 结果如下 上下文类 下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。 类类 描述描述描述 | .active | 对某一特定的行或单元格应用悬停颜色 | | .success | 表示一个成功的或积极的动作 | | .warning | 表示一个需要注意的警告 | | .danger | 表示一个危险的或潜在的负面动作 | 这些类可被应用到 | 、| 或 | 。 <!DOCTYPE html><html><head> <title>Bootstrap 实例 - 上下文类</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script></head><body><table class="table"> <caption>上下文表格布局</caption> <thead> <tr> <th>产品</th> <th>付款日期</th> <th>状态</th> </tr> </thead> <tbody> <tr class="active"> <td>产品1</td> <td>23/11/2013</td> <td>待发货</td> </tr> <tr class="success"> <td>产品2</td> <td>10/11/2013</td> <td>发货中</td> </tr> <tr class="warning"> <td>产品3</td> <td>20/10/2013</td> <td>待确认</td> </tr> <tr class="danger"> <td>产品4</td> <td>20/10/2013</td> <td>已退货</td> </tr> </tbody></table></body></html> ログイン後にコピー 结果如下图所示: 响应式表格 通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。 <!DOCTYPE html><html><head> <title>Bootstrap 实例 - 响应式表格</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script></head><body><div class="table-responsive"> <table class="table"> <caption>响应式表格布局</caption> <thead> <tr> <th>产品</th> <th>付款日期</th> <th>状态</th> </tr> </thead> <tbody> <tr> <td>产品1</td> <td>23/11/2013</td> <td>待发货</td> </tr> <tr> <td>产品2</td> <td>10/11/2013</td> <td>发货中</td> </tr> <tr> <td>产品3</td> <td>20/10/2013</td> <td>待确认</td> </tr> <tr> <td>产品4</td> <td>20/10/2013</td> <td>已退货</td> </tr> </tbody> </table></div> </body></html> ログイン後にコピー 结果如下： 按钮、在页面插入代码可看： 致谢：感谢您的阅读！
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
See all articles
|
| |
