tp剩余未验证内容-5

通过实践， 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"> &times </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

实际上html标签之间 并无严格的 包含 "大小" 关系, 由于有css的影响, 因此一般状况下的div>p, 若是给div定义样式{display: inline/inline-block;} 那么 也多是p包含div,好比: p>div 特别是 标签 li 和 标签a , 它们能够包含不少内容,包括div p h1 等等

因此列表组的应用?

• 列表组是将内容 原来的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内容部分.

---

如今就能够体会到, bs中的类样式 , 和 html结构安排, 其实都有含义的, 应该是反复推敲后决定的, 因此就是要 "理解" 它的类样式的做用, 以及每一个结构标签的做用, 为何要这样布置html结构标签.

---

在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叠加. 只是它们的背景颜色不一样而已. 其中的属性 width: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类, 因此 即便是在前面也会 漂浮到警告框的右端的.
    {这里是 警告框的内容}

</div>

而若是警告框中要包含 锚点连接a, 须要使用alert-link类: div.alert.alert-success > a.alert-link[href=....] {警告框的内容}

bs的 缩略图样式?

• 首先, 缩略图是用来 表达 / 布局 / 排列 图片-照片-视频等资料的

• 由于一般 布局的 图片是用来展现的, 当点击它们的时候要跳转, 因此, 一般用 a 来包裹图片 img , 给a加上 .thumbnail类 , thumbnail类样式,
  是增长 4px的 padding内边距, 和 1px solid #ddd, 当缩略图被hover和focus时, 经过改变 边框的颜色来标识.

• 若是要给 .thumbnail 的 图片 添加说明文字的话, 须要使用 .caption类 , caption的意思, 除了标题的意思外, 自己就 还有 "字幕, (图片照片视频等)的说明文字"
  可是给图片添加 caption的话, 就要用 div代替 a

a.thumbnail > img...

若是有caption:

div.row> (div.col-md-3)*4
    > div.thumbnail
        >img...
        >div.caption
            >h3...+ p....

页面标题, .page-header样式, 是将 h1, h2, 等放在 div.page-header中, 重要的是 , .page-header类 会呈现出特殊 的样式, 在标题下面会有 更大的padding, 并且会有一条很细颜色很浅的 分隔线