第 3 章: ブートストラップのテーブルとボタンの関数_JavaScript スキル-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

第 3 章: ブートストラップのテーブルとボタンの関数_JavaScript スキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:03 PM

Twitter の Bootstrap は、現在最も人気のあるフロントエンドフレームワークです。 Bootstrap は HTML、CSS、JAVASCRIPT に基づいており、シンプルかつ柔軟で、Web 開発を高速化します。

学習ポイント:

1.フォーム

2. ボタン

このレッスンでは、主に Bootstrap のテーブルとボタンの機能について学び、組み込みの CSS 定義を通じてさまざまなリッチな効果を表示します。

1.フォーム

Bootstrap は、開発者が使用できる豊富なテーブルスタイルをいくつか提供します。

1. 基本形式

//实现基本的表格样式
<table class="table">

ログイン後にコピー

注: Firebug を通じて対応する CSS を表示できます。

2. ストライプテーブル

//让<tbody>里的行产生一行隔一行加单色背景效果
<table class="table table-striped">

ログイン後にコピー

注: テーブル効果は、基本的な format.table に基づく必要があります

3. 枠付きのテーブル

//给表格增加边框
<table class="table table-bordered">

ログイン後にコピー

4. マウスを移動します

//让<tbody>下的表格悬停鼠标实现背景效果
<table class="table table-hover">

ログイン後にコピー

5. ステータスクラス

//可以单独设置每一行的背景样式
<tr class="success">

ログイン後にコピー

注: 合計 5 つの異なるスタイルが利用可能です。

スタイルの説明:

行またはセル上でアクティブなマウスオーバー
成功は成功または前向きな行動を識別します
info は、一般的なプロンプト情報またはアクションを識別します
警告標識は、ユーザーに警告または注意を必要とします
危険とは、危険な行為または潜在的にマイナスな行為を意味します

6. 特定の行を非表示にします

//隐藏行
<tr class="sr-only">

ログイン後にコピー

7. レスポンシブフォーム

//表格父元素设置响应式，小于 768px 出现边框
<body class="table-responsive">

ログイン後にコピー

2.ボタン

Bootstrap には、開発者が使用できる豊富なボタンが多数用意されています。

1. ボタンとして使用できるラベルまたは要素

//转化成普通按钮
<a href="###" class="btn btn-default">Link</a>
<button class="btn btn-default">Button</button>
<input type="button" class="btn btn-default" value="input">

ログイン後にコピー

注意すべき点が 3 つあります:

(1).コンポーネントに関する注意事項

ボタンクラスは要素と

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7388

Java チュートリアル

1630

CakePHP チュートリアル

1357

Laravel チュートリアル

1267

PHP チュートリアル

1216

Related knowledge

JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi

8見事なjQueryページレイアウトプラグイン Mar 06, 2025 am 12:48 AM

楽なWebページレイアウトのためにjQueryを活用する：8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます

独自のAjax Webアプリケーションを構築します Mar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

10 jQueryの楽しみとゲームプラグイン Mar 08, 2025 am 12:42 AM

10の楽しいjQueryゲームプラグインして、あなたのウェブサイトをより魅力的にし、ユーザーの粘着性を高めます！ Flashは依然としてカジュアルなWebゲームを開発するのに最適なソフトウェアですが、jQueryは驚くべき効果を生み出すこともできます。また、純粋なアクションフラッシュゲームに匹敵するものではありませんが、場合によってはブラウザで予期せぬ楽しみもできます。 jquery tic toeゲームゲームプログラミングの「Hello World」には、JQueryバージョンがあります。ソースコード jQueryクレイジーワードコンポジションゲームこれは空白のゲームであり、単語の文脈を知らないために奇妙な結果を生み出すことができます。ソースコード jquery鉱山の掃引ゲーム

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？ Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

jQuery Parallaxチュートリアル - アニメーションヘッダーの背景 Mar 08, 2025 am 12:39 AM

このチュートリアルでは、jQueryを使用して魅惑的な視差の背景効果を作成する方法を示しています。見事な視覚的な深さを作成するレイヤー画像を備えたヘッダーバナーを構築します。更新されたプラグインは、jQuery 1.6.4以降で動作します。ダウンロードしてください

Ajaxを使用して動的にボックスコンテンツをロードします Mar 06, 2025 am 01:07 AM

このチュートリアルでは、Ajaxを介してロードされた動的なページボックスの作成を示しており、フルページのリロードなしでインスタントリフレッシュを可能にします。 JQueryとJavaScriptを活用します。カスタムのFacebookスタイルのコンテンツボックスローダーと考えてください。重要な概念： ajaxとjquery