bootstrap第二天

1.导航元素，导航栏

创新互联建站主要从事成都网站建设、做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务临泉,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

模拟淘宝网的导航

bootstrap 第二天

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

//导航元素

</ul>

//表单，输入与搜索按钮

搜索

</button>

</span>

</div>

</form>

</div>

//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){

//取消所有li的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 >

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

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

<li>

</li>

<li>

</li>

<li>

</li>

<li>

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

</li>

</ul>

</button>

</div>

3.<pre>与<code>

浏览器行为：

因为浏览其读入html文件时，里面的内容不会保留回车，空格最多保留一个，如果一行显示不下（width不够）,会从第二行开始，不会把一个单词分开2行。

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

<code>:语义，提醒此标签内是程序。

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)

网站名称：bootstrap第二天
分享地址：https://www.cdcxhl.com/article16/ihhedg.html

成都网站建设公司_创新互联，为您提供面包屑导航、网站建设、定制网站、微信公众号、搜索引擎优化、企业建站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容