bootstrap基础
生活随笔
收集整理的這篇文章主要介紹了
bootstrap基础
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一、bootstrap模板
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><!-- y以最高的ie瀏覽器渲染 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 視口設(shè)置 移動(dòng)設(shè)備優(yōu)先 支持移動(dòng)端 在多個(gè)設(shè)備上適應(yīng) --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ --><title>Bootstrap 101 Template</title><!-- Bootstrap --><!-- <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> --><!-- 引入樣式 --><link rel="stylesheet" type="text/css" href="bootstrap37/css/bootstrap.min.css"><!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢(xún)（media queries）功能 --><!-- 警告：通過(guò) file:// 協(xié)議（就是直接將 html 頁(yè)面拖拽到瀏覽器中）訪問(wèn)頁(yè)面時(shí) Respond.js 不起作用 --><!-- 在ie9以下的版本時(shí)要打開(kāi)以下代碼 --><!--[if lt IE 9]><script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script><script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]--></head><body><h1>你好，世界！</h1><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴(lài) jQuery，所以必須放在前邊) --><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個(gè)插件。 --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></body> </html> View Code二、響應(yīng)適應(yīng)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><!-- 使用媒體查詢(xún) 必須使用@media 必須做以下操作 --><meta name="viewport" content="width=device-width, initial-scale=1"><title>響應(yīng)適應(yīng)</title><style type="text/css">*{padding:0;margin:0;}/*大于900px*/@media screen and (min-width:900px) {/* CSS 代碼 */.box{width: 200px;height: 200px;background: yellow;}} /*700px-900px之間顯示的樣式 */@media screen and (min-width:700px) and (max-width:900px) {/* CSS 代碼 */.box{width: 200px;height: 200px;background: blue;}} /*小于700px*/@media screen and (max-width:700px) {/* CSS 代碼 */.box{width: 200px;height: 200px;background: green;}} </style> </head> <body><div class="box">hhh</div> </body> </html> View Code三、柵格系統(tǒng)介紹
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><!-- y以最高的ie瀏覽器渲染 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 視口設(shè)置 移動(dòng)設(shè)備優(yōu)先 支持移動(dòng)端 在多個(gè)設(shè)備上適應(yīng) --><meta name="viewport" content="width=device-width, initial-scale=1"><title>柵格</title><!-- 引入樣式 --><link rel="stylesheet" type="text/css" href="bootstrap37/css/bootstrap.min.css"><style type="text/css">[class^="col"]{background-color: pink;border: 1px solid;text-align: center;}</style></head><body><!-- 注意：不要隨意修改bootstrap提供的系統(tǒng)類(lèi) --><!-- 固定寬度容器：.container 100%寬度容器：.container-fluid一個(gè)頁(yè)面中，這兩種容器不能互相嵌套使用--><div class="container"><h1>柵格系統(tǒng)</h1><!-- 一行 12列--><!-- col-lg-：大屏幕col-md-：中等屏幕col-sm-：小屏幕col-xs-：超小屏幕--><div class="row"><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">春眠不覺(jué)曉</div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">處處聞啼鳥(niǎo)</div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">夜來(lái)風(fēng)雨聲</div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">花落知多少</div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">抽刀斷水水更流</div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">舉杯消愁愁更愁</div></div></div></body> </html> View Code四、全局css樣式
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><!-- y以最高的ie瀏覽器渲染 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 視口設(shè)置 移動(dòng)設(shè)備優(yōu)先 支持移動(dòng)端 在多個(gè)設(shè)備上適應(yīng) --><meta name="viewport" content="width=device-width, initial-scale=1"><title>全局css樣式</title><!-- 引入樣式 --><link rel="stylesheet" type="text/css" href="bootstrap37/css/bootstrap.min.css"><style type="text/css">[class^="col"]{background-color: pink;border: 1px solid;text-align: center;}</style></head><body><div class="container"><h1>全局css樣式</h1><!-- 一行 12列--><!-- col-lg-：大屏幕col-md-：中等屏幕col-sm-：小屏幕col-xs-：超小屏幕--><!-- 全局css樣式默認(rèn)每塊區(qū)域會(huì)有padding-left=15px 和padding-right=15px的空白區(qū)域 --><div class="row"><div class="col-md-4"><h1>h1標(biāo)題</h1><h2>h2標(biāo)題</h2><h3>h3標(biāo)題</h3><h4>h4標(biāo)題</h4><h5>h5標(biāo)題</h5><h6>h6標(biāo)題</h6><!-- 添加.lead 可以使內(nèi)容突出顯示 --><p><span class="lead">頁(yè)面</span>主體用p標(biāo)簽</p><!-- 高亮顯示 --><p><mark>頁(yè)面</mark>主體用p標(biāo)簽</p><!-- 被刪除的文本 --><del>刪除的文本</del><!-- 無(wú)用文本<s></s> --><p><s>這是一個(gè)無(wú)用的文本</s></p><!-- 插入文本<ins> --><p><ins>這是一個(gè)插入的文本</ins></p><!-- 帶下劃線文本 <u> --><p><u>這是一個(gè)帶下劃線的文本</u></p></div><div class="col-md-4"><p class="text-left">左對(duì)齊</p><p class="text-center">居中</p><p class="text-right">右對(duì)齊</p><p class="text-justify">根據(jù)文本長(zhǎng)度，自動(dòng)換行ddddddddddddddddddddddddddddddadadasaadsadsa</p><p class="text-nowrap">不管多長(zhǎng)都不換行ddddddddddddddddddddddddasdasdadadaaaaaa</p></div><div class="col-md-4"><!-- 給table標(biāo)簽添加一個(gè).table類(lèi) --><!-- 可以給tbody的每一行添加條紋：.table-striped類(lèi) --><!-- 邊框：.table-bordered類(lèi) --><!-- 懸停：.table-hover --><!-- 狀態(tài)類(lèi)：.active.success.info.warning.danger給每一行添加這個(gè)狀態(tài)類(lèi)之后使得每一行以不同的顏色顯示出來(lái)--><!-- 在table外面再加一層.table-responsive類(lèi)，是表格變?yōu)轫憫?yīng)式的表格 --><div class="table-responsive"> <table class="table table-striped table-bordered table-hover"><thead><tr><th>#</th><th>姓名</th><th>年齡</th><th>身高</th></tr></thead><tbody><tr class="warning"><td>1</td><td>jack</td><td>23</td><td>180</td></tr><tr class="success"><td>2</td><td>nick</td><td>24</td><td>176</td></tr><tr class="info"><td>3</td><td>lucy</td><td>24</td><td>176</td></tr></tbody></table></div></div><div class="col-md-4"><!-- 狀態(tài)類(lèi)：.active.success.info.warning.danger--></div></div></div></body> </html> View Code <!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><!-- y以最高的ie瀏覽器渲染 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 視口設(shè)置 移動(dòng)設(shè)備優(yōu)先 支持移動(dòng)端 在多個(gè)設(shè)備上適應(yīng) --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ --><title>Bootstrap 101 Template</title><!-- 引入樣式 --><link rel="stylesheet" type="text/css" href="bootstrap37/css/bootstrap.min.css"></head><body><div class="container"><h1>css全局樣式</h1><div class="row"><div class="col-md-4"><form><!-- .sr-only：隱藏元素 --><div class="form-group"><label for="username">用戶(hù)名</label><input type="email" class="form-control" id="username" placeholder="用戶(hù)名"></div><div class="form-group"><label for="pwd">密碼</label><input type="password" class="form-control" id="pwd" placeholder=密碼"></div><div class="form-group"><label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile"><p class="help-block">Example block-level help text here.</p></div><div class="checkbox"><label><input type="checkbox"> Check me out</label></div><!-- 可以通過(guò)類(lèi)設(shè)置不同的按鈕樣式：.btn-default :默認(rèn)樣式.btn-primary:首選樣式.btn-success 成功.btn-info 一般信息.btn-warning 警告.btn-danger 危險(xiǎn).btn-link 鏈接可以設(shè)置按鈕尺寸：不設(shè)置時(shí)為默認(rèn)大小.btn-lg 大.btn-sm 小.btn-xs 超小--><button type="submit" class="btn btn-info">注冊(cè)</button><button type="submit" class="btn btn-success">登錄</button><button type="submit" class="btn btn-link">登錄</button><!-- 設(shè)置按鈕大小 --><button type="submit" class="btn btn-danger btn-sm">登錄</button><!-- 通過(guò)給按鈕添加 .btn-block 類(lèi)可以將其拉伸至父元素100%的寬度，而且按鈕也變?yōu)榱藟K級(jí)（block）元素。 --><button type="submit" class="btn btn-warning btn-block">登錄</button><!-- 給按鈕添加.active類(lèi) --><button type="button" class="btn btn-primary btn-lg active">Primary button</button><!-- 可以為基于 <a> 元素創(chuàng)建的按鈕添加 .active 類(lèi)。 --><a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a><a href="#" class="btn btn-default btn-lg active" role="button">Link</a><!-- 按鈕禁用 disabled--><button type="button" class="btn btn-lg btn-primary" disabled="disabled">禁用按鈕1</button><button type="button" class="btn btn-default btn-lg" disabled="disabled">禁用按鈕2</button></form></div><div class="col-md-6"><!-- 為 <form> 元素添加 .form-inline 類(lèi)可使其內(nèi)容左對(duì)齊并且表現(xiàn)為 inline-block 級(jí)別的控件。只適用于視口（viewport）至少在 768px 寬度時(shí)（視口寬度再小的話(huà)就會(huì)使表單折疊）。 --><form class="form-inline"><div class="form-group"><!-- sr-only --><label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label><div class="input-group"><!-- 組件的使用：用一個(gè)span標(biāo)簽，給它加上一個(gè)組件類(lèi)就可以了 --><div class="input-group-addon"><span class="glyphicon glyphicon-chevron-right"></span></div><input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount"><div class="input-group-addon">.00</div></div></div><button type="submit" class="btn btn-primary">Transfer cash</button></form></div><div class="col-md-6"><!-- 圖片.img-responsive ：響應(yīng)式圖片，圖片大小自適應(yīng)視口 --><img src="imgs/1.jpg" class="img-responsive" alt="Responsive image"></div><!-- 圖片形狀：.img-rounded.img-circle.img-thumbnail--><div class="col-md-4"><img src="imgs/1.jpg" alt="..." class="img-rounded"><img src="imgs/1.jpg" alt="..." class="img-circle"><img src="imgs/1.jpg" alt="..." class="img-thumbnail"></div></div></div></body> </html> View Code五、bootstrap組件使用
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><!-- y以最高的ie瀏覽器渲染 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 視口設(shè)置 移動(dòng)設(shè)備優(yōu)先 支持移動(dòng)端 在多個(gè)設(shè)備上適應(yīng) --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ --><title>組件</title><!-- 引入樣式 --><link rel="stylesheet" type="text/css" href="bootstrap37/css/bootstrap.min.css"><style type="text/css">.navColor{background-color: rgba(0,0,0,0.7);}</style></head><body style="height: 2000px;padding-top: 70px;"><!-- 導(dǎo)航：要獨(dú)立于.container類(lèi)之上 --><!-- 添加 .navbar-fixed-top 類(lèi)可以讓導(dǎo)航條固定在頂部 --><!-- 這個(gè)固定的導(dǎo)航條會(huì)遮住頁(yè)面上的其它內(nèi)容，除非你給 <body> 元素底部設(shè)置了 padding。 --><!-- 通過(guò)添加 .navbar-inverse 類(lèi)可以改變導(dǎo)航條的外觀。 --><!-- 可以自定義一個(gè)類(lèi),如.navColor，設(shè)置導(dǎo)航條顏色 --><nav class="navbar navbar-default navbar-fixed-top navbar-inverse navColor"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">logo</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">首頁(yè) <span class="sr-only">(current)</span></a></li><li><a href="#">附頁(yè)</a></li></ul><form class="navbar-form navbar-right"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-success">搜索</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#">登錄</a></li><li><a href="#">注冊(cè)</a></li> </ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav><div class="container"><div class="row"><div class="col-md-4"><!-- 下拉菜單 --><div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown<span class="caret"></span></button><ul class="dropdown-menu" aria-labelledby="dropdownMenu1"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></div><div class="col-md-6"><!-- 面板 --><div class="panel panel-default"><div class="panel-heading"><!-- 面板標(biāo)題 --><h3 class="panel-title">按鈕式下拉菜單</h3></div><div class="panel-body"><!-- 按鈕式下拉菜單 --><div class="btn-group"><button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></div></div></div></div></div><div class="row"><div class="col-md-6"><div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title">各種顏色進(jìn)度條</h3></div><div class="panel-body"><!-- 進(jìn)度條 --><div class="progress"><div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"><span class="sr-only">40% Complete (success)</span></div></div><div class="progress"><div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"><span class="sr-only">20% Complete</span></div></div><div class="progress"><div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span class="sr-only">60% Complete (warning)</span></div></div><div class="progress"><div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"><span class="sr-only">80% Complete (danger)</span></div></div></div></div></div></div><div class="row"><div class="col-md-6"><div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title">動(dòng)畫(huà)效果進(jìn)度條</h3></div><div class="panel-body"><!-- 進(jìn)度條 --><div class="progress"><div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div></div></div></div></div></div></div><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴(lài) jQuery，所以必須放在前邊) --><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個(gè)插件。 --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></body> </html> View Code六、插件
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><!-- y以最高的ie瀏覽器渲染 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 視口設(shè)置 移動(dòng)設(shè)備優(yōu)先 支持移動(dòng)端 在多個(gè)設(shè)備上適應(yīng) --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ --><title>Bootstrap 插件</title><!-- 引入樣式 --><link rel="stylesheet" type="text/css" href="bootstrap37/css/bootstrap.min.css"></head><body><div class="container-fluid"><div class="row"><dir class="col-md-4"><!-- 模態(tài)框 --><!-- Button trigger modal --><!-- 自定義一個(gè)按鈕用js實(shí)現(xiàn)模態(tài)框 --><button type="button" class="btn btn-danger btn-lg" id="closeBtn" data-toggle="modal">刪除</button><!-- <button type="button" class="btn btn-danger btn-lg" data-toggle="modal" data-target="#myModal">刪除</button> --><!-- Modal --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="modal-title" id="myModalLabel">你確定要?jiǎng)h除嗎</h4></div><div class="modal-body">如果刪除，不可返回！</div><div class="modal-footer"><button type="button" class="btn btn-success" data-dismiss="modal">取消</button><button type="button" class="btn btn-primary">確定</button></div></div></div></div></dir></div></div><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴(lài) jQuery，所以必須放在前邊) --><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個(gè)插件。 --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></body><script type="text/javascript">//自定義觸發(fā)模態(tài)框 $(function(){$("#closeBtn").click(function(){$('#myModal').modal({keyboard: false})})})</script> </html> View Code <!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><!-- y以最高的ie瀏覽器渲染 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 視口設(shè)置 移動(dòng)設(shè)備優(yōu)先 支持移動(dòng)端 在多個(gè)設(shè)備上適應(yīng) --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ --><title>Bootstrap 插件——collapse</title><!-- 引入樣式 --><link rel="stylesheet" type="text/css" href="bootstrap37/css/bootstrap.min.css"></head><body><div class="container-fluid"><div class="row"><div class="col-md-4"><!-- collapse（手風(fēng)琴樣式） --><div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"><div class="panel panel-default"><div class="panel-heading" role="tab" id="headingOne"><h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">數(shù)碼</a></h4></div><div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"><div class="panel-body"><p><a href="#">大家電</a></p><p><a href="#">生活家電</a></p><p><a href="#">個(gè)人家電</a></p><p><a href="#">休閑家電</a></p><p><a href="#">數(shù)碼配件</a></p></div></div></div><div class="panel panel-default"><div class="panel-heading" role="tab" id="headingTwo"><h4 class="panel-title"><a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">美食</a></h4></div><div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"><div class="panel-body"><p><a href="#">各地特產(chǎn)</a></p><p><a href="#">茗茶沖飲</a></p><p><a href="#">休閑零食</a></p><p><a href="#">各類(lèi)堅(jiān)果</a></p><p><a href="#">生鮮蔬果</a></p><p><a href="#">糧油米面</a></p></div></div></div><div class="panel panel-default"><div class="panel-heading" role="tab" id="headingThree"><h4 class="panel-title"><a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">箱包</a></h4></div><div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"><div class="panel-body"><p><a href="#">女包</a></p><p><a href="#">男包</a></p><p><a href="#">旅行包袋</a></p><p><a href="#">運(yùn)動(dòng)包</a></p><p><a href="#">各類(lèi)小包</a></p></div></div></div></div></div></div></div><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴(lài) jQuery，所以必須放在前邊) --><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個(gè)插件。 --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></body> </html> View Code七、輪播圖
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><!-- y以最高的ie瀏覽器渲染 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 視口設(shè)置 移動(dòng)設(shè)備優(yōu)先 支持移動(dòng)端 在多個(gè)設(shè)備上適應(yīng) --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ --><title>Bootstrap——carousel</title><link rel="stylesheet" type="text/css" href="bootstrap37/css/bootstrap.min.css"></head><body><div class="container"><div class="row"><div class="col-md-6"><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><li data-target="#carousel-example-generic" data-slide-to="3"></li><li data-target="#carousel-example-generic" data-slide-to="4"></li></ol><!-- Wrapper for slides --><div class="carousel-inner" role="listbox"><div class="item active"><img src="imgs/4.JPG" alt="..."></div><div class="item"><img src="imgs/5.JPG" alt="..."></div><div class="item"><img src="imgs/6.JPG" alt="..."></div><div class="item"><img src="imgs/7.JPG" alt="..."></div><div class="item"><img src="imgs/8.JPG" alt="..."></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></div></div><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴(lài) jQuery，所以必須放在前邊) --><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個(gè)插件。 --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></body> </html> View Code八、動(dòng)態(tài)監(jiān)聽(tīng)
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><!-- y以最高的ie瀏覽器渲染 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 視口設(shè)置 移動(dòng)設(shè)備優(yōu)先 支持移動(dòng)端 在多個(gè)設(shè)備上適應(yīng) --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ --><title>Bootstrap 101 Template</title><link rel="stylesheet" type="text/css" href="bootstrap37/css/bootstrap.min.css"></head><body><nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation"><div class="container-fluid"><div class="navbar-header"><button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy"><span class="sr-only">切換導(dǎo)航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">luffy</a></div><div class="collapse navbar-collapse bs-js-navbar-scrollspy"><ul class="nav navbar-nav"><li><a href="#ios">iOS</a></li><li><a href="#svn">SVN</a></li><li class="dropdown"><a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Java<b class="caret"></b></a><ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1"><li><a href="#jmeter" tabindex="-1">jmeter</a></li><li><a href="#ejb" tabindex="-1">ejb</a></li><li class="divider"></li><li><a href="#spring" tabindex="-1">spring</a></li></ul></li></ul></div></div> </nav> <div data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height:200px;overflow:auto; position: relative;"><h4 id="ios">iOS</h4><p>iOS 是一個(gè)由蘋(píng)果公司開(kāi)發(fā)和發(fā)布的手機(jī)操作系統(tǒng)。最初是于 2007 年首次發(fā)布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它們共享 Darwin 基礎(chǔ)。OS X 操作系統(tǒng)是用在蘋(píng)果電腦上，iOS 是蘋(píng)果的移動(dòng)版本。</p><h4 id="svn">SVN</h4><p>Apache Subversion，通常縮寫(xiě)為 SVN，是一款開(kāi)源的版本控制系統(tǒng)軟件。Subversion 由 CollabNet 公司在 2000 年創(chuàng)建。但是現(xiàn)在它已經(jīng)發(fā)展為 Apache Software Foundation 的一個(gè)項(xiàng)目，因此擁有豐富的開(kāi)發(fā)人員和用戶(hù)社區(qū)。</p><h4 id="jmeter">jMeter</h4><p>jMeter 是一款開(kāi)源的測(cè)試軟件。它是 100% 純 Java 應(yīng)用程序，用于負(fù)載和性能測(cè)試。</p><h4 id="ejb">EJB</h4><p>Enterprise Java Beans（EJB）是一個(gè)創(chuàng)建高度可擴(kuò)展性和強(qiáng)大企業(yè)級(jí)應(yīng)用程序的開(kāi)發(fā)架構(gòu)，部署在兼容應(yīng)用程序服務(wù)器（比如 JBOSS、Web Logic 等）的 J2EE 上。</p><h4 id="spring">Spring</h4><p>Spring 框架是一個(gè)開(kāi)源的 Java 平臺(tái)，為快速開(kāi)發(fā)功能強(qiáng)大的 Java 應(yīng)用程序提供了完備的基礎(chǔ)設(shè)施支持。</p><p>Spring 框架最初是由 Rod Johnson 編寫(xiě)的，在 2003 年 6 月首次發(fā)布于 Apache 2.0 許可證下。</p></div><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴(lài) jQuery，所以必須放在前邊) --><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個(gè)插件。 --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></body> </html> View Code?
轉(zhuǎn)載于:https://www.cnblogs.com/yanlin-10/p/9315534.html
總結(jié)
以上是生活随笔為你收集整理的bootstrap基础的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 玻璃纤维网格布属于重点发展领域吗
- 下一篇： 林产化学产品制造在职业病危害因素性质属于