bootstrap--响应式框架页面环境配置
生活随笔
收集整理的這篇文章主要介紹了
bootstrap--响应式框架页面环境配置
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
那就目錄結構
頁面環境代碼：
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <!--默認編碼--> 5 <meta charset="utf-8"> 6 <!--如果是ie，那么就會調用ie最新的標準進行頁面的解析和渲染--> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 8 <!--移動端的viewport設置--> 9 <meta name="viewport" content="width=device-width, initial-scale=1"> 10 <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ --> 11 <title>標題</title> 12 13 <!-- Bootstrap 他的核心文件，如果想使用框架里面的組件必須引入這個文件--> 14 <link href="./lib/bootstrap/css/bootstrap.css" rel="stylesheet"> 15 16 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries 17 :IE8以及一下不支持html5及媒體查詢，引入下面的html5shiv.min.js文件可以讓其兼容同時由于它不支持響應式，所以引入下面的respond.min.js讓其能支持響應式--> 18 <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 19 <!--[if lt IE 9]> 20 <script src="./lib/html5shiv/html5shiv.min.js"></script> 21 <script src="./lib/respond/respond.js"></script> 22 <![endif]--> 23 </head> 24 <body> 25 26 <h1>你好，世界！</h1> 27 28 29 30 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 31 <!--引入jq文件--> 32 <script src="./lib/jquery/jquery.min.js"></script> 33 <!-- Include all compiled plugins (below), or include individual files as needed --> 34 <!--bootstrap核心的js文件，一定要引入--> 35 <script src="./lib/bootstrap/js/bootstrap.min.js"></script> 36 </body> 37 </html>測試：
添加一個響應式的導航條
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <!--默認編碼--> 5 <meta charset="utf-8"> 6 <!--如果是ie，那么就會調用ie最新的標準進行頁面的解析和渲染--> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 8 <!--移動端的viewport設置--> 9 <meta name="viewport" content="width=device-width, initial-scale=1"> 10 <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ --> 11 <title>標題</title> 12 13 <!-- Bootstrap 他的核心文件，如果想使用框架里面的組件必須引入這個文件--> 14 <link href="./lib/bootstrap/css/bootstrap.css" rel="stylesheet"> 15 16 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries 17 :IE8以及一下不支持html5及媒體查詢，引入下面的html5shiv.min.js文件可以讓其兼容同時由于它不支持響應式，所以引入下面的respond.min.js讓其能支持響應式--> 18 <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 19 <!--[if lt IE 9]> 20 <script src="./lib/html5shiv/html5shiv.min.js"></script> 21 <script src="./lib/respond/respond.js"></script> 22 <![endif]--> 23 </head> 24 <body> 25 26 <nav class="navbar navbar-default"> 27 <div class="container-fluid"> 28 <!-- Brand and toggle get grouped for better mobile display --> 29 <div class="navbar-header"> 30 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 31 <span class="sr-only">Toggle navigation</span> 32 <span class="icon-bar"></span> 33 <span class="icon-bar"></span> 34 <span class="icon-bar"></span> 35 </button> 36 <a class="navbar-brand" href="#">Brand</a> 37 </div> 38 39 <!-- Collect the nav links, forms, and other content for toggling --> 40 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 41 <ul class="nav navbar-nav"> 42 <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 43 <li><a href="#">Link</a></li> 44 <li class="dropdown"> 45 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 46 <ul class="dropdown-menu"> 47 <li><a href="#">Action</a></li> 48 <li><a href="#">Another action</a></li> 49 <li><a href="#">Something else here</a></li> 50 <li role="separator" class="divider"></li> 51 <li><a href="#">Separated link</a></li> 52 <li role="separator" class="divider"></li> 53 <li><a href="#">One more separated link</a></li> 54 </ul> 55 </li> 56 </ul> 57 <form class="navbar-form navbar-left"> 58 <div class="form-group"> 59 <input type="text" class="form-control" placeholder="Search"> 60 </div> 61 <button type="submit" class="btn btn-default">Submit</button> 62 </form> 63 <ul class="nav navbar-nav navbar-right"> 64 <li><a href="#">Link</a></li> 65 <li class="dropdown"> 66 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 67 <ul class="dropdown-menu"> 68 <li><a href="#">Action</a></li> 69 <li><a href="#">Another action</a></li> 70 <li><a href="#">Something else here</a></li> 71 <li role="separator" class="divider"></li> 72 <li><a href="#">Separated link</a></li> 73 </ul> 74 </li> 75 </ul> 76 </div><!-- /.navbar-collapse --> 77 </div><!-- /.container-fluid --> 78 </nav> 79 80 81 82 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 83 <!--引入jq文件--> 84 <script src="./lib/jquery/jquery.min.js"></script> 85 <!-- Include all compiled plugins (below), or include individual files as needed --> 86 <!--bootstrap核心的js文件，一定要引入--> 87 <script src="./lib/bootstrap/js/bootstrap.min.js"></script> 88 </body> 89 </html> View Code那就ok拉
?
轉載于:https://www.cnblogs.com/mrszhou/p/8288293.html
總結
以上是生活随笔為你收集整理的bootstrap--响应式框架页面环境配置的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： sublime提示There are n
- 下一篇： BZOJ2002: [Hnoi2010]