bootstrap第二天
1.导航元素,导航栏
创新互联建站主要从事成都网站建设、做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务临泉,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108
模拟淘宝网的导航
//导航元素
//表单,输入与搜索按钮
//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");
}
});
2.下拉菜单,dropdown
3.
与浏览器行为:
因为浏览其读入html文件时,里面的内容不会保留回车,空格最多保留一个,如果一行显示不下(width不够),会从第二行开始,不会把一个单词分开2行。
: 保留空格和换行符:语义,提醒此标签内是程序。
所以,如果一行为word1,word2,其中word2长,一行放不下,那么word-break:break-all会让第一行是word1,word2(part1),第二行是word2(part2)。而word-wrap:break-word,第一行是word1,第二行是word2(part1),第三行是word3(part2)。
4.
排版 作用对象:一段话
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第二天
链接地址:http://hbruida.cn/article/ihhedg.html