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).コンポーネントに関する注意事項
ボタン クラスは 要素と
(2). リンクをボタンとして使用する場合の注意事項
(3)。クロスブラウザ表示
。私たちが要約したベスト プラクティスは次のとおりです。 さまざまなブラウザで一致する描画効果を得るために、可能な限り
さらに、Firefox バージョン 30 未満でも、 要素に基づいて作成されたボタンの line-height 属性を設定できず、結果として Firefox ブラウザが維持できないバグも発見されました。他のボタンと同じ高さです。
2. 事前定義されたスタイル
//一般信息 <button class="btn btn-info">Button</button>
スタイルの説明
btn-default デフォルト スタイル
btn-success 成功スタイル
btn-info 一般情報スタイル
btn-warning 警告スタイル
btn-danger 危険なスタイル
btn-主な好みのスタイル
btn-link リンク スタイル
3. サイズ
//从大到小的尺寸 <button class="btn btn-lg">Button</button> <button class="btn">Button</button> <button class="btn btn-sm">Button</button> <button class="btn btn-xs">Button</button>
4. ブロックレベルのボタン
//块级换行 <button class="btn btn-block">Button</button> <button class="btn btn-block">Button</button>
5.アクティベーションステータス
//激活按钮 <button class="btn active">Button</button>
6. 無効ステータス
//禁用按钮 <button class="btn active disabled">Button</button>
上記は編集者が紹介したBootstrapのテーブルとボタンの機能です。ご参考になれば幸いです。
JavaScriptのデータ型：ブラウザとNodejsに違いはありますか？May 14, 2025 am 12:15 AMJavaScriptコアデータ型は、ブラウザとnode.jsで一貫していますが、余分なタイプとは異なる方法で処理されます。 1）グローバルオブジェクトはブラウザのウィンドウであり、node.jsのグローバルです2）バイナリデータの処理に使用されるNode.jsの一意のバッファオブジェクト。 3）パフォーマンスと時間の処理にも違いがあり、環境に従ってコードを調整する必要があります。
JavaScriptコメント：//および / * *を使用するためのガイドMay 13, 2025 pm 03:49 PMjavascriptusestwotypesofcomments：シングルライン（//）およびマルチライン（//）
Python vs. JavaScript：開発者の比較分析May 09, 2025 am 12:22 AMPythonとJavaScriptの主な違いは、タイプシステムとアプリケーションシナリオです。 1。Pythonは、科学的コンピューティングとデータ分析に適した動的タイプを使用します。 2。JavaScriptは弱いタイプを採用し、フロントエンドとフルスタックの開発で広く使用されています。この2つは、非同期プログラミングとパフォーマンスの最適化に独自の利点があり、選択する際にプロジェクトの要件に従って決定する必要があります。
Python vs. JavaScript：ジョブに適したツールを選択するMay 08, 2025 am 12:10 AMPythonまたはJavaScriptを選択するかどうかは、プロジェクトの種類によって異なります。1）データサイエンスおよび自動化タスクのPythonを選択します。 2）フロントエンドとフルスタック開発のためにJavaScriptを選択します。 Pythonは、データ処理と自動化における強力なライブラリに好まれていますが、JavaScriptはWebインタラクションとフルスタック開発の利点に不可欠です。
PythonとJavaScript：それぞれの強みを理解するMay 06, 2025 am 12:15 AMPythonとJavaScriptにはそれぞれ独自の利点があり、選択はプロジェクトのニーズと個人的な好みに依存します。 1. Pythonは、データサイエンスやバックエンド開発に適した簡潔な構文を備えた学習が簡単ですが、実行速度が遅くなっています。 2。JavaScriptはフロントエンド開発のいたるところにあり、強力な非同期プログラミング機能を備えています。 node.jsはフルスタックの開発に適していますが、構文は複雑でエラーが発生しやすい場合があります。
JavaScriptのコア：CまたはCの上に構築されていますか？May 05, 2025 am 12:07 AMjavascriptisnotbuiltoncorc;それは、解釈されていることを解釈しました。
JavaScriptアプリケーション：フロントエンドからバックエンドまでMay 04, 2025 am 12:12 AMJavaScriptは、フロントエンドおよびバックエンド開発に使用できます。フロントエンドは、DOM操作を介してユーザーエクスペリエンスを強化し、バックエンドはnode.jsを介してサーバータスクを処理することを処理します。 1.フロントエンドの例：Webページテキストのコンテンツを変更します。 2。バックエンドの例：node.jsサーバーを作成します。
Python vs. Javascript：どの言語を学ぶべきですか？May 03, 2025 am 12:10 AMPythonまたはJavaScriptの選択は、キャリア開発、学習曲線、エコシステムに基づいている必要があります。1）キャリア開発：Pythonはデータサイエンスとバックエンド開発に適していますが、JavaScriptはフロントエンドおよびフルスタック開発に適しています。 2）学習曲線：Python構文は簡潔で初心者に適しています。 JavaScriptの構文は柔軟です。 3）エコシステム：Pythonには豊富な科学コンピューティングライブラリがあり、JavaScriptには強力なフロントエンドフレームワークがあります。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
Dreamweaver Mac版
ビジュアル Web 開発ツール
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
