经过实践， ie678是不能正确显示解析bs的，所以要用ff和chrome浏览器。
page-header类是有特殊样式的 在标题下有一条浅色的细线条，源代码中有： border-bottom: 1px solid #eee;
关于bs的标签类？
- 首先要注意单词的书写正确： 标签是 label（后面是bel， bell铃声助记）， 而不是lable。 lable没有这个单词，或者可能是英式英语
- 注意label本身的类样式， 是 font-size：75%， font-weight:bold; 但是他的颜色是：color:#fff; 所以你初看起来可能是看不到的, 要使用 label的附加样式, 比如: label-default label-primary等.
jquery选择器中的字符串通常是加 单引号. 但是如果内容中包含等号=的话,那么 等号后面的字符串本身也需要加引号,因此,此时就会出现两个地方需要引号. 就要用单双引号了, 通常来说: 最外面的部分用双引号, 里面的内容等号后面的字符串用单引号. 比如:bs中: $("a[data-toggle='tooltip']]").tooltip('show');
tooltip是对原生的a标签的一种样式重新生成, 主要是对 锚点a和按钮button 实现hover/focus时的文本信息提示. 要添加 data-toggle=tooltip属性,提示内容就是title属性的值. 当然也有其他属性, 比如data-placement='left/right/top/bottom/auto' tooltip和popover不是纯粹 的css, 要通过js来激活, 如上面的代码所示.
popover和tooltip基本上是类似的. 只是在样式上有些不同, popover要比 tooltip多一个 标题区域 / 或者说是一个 内容区域. popover分成了两部分,其中一个是title属性, 另一个是data-content="的内容", 也有 data-placement的属性.
tab组件和 tab插件的区别?
- 两者在 "头部ul.nav .nav-tabs或 .nav-pills .nav-stacked" 的内容基本上是一样的
- 组件只有头部的标签等, 没有实际内容. 而组件则增加了 tabs标签中内容载入的部分, 因此, 其ul>li>a的 href属性值就要写成后面对应 的 要载入的div内容部分的#id值
- tab插件的结构 的内容部分是:
div.tab-content > (div.tab-pane.fade .in .active(这里的第一个tab也要有active的类)) + (div.tab-pane.fade 这里就没有.in 和.active的类 了)*x - tab插件的方法是 tab(show/hide/toggle/ ???...), 事件有 show.bs.tab和 shown.bs.tab等, 他们的事件参数是: functon(e){ e.target表示当前激活的标签项, e.relatedTarget表示上一个激活的标签项.
scrollspy是在同一个页面内, 通过监控 (设置为position:relative)的 body元素 或div元素(style="heigth:200px; overflow:auto;")的滚动条的位置, 去修改(添加和删除) 目标元素 (通常是 导航栏 或 导航元素)中 相应 列表项 li的 .active类.
- 因此 body中的div的id值, 或 div中的section/hx/p等元素的id值, 就要和 导航中的 li的id值 相同 /相对应.
- 因为正是 scrollspy插件 监控到 滚动条的位置 滚动到 某个section/区域部分的位置 (两者的位置对齐)时, 才去修改的ul的li对应的.active样式的.
初期开发只考虑大中型屏幕, 因为现在, 即使是最小最老的显示器屏幕的宽度都是 1024px了, 后期如果需要, 可以再对手机屏幕做一些优化就好了, 这种优化也比较容易. 现在的智能手机可以直接访问http/https等协议, 不需要另外写什么apk和网页了.
所谓响应式辅助工具类, 是指 包含 以 visible... hidden 开头的类样式, 比如: visible-xs就是 "只对 xs屏幕设备可见", 而 hidden-md就是 只有 md屏幕的设备不可见.
下拉菜单的插件和对应的组件之间的区别?
插件只是多了一个方法而已: 用触发器元素a/button 的 dropdown('toggle') 方法 来代替了 data-toggle 属性, 其他东西和内容 跟 下拉菜单 组件没有什么区别.
要理解js插件的工作原理, 首先是要加载 dom元素, 然后才对这些 dom元素 执行相应的 css /js等. 因此, 写前台内容的时候, 不管是怎样的组件或插件或css, 都应该先写好 相应的html dom元素结构.
bs插件的三要素:
- 属性(选项), 一开始初始化就生效的, 通过data-属性 或 options 选项使用
- 方法, 供 手动调用
- 事件, 主要是用作钩子使用, 比如用on来绑定
on('show.bs.modal', function(){...}) - modal的show方法调用后, 并不一定马上就显示出来(可能有过渡), hide方法并不一定马上就不可见了.
插件和组件的区别, 组件是一开始就显示 的, 而插件通常要 由触发器 触发才显示 (打开的). 但是 他们的内容, 都是 事先要写在 dom/html代码中的.
carou'sel [k2r2'sel] 旋转木马, 在bs中就是"轮播"插件
bs中的复选框组, 是指 将包裹 checkbox的标签label定义为button样式, 同时定义 多个标签外层的 包裹div为 btn-group, 并添加 data-toggle=buttons属性.
div.btn-group[data-toggle=buttons] > (label.btn.btn-default > input[type=checkbox]{选项$})*3
button插件的 属性data-loading-text只是 表示loading文本, 但是 真正让 按钮上面显示这些 文字, 必须用js 来激活: 方法是:
$('.btn').button('loading').delay(1000).queue(function() { ...; $(this).button('reset')});
而按钮插件的 按压状态 的激活和切换, 只需要设置 按钮的 属性 data-toggle='button';
注意 , 按钮元素的css和插件的区别, 前者只是外观上的显示, 没有按钮动态的东西, 而按钮插件, 可以在 按钮上显示 "loading文本..." 以及按钮的 "按下/弹起"
等状态的动态改变.
事件的动作, 有动词不定式和 完成时两种 状态. 动词不定式 是 to + show( show.bs.modal ) 表示模态框将要被显示.
事件分成三个阶段:
事件开始 (触发,此时 生成 事件对象/ 事件数据 参数等)
事件执行
事件结束 shown等.
使用BS的时候, 要注意 类样式的规范性和 html 结构的合理性 . 如果你 使用 框架, 就要 注意 挖掘框架的精髓, 在实际开发中尽可能使用框架本身的类实现布局,
而避免自己额外的去写类样式.
警告框 是一个 block样式的块框, 但是它作为插件, 是因为 他最右边的 a.close 叉叉 符号 是可以关闭这个 块框的.
<div class="alert alert-success" id="myAlert" >
<a href="javascript:;" class="colse" data-dismiss="alert"> × </a>
<strong> 成功</strong> the operation finished successfully!
</div>
几个css属性的含义:
- line-height: 1, 注意,这个 1 不是写错了, 不是1px, 而是 百分比表示法的一种 简单写法, 1就表示 100%, 1.5表示 150%, .5表示 50%. 所以line-height: 1 表示 按照该元素字体本身的高度设置行高, 即: 上下都不留空隙
- text-shadow: 包括h-shadow, v-shadow [ , blur, color] 可以使用多个文字阴影, 之间用逗号分隔, 可以形成多种复杂绚丽的效果
- 不透明度: 有两种, opacity: .2 是 css的标准属性. 但是ie678 不支持 opacity, 所以为了兼容, ie的透明度是通过 filter: alpha(opacity=20) 来实现的.
.close {
float: right;
font-size: 21px;
font-weight: bold;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
}
bs有六种语义的状态, 分别表示不同的背景颜色: -default 是默认的灰色, -primary是蓝色, -success是绿色 -info是天蓝色(浅蓝色), -warning是橙色(黄色),
-danger是红色
backdrop [dr^p]. 英式英语中的 o音, 在美式英语中发 ^ 音.
表示 "舞台背景", 是表示 bs中 modal模态框的 鼠标失去焦点后, 的 模态框背景颜色.
实现模态框的外观 选项控制方法, 一种是 用data- 属性来指定, 另一种是用js的 options.
在整个bs的插件中,要实现 被控制元素的触发,可以有两种方式,一是使用 链接锚点a ,那么控制目标用href属性来指定; 一是用 按钮button, 则用data-target属性.
而且, 模态框的显示, 还是应该用触发器来显示才是比较合理的.
模态框的结构是:
div.modal.fade
> div.modal-dialog
> div.modal-content
>div.modal-header
>h4.modal-title + a.close/或者button.close
> div.modal-body
> div.modal-footer+button[data-dismiss=modal]
注意在bs中,插件中表示 头部 的类,有的是用 .??-header, 有的是用 .??-heading, 这个要注意区分. 如果是标题的类,要用相应的h4.??-title 类. <font color="red> 但是要注意, h
bs中, transition.js 是用来表示css和js的过渡效果的 他是一个辅助类, 主要是加在其他插件中,比如.fade 类样式, 它们本身很少单独 使用的, 是一个基础 的 被依赖的类.
可折叠插件collapse?
- 包括可折叠面板(又叫accordian)和折叠组件
- accordian实际上是一个面板组, panel-group, 由多个面板panel组成. 只是每一个panel在原有的基础上增加了一些 触发/显示/隐藏面板内容的 类:
div.panel-group[id=accordian]
>div.panel.panel-default
>div.panel-heading
>div.panel-title >a[data-toggle=collapse][data-parent=accordian][href=后面的被控制的面板的内容, 在这里是#collapseOne]
>div#collapseOne.panel-collapse.collapse .in
>div.panel-body {..........}
......
``` 简单的折叠组件(不是折叠面板的) button[type=button].btn.btn-primary[data-toggle=collapse][data-target=#demo]{简单的可折叠组件} div#demo.collapse.in{ ......sometext content....}
panel面板的组成?
- 分成三个部分组成, 标题部分, body部分, footer脚注部分
- div.panel.panel-default或其他带有语义的类
>div.panel-heading > h4.panel-title
>div.panel-body
>div.panel-footer
其中panel-body部分可以嵌入其他任何标签.
#### 通常标题和具体的内容 是对应的, 比如 标题 hx后面就应该是 内容p 比如: h2 + p
<font color="red">
#### 实际上html标签之间 并没有严格的 包含 "大小" 关系, 因为有css的影响, 所以通常情况下的div>p, 如果给div定义样式{display: inline/inline-block;} 那么 也可能是p包含div,比如: p>div 特别是 标签 li 和 标签a , 它们可以包含很多内容,包括div p h1 等等 </font>
所以列表组的应用?
- 列表组是将内容 原来的ul>li , 变换一下css样式, (没有js动作), 形成 通栏类似按钮面板的样式
- 默认的列表组的样式是: `ul.list-group > (li.list-group-item)*5`
- 如果列表组要包含链接a的话, 就要改变一下, 不能再用 ul和li了: 要用 div代替ul, 用a代替 li
- 而且如果是包含a的话, 列表组的内容可以包含得更多: 链接a中可以包含任何其他标签, 包括 标题和段落
div.list-group
> a.list-group-item
> h2.list-group-item-title {....}
> p.list-group-itme-text {.....}
-----------------
#### 可以看到 html5中的data-属性, 主要是用来实现 "js动作, js代码功能的", 可以用相应的js脚本来同等实现
列表组的作用和使用?
- 作用是, 对原来的ul>li的一种重新生成形式, 列表项之间没有分离, 是整合在一起的类似"按钮面板组"的样子
- 结构是 ul.list-group > (li.list-group-item)*3
- 如果要在列表组中使用 链接, 那么就不能再用ul>li结构了, 要用div来代替ul, 用锚点a来代替li 即 结构是 div>a
- 可以向列表组的列表项添加 标题和内容样式:
div.list-group
>a.list-group-item
>h4.list-group-item-heading{some title text}
>p.list-group-item-text{列表组内容}
div.carousel.slide#mycarousel 轮播插件包括3个部分
- 第一部分是轮播指示器 ol.carousel-indicators(这里必须ol, 因为后面的li的data-slide-to是要按顺序来指定的.)
> li[data-target=#mycarousel][data-slide-to=0 /1 /2 等] 第一个li 和其对应顺序的轮播内容都应该设置为 .active
- 第二部分是轮播的具体内容 div.carousel-inner
> div.item {具体的内容} // 内容一般是图片或视频等多媒体
>div.carousel-caption{ "可选的内容 标题}
- 第三部分是两个锚点a控件 a.carousel-control.left[href=#mycarousel][data-slide=prev] {‹} 和
a.carousel-control.right[href=#mycarousel][data-slide=right]{›}
- 轮播的选项有: data-ride=true, 表示插件一开始就播放动画; data-interval 表示轮播间隔时间, data-pause表示鼠标移入插件hover时, 插件是否停止播放, data-wrap表示
插件是否首尾循环.
关于媒体的类的使用?
- 媒体的使用场合 主要是 实现 "图文混排"(图片-多媒体和文字混合排列) 主要是用在 博客类的评论样式. 通常 图片是浮动在 文字段落的左边或右边.
div.media
> a.pull-left (a的作用主要是实现图片媒体向左/向右浮动排列, 因为 通常点击图片时 都应该链接到该用户的相关信息, 所以 用 a来封装图片)
> img.media-object (这里的media-object 样式用来规定图片和文字段落之间的 相对位置样式)
> div.meida-body( media-body正是 图文混排的文字段落部分)
> h4.meida-heading{文字部分的标题} + p {段落文字部分, 这个里面又可以嵌套 div.media...}
- 而媒体列表, 是用ul .media-list 来包含 多个 li.meida内容部分.
----------------------------------
<br>
<font color="red">
#### 现在就可以体会到, bs中的类样式 , 和 html结构安排, 其实都有含义的, 应该是反复推敲后决定的, 所以就是要 "理解" 它的类样式的作用, 以及每个结构标签的作用, 为什么要这样布置html结构标签. </font>
----------------------------
在html中除了声明h5, meta charset=utf8之外, 还要声明 `<html lang="en"> 这样在表示某些英文符号 的时候, 才不会出现位置上的偏差... 但是也有可能使用 <html lang="zh">`
.nav-tabs和 .nav-pills的区别是什么?
前者的li-item是连着的, 而后者的项目是分离的. 而且即使是 .nav-stacked也可以用在 nav-tabs上, 成为垂直的连着的导航元素, 这个使用还是很广的.
bs中的 html5 data-属性是实现某种js功能的, 比如 切换功能/ 比如监视功能, 其中比较多的是 切换功能data-toggle, 少数的是 监视功能 data-spy
其中, 具有data-属性的元素是发出该动作的元素, 而它的 data-target属性或 a[href=...] 才是动作要执行的对象.
进度条其实很简单, 就是两个div叠加. 只是它们的背景颜色不同而已. 其中的属性 60% 表示的是 占父容器 的长度. 而且进度条可以有 过渡的 效果.
进度条相关的类 div .progress .progress-striped > div. progress-bar .progress-bar-success 等. 因为默认的进度条是 向左浮动的 所以 在同一个进度条容器中 , 可以直接堆叠放置
多个不同语义颜色的进度条. 进度条的难点是 如何计算 随动作执行而延伸变化的 进度条 的长度
关于警告框插件?
是在 dom节点中呈现的一种block框, 只是因为它是一种插件, 所以有动作, 有交互, 可以关闭这个 框
结构是:
// (这里要注意和下面的data-dismiss的区别,alert-dismissable是说这个警告框是 "可以关闭的", 而data-dismiss则是用来关闭这个警告框的 )
div.alert.alert-success .alert-dismissable
> button .close [type=button][data-dismiss=alert] {×} // 因为是.close类, 所以 即使是在前面也会 漂浮到警告框的右端的.
{这里是 警告框的内容}