ホームページ >ウェブフロントエンド >jsチュートリアル >Bootstrapフレームワークの詳細説明(コード例)
この記事では、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>一级标题36px</h1> <h2>二级标题30px</h2> <h3>三级标题24px</h3> <h4>四级标题18px</h4> <h5>五级标题14px</h5> <h6>六级标题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>一级标题<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="..." alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="..." 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="..." alt="..."> <div class="carousel-caption"> <h3>...</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="img/0.jpg" alt="" data-original="img/5.jpg" width="600px" height="400px"></div> ... <div><img src="img/0.jpg" alt="" data-original="img/6.jpg" width="600px" 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 サイトの他の関連記事を参照してください。