Bootstrap是一個流行的前端框架,它提供了許多CSS和JavaScript組件,可以快速構建優美的響應式網站。同時,Bootstrap依賴于jQuery庫。jQuery是一個快速、小巧、功能強大的JavaScript庫,為處理HTML文檔遍歷和操作、事件處理、動畫效果、AJAX等方面提供了簡單易用的API接口。
Bootstrap和jQuery的結合,為開發人員提供了更方便的工具,可用于快速構建復雜的用戶界面。下面是一個簡單的Bootstrap和jQuery的示例:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap and jQuery Example</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" > <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Bootstrap and jQuery Example</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </nav> <div class="container"> <h1>Welcome to Bootstrap and jQuery Example</h1> <p>This is a simple example that uses Bootstrap and jQuery to create a navigation menu and a page header.</p> </div> </body> </html>
以上代碼將展示一個具有導航菜單和頁面標題的簡單示例。該示例使用了Bootstrap的導航欄組件和jQuery的DOM操作,來動態加載頁面內容。