bootstrap 第二天

1.导航元素,导航栏

模拟淘宝网的导航

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

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

<!--////按钮组,可使按钮紧密排列-->

<!-- 按钮组样式   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要在同一级,菜单出现在该级的最左边-->

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

<!--////菜单中的内容,只有点击下拉菜单时才出现-->

<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文件时,里面的内容不会保留回车,空格最多保留一个,如果一行显示不下(width不够),会从第二行开始,不会把一个单词分开2行。

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

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

所以,如果一行为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)

时间: 2024-10-07 17:22:19

bootstrap 第二天的相关文章

Asp.Net MVC4 + Oracle + EasyUI + Bootstrap 第二章

Asp.Net MVC4 + Oracle + EasyUI + Bootstrap 第二章 --使用Ajax提升网站性能 本文链接:http://www.cnblogs.com/likeli/p/4236723.html 文章集合:http://www.cnblogs.com/likeli/category/651581.html 1.  MVC的渲染部分视图 向服务器请求HTML标签来更新网页的内容,这种方法就叫“部分渲染”,这是属于Ajax的基本过程. 部分渲染技术包括了发送异步请求给服务

十天精通CSS3(11)

Media Queries——媒体类型(一) 随着科学技术不断的向前发展,网页的浏览终端越来越多样化,用户可以通过:宽屏电视.台式电脑.笔记本电脑.平板电脑和智能手机来访问你的网站.尽管你无法保证一个网站在不同屏幕尺寸和不同设备上看起来完全一模一样,但至少要让你的Web页面能适配用户的终端,让他更好的呈现在你的用户面前.在本节中,将会学到如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端(或屏幕尺寸),从而让你的页面让用户有一个更好的体验. Media Queries

Responsive Design ------响应式设计

什么是响应式设计呢?维基百科是这样对响应式作的描述:“Responsive设计简单的称为RWD,是精心提供 各种设备都能浏览网页的一种设计方法,RWD能让你的网页在不同的设备中展现不同的设计风格.”从这一点描述来说,RWD不是流体布局,也不是网格布局, 而是一种独特的网页设计方法. 响应式设计要考虑元素布局的秩序,而且还需要做到“有求必应”,那就需要满足以下三个条件:网站必须建立灵活的网格基础:引用到网站的图片必须是可伸缩的:不同的显示风格,需要在Media Queries上写不同的样式. 要想

2015上半年阅读书籍

第一本书:深入理解Bootstrap 第二本书:jQuery实战案例精粹 第三本书:程序员修炼之道 第四本书:Java设计模式 第五本书:Head First Servlets&JSP   第六本书:庄子

CSS3 Media Queries模板

CSS3 Media Queries一般都是使用“max-width”和“min-width” 两个属性来检查各种设备的分辨大小与样式表所设条件是否满足,如果满足就调用相应的样式.打个比方来说,如果你的Web页面在960px的显屏下显示,那 么首先会通过CSS3 Media Queries进行查询,看看有没有设置这个条件样式,如果找到相应的,就会采用对应下的样式,其他的设备是一样的道理.下面具体看看“max- width”和“min-width”模板: 使用max-width @media sc

深入理解bootstrap笔记:第二天

MD ,星期六.星期天在家闲了,今天才抽出空来看第二章,真心该打~不过看了之后,觉得收益蛮多的! 看了栅格这篇时,发现一个问题了,以前做自己的网站时,有的时候排版真心有问题,page21这里列排序:.col-md-push-*(*这里填写数字) 完全可以实现的嘛,还用什么float,真心觉的自己傻的不是一星半点的! 现在让我去做,保证bootstrap的栅格系统用的顺滑了! 越看越觉着bootstrap的用处太大,不同屏幕上用不同的栅格尺寸标准,就完成能实现.超小屏幕设备手机(<768px):.

第二百四十一节,Bootstrap进度条媒体对象和 Well 组件

第二百四十一节,Bootstrap进度条媒体对象和 Well 组件 学习要点: 1.Well 组件 2.进度条组件 3.媒体对象组件 本节课我们主要学习一下 Bootstrap 的三个组件功能:Well 组件.进度条组件.媒体对 象组件. 一.Well 组件 这个组件可以实现简单的嵌入效果. 嵌入效果 well样式class类,写在<div>里,设置一个div区块嵌入效果(Bootstrap)well-lg样式class类,写在<div>里,设置一个div区块嵌入效果大尺寸(Boo

第二百四十九节,Bootstrap附加导航插件

第二百四十九节,Bootstrap附加导航插件 学习要点: 1.附加导航插件 本节课我们主要学习一下 Bootstrap 中的附加导航插件 一.附加导航 附加导航即粘贴在屏幕某处实现锚点功能. 基本实例

前端框架bootstrap 表单和导航菜单的 Demo(第二篇)

表单: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script type="text/javascript" src="