この記事では、Bootstrap フレームワークの詳細な説明 (コード例) を紹介します。必要な方は参考にしてください。
(無料コースの推奨: bootstrap チュートリアル)
Bootstrap の概要
Bootstrap は Twitter のオープンソース HTML- 、CSS、JavaScript ベースのフロントエンド フレームワーク。
これは、Web アプリケーションの迅速な開発のために設計されたフロントエンド ツールキットのセットです。
V3 バージョン以降はレスポンシブ レイアウトをサポートし、モバイル デバイスの優先順位に準拠します。
ブートストラップを使用する理由
Bootstrap が登場する前:
名前: 繰り返し、複雑、無意味 (名前を考えるのは難しい)
スタイル: 繰り返し、冗長、非標準, 不調和
ページ: 乱雑、不規則、不調和
Bootstrap使用後: 様々なネーミングが統一され、標準化されます。ページのスタイルが統一されており、絵も調和しています。
Bootstrap のダウンロード
公式アドレス: https://getbootstrap.com
中国語のアドレス: http://www.bootcss.com/
Bootstrap の V3 バージョンを使用しており、運用環境用に Bootstrap をダウンロードしました。
Bootstrap 環境の構築
ディレクトリ構造:
bootstrap-3.3.7-dist/ ├── css // CSS文件 │ ├── bootstrap-theme.css // Bootstrap主题样式文件 │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css // 主题相关样式压缩文件 │ ├── bootstrap-theme.min.css.map │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css // 核心CSS样式压缩文件 │ └── bootstrap.min.css.map ├── fonts // 字体文件 │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ ├── glyphicons-halflings-regular.woff │ └── glyphicons-halflings-regular.woff2 └── js // JS文件 ├── bootstrap.js ├── bootstrap.min.js // 核心JS压缩文件 └── npm.js
依存関係の処理
Bootstrap の一部のコンポーネントは jQuery に依存しているため、ブートストラップ関連コンポーネントが適切に実行されるように、対応するバージョンの jQuery ファイルを必ずダウンロードしてください。
Bootstrap グローバル スタイル
レイアウト、ボタン、テーブル、フォーム、画像などの一般的に使用される HTML 要素に対して、Bootstrap はグローバル スタイルを提供します。
基本的な HTML 要素にクラスを設定することでブートストラップ スタイルを適用でき、それによってページをより美しく調和のとれたものにすることができます。
#タイトル関連
タイトル<h1 id="一级标题-px">一级标题36px</h1> <h2 id="二级标题-px">二级标题30px</h2> <h3 id="三级标题-px">三级标题24px</h3> <h4 id="四级标题-px">四级标题18px</h4> <h5 id="五级标题-px">五级标题14px</h5> <h6 id="六级标题-px">六级标题12px</h6> <!--除了使用h标签,Bootstrap内置了相应的全局样式--> <!--内联标签应用标题样式--> <span class="h1">一级标题36px</span> <span class="h2">二级标题30px</span> <span class="h3">三级标题24px</span> <span class="h4">四级标题18px</span> <span class="h5">五级标题14px</span> <span class="h6">六级标题12px</span>サブタイトル
<!--一级标题中嵌入小标题--> <h1 id="一级标题-small-小标题-small">一级标题<small>小标题</small></h1>
##テキストの配置
<!--文本对齐--> <p class="text-left">文本左对齐</p> <p class="text-center">文本居中</p> <p class="text-right">文本右对齐</p>##Text Case
<!--大小写--> <p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p>
テーブル
##クラス
.table-bordered | |
.table-hover | |
.table-condensed | |
#.table-sensitive | #レスポンシブ テーブル|
クラス
説明.active | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| .success|||||||||||||||
#.info |
#一般的なプロンプト メッセージまたはアクションを識別します | ||||||||||||||
.warning |
#警告を特定するか、ユーザーの注意を必要とします | ||||||||||||||
.danger | # #危険を特定しますまたは潜在的に否定的な行動|||||||||||||||
名称 | 可选值 | 默认值 | 描述 |
---|---|---|---|
backdrop | true/false/'static' | true | false表示有没有遮罩层,'static'表示点击遮罩层不关闭模态框 |
keyboard | true/false | true | 键盘上的 esc 键被按下时关闭模态框。 |
show | true/false | true | 模态框初始化之后就立即显示出来。 |
方法:
$('#myModal').modal({ keyboard: false })
轮播图
HTML代码:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="/static/imghwm/default1.png" data-src="..." class="lazy" alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="/static/imghwm/default1.png" data-src="..." class="lazy" alt="..."> <div class="carousel-caption"> ... </div> </div> ... </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
可以在为图片添加介绍信息:
<div class="item"> <img src="/static/imghwm/default1.png" data-src="..." class="lazy" alt="..."> <div class="carousel-caption"> <h3 id="">...</h3> <p>...</p> </div> </div>
方法:
设置切换间隔为2秒,默认是5秒。
$('.carousel').carousel({ interval: 2000 })
其他常用插件
FontAwesome字体
Font Awesome
参考网址 : https://fontawesome.com/?from=io
详细用法参见上述站点的Examples。
SweetAlert系列
SweetAlert
参考网址 : https://github.com/t4t5/sweetalert
SweetAlert2
参考网址 : https://github.com/sweetalert2/sweetalert2
SweetAlert 到 SweetAlert2 升级指南
参考网址 : https://github.com/sweetalert2/sweetalert2/wiki/Migration-from-SweetAlert-to-SweetAlert2
示例:
基本使用:
swal("标题","内容","success);
使用SweetAlert在Ajax提交成功(done)或失败(error)时分别提示不用的内容。
这是更新之前版本的写法
function deleteRecord(recordID) { swal({ title: "确定要删除这个产品吗?", text: "删除后可就无法恢复了。", type: "warning", showCancelButton: true, closeOnConfirm: false, confirmButtonText: "是的,我要删除!", confirmButtonColor: "#ec6c62", cancelButtonText: "容我三思" }, function (isConfirm) { if (!isConfirm) return; $.ajax({ type: "post", url: "/delete/", data: {"id": recordID}, success: function (data) { var dataObj = $.parseJSON(data); if (dataObj.status === 0) { //后端删除成功 swal("删除成功", dataObj.info, "success"); $("#p-" + recordID).remove() //删除页面中那一行数据 } else { swal("出错啦。。。", dataObj.msg, "error"); //后端删除失败 } }, error: function () { // ajax请求失败 swal("啊哦。。。", "服务器走丢了。。。", "error"); } }) }); }
更新之后用这么写
swal({ title: "这里写标题", text: "这里放内容", icon: "warning", // 这里放图标的类型(success,warning,info,error) buttons: { cancel: { text: "容我三思", visible: true, value: false }, confirm: { text: "我就是要删除" } } }).then(function (isConfirm) { if (isConfirm){ swal("你死定了", {button: "确认"}); }
Toastr通知
toastr["success"]("你已经成功被绿!")
jQueryLazyload懒加载
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>懒加载示例</title> </head> <body> <div> <div><img src="/static/imghwm/default1.png" data-src="img/0.jpg" class="lazy" alt="" data-original="img/5.jpg" style="max-width:90%" height="400px"></div> ... <div><img src="/static/imghwm/default1.png" data-src="img/0.jpg" class="lazy" alt="" data-original="img/6.jpg" style="max-width:90%" height="400px"></div> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="jquery.lazyload.min.js"></script> <script> $("img.lazy").lazyload({ effect: "fadeIn", event: "click" }) </script> </body> </html>
以上がBootstrapフレームワークの詳細説明(コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

単純なJavaScript関数は、日付が有効かどうかを確認するために使用されます。 関数isvaliddate(s){ var bits = s.split( '/'); var d = new Date(bits [2] '/' bits [1] '/'ビット[0]); return !!(d &&(d.getmonth()1)== bits [1] && d.getdate()== number(bits [0])); } //テスト var

この記事では、jQueryを使用して、DOM要素の内側のマージン値とマージン値、特に外側の縁と要素の内側の縁の特定の位置を取得して設定する方法について説明します。 CSSを使用して要素の内側と外側の縁を設定することは可能ですが、正確な値を取得するのは難しい場合があります。 // 設定 $( "div.header")。css( "margin"、 "10px"); $( "div.header")。css( "padding"、 "10px"); このコードはそうだと思うかもしれません

この記事では、10個の例外的なjQueryタブとアコーディオンについて説明します。 タブとアコーディオンの重要な違いは、コンテンツパネルの表示方法と非表示にあります。これらの10の例を掘り下げましょう。 関連記事:10 jQueryタブプラグイン

ウェブサイトのダイナミズムと視覚的な魅力を高めるために、10の例外的なjQueryプラグインを発見してください!このキュレーションされたコレクションは、画像アニメーションからインタラクティブなギャラリーまで、多様な機能を提供します。これらの強力なツールを探りましょう。 関連投稿: 1

HTTP-Consoleは、HTTPコマンドを実行するためのコマンドラインインターフェイスを提供するノードモジュールです。 Webサーバー、Web Servに対して作成されているかどうかに関係なく、HTTPリクエストで何が起こっているかをデバッグして正確に確認するのに最適です

このチュートリアルでは、カスタムGoogle検索APIをブログまたはWebサイトに統合する方法を示し、標準のWordPressテーマ検索関数よりも洗練された検索エクスペリエンスを提供します。 驚くほど簡単です!検索をyに制限することができます

次のjQueryコードスニペットを使用して、Divコンテンツがコンテナ要素領域を超えたときにスクロールバーを追加できます。 (デモンストレーションはありません、それを直接firebugにコピーしてください) // d =ドキュメント // w =ウィンドウ // $ = jQuery var contentarea = $(this)、 wintop = contentarea.scrolltop()、 docheight = $(d).height()、 winheight = $(w).height()、 divheight = $( '#c


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター

Dreamweaver Mac版
ビジュアル Web 開発ツール

PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
