溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

bootstrap 第二天

發(fā)布時間：2020-06-21 14:50:37 來源：網(wǎng)絡 閱讀：366 作者：bysowhat 欄目：web開發(fā)

1.導航元素，導航欄

    模擬淘寶網(wǎng)的導航

    bootstrap 第二天

    

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 實例 - 嵌套列</title>

   <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="./scripts/jquery.min.js"></script>

<script src="./scripts/jquery2.min.js"></script>

   <script src="./bootstrap/js/bootstrap.min.js"></script>

</head>


<body>

   <div class="nb">

                //導航元素

<ul class="nav nav-tabs" role="nav">

<li class="active"><a href="#">寶貝</a></li>

<li><a href="#">天貓</a></li>

<li><a href="#">店鋪</a></li>

</ul>

 //表單，輸入與搜索按鈕

<div role="form"  >

<form role="form">

<div class="input-group">

<input type="text" class="form-control"></input>

<span class="input-group-btn">

<button class="btn "  type="button">

搜索

</button>

</span>

</div>

</form>

</div>

   </div>

<script>

                //jquery控制css變化

function changeBorder(event,color){

$(event.target).closest("li").attr("class","active").css("border","solid" + color)

$("input").css("border","solid" + color);

$("input").css("border-bottom","6px solid" + color);

$("span button").css("border","solid" + color);

}

$("ul").bind("click",function(event){

//取消所有l(wèi)i的active類名

$("ul li").each(function(){

this.className = "";

$(this).css("border","");

$("input").css("border","");

});

//增加class類

if(($(event.target).html() == "寶貝") || ($(event.target).html() == "店鋪")){

changeBorder(event,"#ff5400");

}

if($(event.target).html() == "天貓"){

changeBorder(event,"#c60000");

}

});

</script>



</body>

</html>


2.下拉菜單，dropdown

bootstrap 第二天

<!--////按鈕組，可使按鈕緊密排列-->

<!-- 按鈕組樣式   btn-toolbar,group,group-lg,vertical >

<div class="btn-group">

<!--////btn-primary 藍色-->

<button type="button" class="btn btn-primary">Button1</button>

<!--////btn-default 灰色-->

    <button type="button" class="btn btn-default">Button2</button>

<!--////dropdown-toggle 一個為下拉設計的樣式-->

<button type="button" class="btn btn-default dropdown-toggle">

<!--////data-toggle（該按鈕上加載下拉菜單動作）與dropdown-menu要在同一級,菜單出現(xiàn)在該級的最左邊-->

<a href="#"  data-toggle="dropdown" class="glyphicon glyphicon-align-justify"></a>

<!--////菜單中的內(nèi)容，只有點擊下拉菜單時才出現(xiàn)-->

<ul class="dropdown-menu">

<!--//下拉菜單的標題-->

<li class="dropdown-header">應用</li>

<li>

<!--//glyphicon glyphicon-camera 字形圖（像圖片一樣的字-_-）-->

<!--   <span class= "caret"/> 下三角 -->

<a href="#" class="glyphicon glyphicon-camera"></a>

</li>

<li>

<a href="#" class="glyphicon glyphicon-cloud"></a>

</li>

<li>

<a href="#" class="glyphicon glyphicon-music"></a>

</li>

<!--下拉菜單的分隔欄-->

<li class="divider"></li>

<li>

<a href="#">others</a>

</li>

 </ul>

</button>

</div>



3.<pre>與<code>



瀏覽器行為：

因為瀏覽其讀入html文件時，里面的內(nèi)容不會保留回車，空格最多保留一個，如果一行顯示不下（width不夠）,會從第二行開始，不會把一個單詞分開2行。

<pre>: 保留空格和換行符

<code>:語義，提醒此標簽內(nèi)是程序。


bootstrap 第二天

所以，如果一行為word1,word2，其中word2長，一行放不下，那么word-break:break-all會讓第一行是word1,word2(part1),第二行是word2(part2)。而word-wrap:break-word，第一行是word1，第二行是word2（part1),第三行是word3(part2)。


4.<address><blockquote>排版

    作用對象：一段話


5.列表的排版 

 class="list-inline"  dl-horizontal

     作用對象：ul ol


6.導航元素屬性：

.nav .nav-tabs .active .nav-pill .nav-stacked .nav-justified 

.disabled


導航欄：navbar 固定位置 導航中的表單，按鈕，字體樣式


7.JQUERY對象與DOM對象

    JQUERY:$("div") 沒有DOM對象的方法

    DOM對象沒有JQUERY的方法

    可是：JQUERY中的each方法中的this是DOM對象啊

    JQUERY -> DOM

    jqueryObject.get(0)   jqueryObject[0]

    DOM -> JQUERY

    $(domObject)


















向AI問一下細節(jié)

免責聲明：本站發(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)容。

AI
助
手