bootstrap基础
生活随笔
收集整理的這篇文章主要介紹了
bootstrap基础
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、bootstrap模板
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><!-- y以最高的ie瀏覽器渲染 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 視口設置 移動設備優先 支持移動端 在多個設備上適應 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ --><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 元素和媒體查詢（media queries）功能 --><!-- 警告：通過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 --><!-- 在ie9以下的版本時要打開以下代碼 --><!--[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 插件都依賴 jQuery，所以必須放在前邊) --><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></body> </html> View Code二、響應適應
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><!-- 使用媒體查詢 必須使用@media 必須做以下操作 --><meta name="viewport" content="width=device-width, initial-scale=1"><title>響應適應</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三、柵格系統介紹
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><!-- y以最高的ie瀏覽器渲染 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 視口設置 移動設備優先 支持移動端 在多個設備上適應 --><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提供的系統類 --><!-- 固定寬度容器：.container 100%寬度容器：.container-fluid一個頁面中，這兩種容器不能互相嵌套使用--><div class="container"><h1>柵格系統</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">春眠不覺曉</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 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"><!-- 視口設置 移動設備優先 支持移動端 在多個設備上適應 --><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樣式默認每塊區域會有padding-left=15px 和padding-right=15px的空白區域 --><div class="row"><div class="col-md-4"><h1>h1標題</h1><h2>h2標題</h2><h3>h3標題</h3><h4>h4標題</h4><h5>h5標題</h5><h6>h6標題</h6><!-- 添加.lead 可以使內容突出顯示 --><p><span class="lead">頁面</span>主體用p標簽</p><!-- 高亮顯示 --><p><mark>頁面</mark>主體用p標簽</p><!-- 被刪除的文本 --><del>刪除的文本</del><!-- 無用文本<s></s> --><p><s>這是一個無用的文本</s></p><!-- 插入文本<ins> --><p><ins>這是一個插入的文本</ins></p><!-- 帶下劃線文本 <u> --><p><u>這是一個帶下劃線的文本</u></p></div><div class="col-md-4"><p class="text-left">左對齊</p><p class="text-center">居中</p><p class="text-right">右對齊</p><p class="text-justify">根據文本長度，自動換行ddddddddddddddddddddddddddddddadadasaadsadsa</p><p class="text-nowrap">不管多長都不換行ddddddddddddddddddddddddasdasdadadaaaaaa</p></div><div class="col-md-4"><!-- 給table標簽添加一個.table類 --><!-- 可以給tbody的每一行添加條紋：.table-striped類 --><!-- 邊框：.table-bordered類 --><!-- 懸停：.table-hover --><!-- 狀態類：.active.success.info.warning.danger給每一行添加這個狀態類之后使得每一行以不同的顏色顯示出來--><!-- 在table外面再加一層.table-responsive類，是表格變為響應式的表格 --><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"><!-- 狀態類：.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"><!-- 視口設置 移動設備優先 支持移動端 在多個設備上適應 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ --><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">用戶名</label><input type="email" class="form-control" id="username" placeholder="用戶名"></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><!-- 可以通過類設置不同的按鈕樣式：.btn-default :默認樣式.btn-primary:首選樣式.btn-success 成功.btn-info 一般信息.btn-warning 警告.btn-danger 危險.btn-link 鏈接可以設置按鈕尺寸：不設置時為默認大小.btn-lg 大.btn-sm 小.btn-xs 超小--><button type="submit" class="btn btn-info">注冊</button><button type="submit" class="btn btn-success">登錄</button><button type="submit" class="btn btn-link">登錄</button><!-- 設置按鈕大小 --><button type="submit" class="btn btn-danger btn-sm">登錄</button><!-- 通過給按鈕添加 .btn-block 類可以將其拉伸至父元素100%的寬度，而且按鈕也變為了塊級（block）元素。 --><button type="submit" class="btn btn-warning btn-block">登錄</button><!-- 給按鈕添加.active類 --><button type="button" class="btn btn-primary btn-lg active">Primary button</button><!-- 可以為基于 <a> 元素創建的按鈕添加 .active 類。 --><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 類可使其內容左對齊并且表現為 inline-block 級別的控件。只適用于視口（viewport）至少在 768px 寬度時（視口寬度再小的話就會使表單折疊）。 --><form class="form-inline"><div class="form-group"><!-- sr-only --><label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label><div class="input-group"><!-- 組件的使用：用一個span標簽，給它加上一個組件類就可以了 --><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 ：響應式圖片，圖片大小自適應視口 --><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"><!-- 視口設置 移動設備優先 支持移動端 在多個設備上適應 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ --><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;"><!-- 導航：要獨立于.container類之上 --><!-- 添加 .navbar-fixed-top 類可以讓導航條固定在頂部 --><!-- 這個固定的導航條會遮住頁面上的其它內容，除非你給 <body> 元素底部設置了 padding。 --><!-- 通過添加 .navbar-inverse 類可以改變導航條的外觀。 --><!-- 可以自定義一個類,如.navColor，設置導航條顏色 --><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="#">首頁 <span class="sr-only">(current)</span></a></li><li><a href="#">附頁</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="#">注冊</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"><!-- 面板標題 --><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">各種顏色進度條</h3></div><div class="panel-body"><!-- 進度條 --><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">動畫效果進度條</h3></div><div class="panel-body"><!-- 進度條 --><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 插件都依賴 jQuery，所以必須放在前邊) --><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 --><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"><!-- 視口設置 移動設備優先 支持移動端 在多個設備上適應 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ --><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"><!-- 模態框 --><!-- Button trigger modal --><!-- 自定義一個按鈕用js實現模態框 --><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">你確定要刪除嗎</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 插件都依賴 jQuery，所以必須放在前邊) --><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></body><script type="text/javascript">//自定義觸發模態框 $(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"><!-- 視口設置 移動設備優先 支持移動端 在多個設備上適應 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ --><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（手風琴樣式） --><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">數碼</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="#">個人家電</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="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="#">各地特產</a></p><p><a href="#">茗茶沖飲</a></p><p><a href="#">休閑零食</a></p><p><a href="#">各類堅果</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="#">運動包</a></p><p><a href="#">各類小包</a></p></div></div></div></div></div></div></div><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) --><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 --><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"><!-- 視口設置 移動設備優先 支持移動端 在多個設備上適應 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ --><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 插件都依賴 jQuery，所以必須放在前邊) --><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 --><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"><!-- 視口設置 移動設備優先 支持移動端 在多個設備上適應 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ --><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">切換導航</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 是一個由蘋果公司開發和發布的手機操作系統。最初是于 2007 年首次發布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它們共享 Darwin 基礎。OS X 操作系統是用在蘋果電腦上，iOS 是蘋果的移動版本。</p><h4 id="svn">SVN</h4><p>Apache Subversion，通常縮寫為 SVN，是一款開源的版本控制系統軟件。Subversion 由 CollabNet 公司在 2000 年創建。但是現在它已經發展為 Apache Software Foundation 的一個項目，因此擁有豐富的開發人員和用戶社區。</p><h4 id="jmeter">jMeter</h4><p>jMeter 是一款開源的測試軟件。它是 100% 純 Java 應用程序，用于負載和性能測試。</p><h4 id="ejb">EJB</h4><p>Enterprise Java Beans（EJB）是一個創建高度可擴展性和強大企業級應用程序的開發架構，部署在兼容應用程序服務器（比如 JBOSS、Web Logic 等）的 J2EE 上。</p><h4 id="spring">Spring</h4><p>Spring 框架是一個開源的 Java 平臺，為快速開發功能強大的 Java 應用程序提供了完備的基礎設施支持。</p><p>Spring 框架最初是由 Rod Johnson 編寫的，在 2003 年 6 月首次發布于 Apache 2.0 許可證下。</p></div><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) --><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></body> </html> View Code?
轉載于:https://www.cnblogs.com/yanlin-10/p/9315534.html
總結
以上是生活随笔為你收集整理的bootstrap基础的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 玻璃纤维网格布属于重点发展领域吗
- 下一篇： 林产化学产品制造在职业病危害因素性质属于