bootstrap第二天-创新互联
1.导航元素,导航栏
10年积累的网站设计制作、网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站制作后付款的网站建设流程,更有个旧免费网站建设让你可以放心的选择与我们合作。模拟淘宝网的导航
//导航元素
//表单,输入与搜索按钮
//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)
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享文章:bootstrap第二天-创新互联
标题URL:http://scyanting.com/article/dgddjh.html