ホームページ >ウェブフロントエンド >htmlチュートリアル >ブートストラップ学習(1)_html/css_WEB-ITnose

ブートストラップ学習(1)_html/css_WEB-ITnose

WBOYオリジナル: 2016-06-24 11:34:56960ブラウズ

はじめに

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 YES YES YESWindowsはい Bootstrap テーブル Bootstrap は、テーブルを作成するための明確なレイアウトを提供します。次の表に、Bootstrap でサポートされているいくつかのテーブル要素を示します。

Android		YES	該当なし	いいえ	該当しません
iOS	YES	該当なし	該当なし	NO	YES
Mac OS 該当	はい				はい
YES* YES	NO		* Bootstrap は、IE ブラウザの Internet Explorer 8 以降のバージョンをサポートします。

タグの説明

f5d188ed2c074f8b944552db028f98a1

基本スタイルをテーブルに追加します。

ae20bdd317918ca68efdc799512a9b3992cee25da80fac49f6fb6eec5fd2c22aa34de1251f0d9fe1e645927f19a896e8b4d429308760b6c2d20d6300079ed38e 内で使用する必要があります。 63bd76834ec05ac1f4c0ebbeaafb0994

表格类

下表样式可用于表格中：

テーブルのヘッダー行のコンテナ要素 (a34de1251f0d9fe1e645927f19a896e8)。テーブルの列を識別するために使用されます。
テーブル本体内のテーブル行のコンテナ要素 (a34de1251f0d9fe1e645927f19a896e8)。
単一の行に表示される表セルのグループのコンテナ要素 (b6c5a531a458a2e790c1fd6421739d1c または b4d429308760b6c2d20d6300079ed38e)。

デフォルトのテーブルセル。
列または行を識別するために使用される特別なテーブルセル (範囲と位置に応じて)。

テーブルストレージの内容の説明または概要。

类描述

.table	为任意 f5d188ed2c074f8b944552db028f98a1 添加基本样式 (只有横向分隔线)
.table-striped	在 92cee25da80fac49f6fb6eec5fd2c22a 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered	为所有表格的单元格添加边框
.table-hover	在 92cee25da80fac49f6fb6eec5fd2c22a 内的任一行启用鼠标悬停状态
.table-condensed	让表格更加紧凑
联合使用所有表格类

a34de1251f0d9fe1e645927f19a896e8, b4d429308760b6c2d20d6300079ed38e 和 b6c5a531a458a2e790c1fd6421739d1c 类

下表的类可用于表格的行或者单元格：

类描述

.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	表示一个危险的或潜在的负面动作

这些类可被应用到 a34de1251f0d9fe1e645927f19a896e8、b6c5a531a458a2e790c1fd6421739d1c 或 b4d429308760b6c2d20d6300079ed38e。

<!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 までご連絡ください。

前の記事：Javaweb サーブレットの完全な solution_html/css_WEB-ITnose次の記事：Javaweb サーブレットの完全な solution_html/css_WEB-ITnose

続きを見る