溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關(guān)Javascript如何實現(xiàn)Bootstrap的網(wǎng)格系統(tǒng)、導(dǎo)航欄和輪播的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
Bootstrap 是一個用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。引用其時需要具備一定的基本模板：
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 --> <!-- 警告：通過 file:// 協(xié)議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 --> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> <![endif]-->
bootstrap將頁面或容器化氛圍橫向的12等份，行必須放置在 .container class 內(nèi)，以便獲得適當(dāng)?shù)膶R（alignment）和內(nèi)邊距（padding）。利用col-lg-(“number”）對橫向的12等份進行分配。
<div class="row"> <div class="col-lg-3">1</div> <div class="col-lg-3">2</div> <div class="col-lg-3">3</div> <div class="col-lg-3">4</div> </div>
<div class="container"> <div class="row"> <div class="col-md-6"> <!-- col-md-6默認(rèn)是水平分開兩個盒子，如果只是單純的div則會顯示為上下分布 --> <div class="col-md-6">a</div> <div class="col-md-6">b</div> </div> </div> </div>
使用.col-md-offset-*可以將列向右偏移
<div class="container"> <div class="row"> <div class="col-md-4">坐廁</div> <!-- 總共十二等份，兩個盒子本來是只占了8列，還有四列未被使用， 故col-md-offset-4,所以右側(cè)的盒子會繼續(xù)向右偏移4列 --> <div class="col-md-4 col-md-offset-4">右側(cè)</div> </div> </div> </div>
一般用于盒子調(diào)換順序
<div class="container"> <div class="row"> <!-- 左右兩個盒子同時使用push和pull元素，盒子才不會被壓住 --> <div class="col-md-4 col-md-push-8">坐廁</div> <div class="col-md-8 col-md-pull-4">右側(cè)</div> </div> </div> </div>
向 <nav> 標(biāo)簽添加 class .navbar、.navbar-default。
向上面的元素添加 role="navigation"，有助于增加可訪問性。
<div> 元素添加一個標(biāo)題 class .navbar-header，內(nèi)部包含了帶有 class navbar-brand 的 <a> 元素。這會讓文本看起來更大一號。
為了向?qū)Ш綑谔砑渔溄?，只需要簡單地添加帶?code> class .nav、.navbar-nav 的無序列表即可。
演示如下：
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ --> <title>Bootstrap 101 Template</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <!-- 這兩個script都必須要寫否則就會下拉菜單無法出來 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <!-- 這是一個響應(yīng)式布局，當(dāng)屏幕處于最大化時與屏幕縮小時的布局不一樣 --> <body> <!-- role="navigation"有助于增加可訪問性 --> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <!-- "navbar-header"，內(nèi)部包含了帶有classnav-brand的<a>元素，會使文本看起來更大一號 --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> <!-- data-toggle用于告訴JavaScript需要對按鈕做什么，icon-target指示要切換到哪一個元素，三個icon代表要創(chuàng)建所謂的漢堡按鈕 --> <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="#">菜鳥教程</a> </div> <div class="collapse navbar-collapse" id="example-navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">分離的鏈接</a></li> <li class="divider"></li> <li><a href="#">另一個分離的鏈接</a></li> </ul> </li> </ul> </div> </div> </nav>
全局界面
小窗界面
Bootstrap 輪播（Carousel）插件是一種靈活的響應(yīng)式的向站點添加滑塊的方式。除此之外，內(nèi)容也是足夠靈活的，可以是圖像、內(nèi)嵌框架、視頻或者其他您想要放置的任何類型的內(nèi)容。
實例演示：
<body> <div id="myCarousel" class="carousel slide"> <!-- 輪播（Carousel）指標(biāo) --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- 輪播（Carousel）項目 --> <div class="carousel-inner"> <div class="item active"> <!-- 圖片引用絕對路徑，相對路徑會出錯 --> <img src="1.jpg" alt="First slide" > </div> <div class="item"> <img src="2.jpg" alt="Second slide" > </div> <div class="item"> <img src="3.jpg" alt="Third slide" > </div> </div> <!-- 上下跳轉(zhuǎn)控制，跳轉(zhuǎn)控制可以前進貨后退 --> <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </body>
感謝各位的閱讀！關(guān)于“Javascript如何實現(xiàn)Bootstrap的網(wǎng)格系統(tǒng)、導(dǎo)航欄和輪播”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
