如需移除,請網站管理者移除.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <title>Bootstrap固定置頂及置底的範例</title> </head> <!-- 因為置頂會把內容蓋住，所以必須在body設定padding-top的寬度--> <!-- navbar-fixed-top預約會佔用50px的空間 --> <body style="padding-top:70px;"> <!-- Bootstrap需要使用jQuery，所以第一個引入 --> <script src="js/jquery-2.1.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/onduty.js"></script> <script type="text/javascript" src="cordova.js"></script> <!-- 巡覽置頂，會固到頂部 --> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="row" style="padding:0px"> <a href="#" class="btn btn-default btn-lg btn-block" > 頂部 </a> </div> </div> </nav> <div class="container-fluid"> <div class="row"> <p> </p> </div> </div> <!-- 巡覽置底 --> <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"> <div class="container"> <div class="row" > <div class="col-xs-6" style="padding:0px" > <a href="#" class="btn btn-default btn-lg btn-block" > 設定 </a> </div> <div class="col-xs-6" style="padding:0px"> <a href="#" class="btn btn-default btn-lg btn-block"> 說明 </a> </div> </div> <div class="row" > <div class="col-xs-6" style="padding:0px" > <a href="#" class="btn btn-default btn-lg btn-block" > 設定2 </a> </div> <div class="col-xs-6" style="padding:0px"> <a href="#" class="btn btn-default btn-lg btn-block"> 說明2 </a> </div> </div> </div> </nav> </body> </html>
回覆
