bootstrap5
列表组的使用
ul.list-group > li.list-group-item *5...
列表组中可以放置徽标: 在li中放置 span.badge.
bootstrap中的情景类: 实际上就是所谓的颜色类, 如 .list-group-item-success 等类.
列表组的链接
还是list-group, list-group-item类, 只是将ul换成 div, li换成 a标签
div.list-group
a.list-group-item
列表组中的定制内容:
还是上面的 div.list-group > a.list-group-item> h3和p标签内容....
面板的使用
一个div.panel 包括: 一个 div.heading , 一个 div.body, 一个 div.footer
必须给 要给panel以情景类 div.panel .panel-default/.panel-primary/info/warning/danger/info等.
body中可以放置任何内容和东西..
(改造bootstrap自带的类的样式, 方法是: 在 ff中, 找到 显示该样式的 类的 内容, 然后在 style标签中, 重载这些类 的样式 !!)
面板中的表格, 注意这里的表格不是指嵌套在 div.panel-body中的表格, 而是指跟 panel的边框直接 相接的表格, 方法是: 把表格的标签元素, 放在 div.panel-body和 div.panel-footer之间, 即 放在 div.panel-body的 外部的.
面板中的其他东西, 仍然是写在 div.panel-body的外面, 如列表组 等.
对于标题标签, h2等, 如果想要在 标题的下方显示一条小的, 细的横线, 对标题元素本身使用 page-header, 如: h2.page-header
well被称为 "墙"? 还是 井?
骨架是: div.well .well-lg等...
整个bootstrap 分成3大块 , css全局样式, 组件 , 和 javascript插件.
modal模态框
model 模型,
module: 模块
modal: 模态
一定要注意这三个单词的写法区别, 不要把modal写错了, 写成model了, 否则 modal-dialog就不会显示 bootstrap默认的css样式: {width: 600px; margin: 30px auto} . 还是上面的方法, 就是看这些类, 这些css样式来自哪里, 来自哪个类, 从而, 可以查看是什么地方类写错了(用于排错), 哪里的类的样式是怎么样的. 从而可以重载 bootstrap 默认的类样式...
模态框的写法
模态框分成静态模态框和动态触发的模态框, 模态框本身来说, 只是包含那个模态框面板对话框. 动态触发的那个按钮, 不是包含在模态框中的, 即, 触发按钮不是模态框本身的一部分!!
触发按钮 button.btn .btn-primay [data-toggle=modal data-target=#mymodal]
模态框的骨架, 包括三个层次类: div.modal .fade .in > div.modal-dialog > div .content 注意这里的div. modal-content 不要和其中的 modal-body类相混淆了
其中, div.modal-content 才分为 三个部分:
div.modal id="mymodal" // 这里一定给modal div写上id, 供上面的那个触发按钮使用
div.modal-dialog
div.modal-content // 模态框的对话框由三个部分组成:
div.modal-header (头部, 包括hx, p标签内容, 关闭按钮)
button.close [data-dismiss=modal] {×} //右上角的关闭按钮, 由于他的样式是, 往所在行的 右下角漂移, 注意是右下角, 所以要把这个 colse类的button 写在h2.modal-title的前面...
h2.modal-title{内容...}
div.modal-body (模态对话框的内容部分) // 注意这里是modal-body类, 而不是 modal-content类, 不要把 这两个 类 搞反了...
p...
div.modal-footer (模态对话框的页脚部分)
button
button [data-dismiss=modal] close按钮...
除了直接用button触发 通过 data-toggle="modal" data-target="#mymodal" 来触发显示模态框之外, 也可以用 bs本身提供的modal框的 函数, 要将摸个div.modal 模态框作为modal显示出来, 调用它的函数方法: $('#mymodal).modal(), 注意是modal本身的id, 不是触发按钮的id
bs中的类, 分为, 基类, 修饰类, 状态类, 颜色类等等
bs中的标签页, 没有 专门的单独的 tab标签, 它是基于 导航组件 而派生的, 所以 要加导航类: ul.nav nav-tabs.....
注意, bs中的导航和 导航栏是两个根本就不同的东西, 导航栏通常是放在最顶端, banner , 或底部的东西, 而 导航 nav, 通常是和 .nav-tabs 和 .nav-pills 相结合而生产的东西. 用在网页中的任何地方....
有人说, 感觉bs的用法有点乱, 它的组件的 使用方式并不是全局一致的, 有的时候, 是这样的, 但是, 有的时候, 对于类似的东西, 它又是另外一种不同的方式了...
如: modal框的js, modal() 方法, 是加在 modal框的 本身的div上的, 而后面的 标签页的 js方法 $("a:last") .tab('show')/.tab('hide') , 等这个方法tab, 又是 加在 a标签上上面 的了, 不是加载 跟他相关联的 div.content > div.pane 上面了.
注意pane和panel的区别
- pane是窗格, 是一个窗口中的某一部分子区域, 而panel是用来 分组控件和对象的.
- A pane is a (usually) independently scrollable subsection of a window, A pane is a (usually) independently scrollable subsection of a window. It's what you get, for example, if you drag the splitter bar in a Word window. A panel is an object that is used to group controls and other objects.
带js 切换到tabs标签页:
分成两个部分, 一个是上面的 标签页导航样式, 另一个是下面的 tab窗格, 使用类 div.tab-content > (div.pane...)*3 , 然后将这两个部分 相关联起来...
- 关联的方法, 一是,使用属性法, 在 .nav.nav-tabs中的li>中的>a 标签中 ,使用 data-toggle="tab" href="#Profile" ,这里的#Profile 就是下面的 tab 窗格...
注意, bs中的 data-target, href中, 使用目标, 其实是 链接的一个 锚点, 所以 要加上 # 井号. 这里的 a标签, 要进行链接, 不是用data-target ,而是使用 href属性...
- 二是, 使用js方法, 这个时候的js就是:
$('a').click(function(){
$(this).tab('show'); // 注意这里的tab方法是直接放在 a链接上的...
}
);
工具提示栏的使用
这个单词真的 就叫做 tooltip: = tool 工具, tip= 提示. 真的就叫做 工具提示栏
它是一个比较 "不正式" "不正规"的类, 因为类的名字叫做: div.tooltip-demo
用法是: 直接在元素(不只是button元素吧)中, 添加属性: data-toggle="tooltip" data-placement="top"(默认在上方) title="title中的内容就是tooltip中要显示的东西"
也可以用纯js的方式: $("被依附的元素").tooltip(option), 这里特别要注意到是, option要使用 js对象或json的方式, 即 要在选项组的外面加上 大括号{ ...}
好像不能使用 data-toggle的方式, 只能使用 纯js 的方式
<button class="btn btn-primary">tooltip top</button>
<script>
$('button').tooltip({
title: 'tooltip on bottom',
placement: 'auto', top|bottom|left|right
trigger: click|hover|focus|manual
});
bs中的弹出框popover
popover的用法跟 tooltip的用法完全相同, 类似
属性: data-toggle="popover" title="title title, 不是data-title, 因为这个是标准属性" data-content="...."
也可以用js, 其中{placement=也有四个位置, trigger:... , title:...., html: true/false这个表示data-content中的html标签是否解析}
为什么好像也不能使用data-方式 只能使用 纯js的方式: $('...').tooltip({....});
bs中的警告框alert
跟前面的tooltip, popover等是一样的用法, 纯js的写法是 $('...').alert('close');
bs中按钮的补充类
显示正在加载的类: button.btn.btn-primary 加上属性data-loading-text="文字如:loading...", 还必须加上 id="fat-btn"
可以一直被按下的按钮: button 加上属性: data-toggle="button"
带checkbox或 radio功能的 按钮组:
实现方法是:
先写一个input checkbox或radio ,可以预选上checked
然后将这个input放在label中, 同时给label以 btn类样式 预选的话, 需要加active类
然后将多个这样的 label>input[type=checkbox/radio] 放在一个btn组 div.btn-group中即可.
关于setTimeout的使用: // code someother ......; setTimeout(function_callback(){....}, ms_number); someother code here....; 设置等待多少时间后, 执行回调函数. 这个是一个全局函数, 所以你想什么时候用, 就什么时候用,不需要 对象的 . 作用也很明显, 就相当于等于 c++ , java中的 sleep, usleep 函数, 等待多少时间后, 执行动作.... 可以放在其他函数的外面单独使用, 就是等前面的函数完全执行完了之后 睡眠多少时间后执行回调, 也可以放在 其他函数的内部 使用....就是 从setTimeout语句的上一语句开始执行时开始算起, 等待多少ms后, 就执行回调 (不一定要等到上一语句完全执行完毕!!). 两者的含义肯定是不同的!!
注意在使用js时, 多个回调函数中的js对象$(this)的变化. 就是说, 当使用多个回调函数时, 要注意在 多个回调函数中的 $(this) 可能不是指的 同一个元素. 特别是在使用 setTimeout函数时, 它其实是有对象的, 就是window 窗口对象. 只是这里的window可以省略不写. 所以在setTimeout函数中的 $(this)就是指的 window, 不再是之前的 $('button') 什么的.. 要想一直使用前面的元素, 可以先把那个元素保存下来, 供后面一直使用: var obj=$(this);
使用 data-xxx-text="..."属性可以定制 按钮中的文本... 注意 用js方法中的"loading" "complete"是关键字, 不能随便乱写. obj.button('loading'); 因为这个就是在按钮上显示 loading /complete 文字. 要定制这些文本, 可以 在button中使用 属性: data-loading-text="..." data-complete-text="...."
按钮的状态定制:
可以让按钮显示 "正在加载", "加载完成"等 状态..
注意, 调用方法 $('.stateful-btn').button('loading') 后, 按钮的文字 会一直显示 data-loading-text="..." 中定制的加载内容. 不会自动改变, 不会自动恢复..., 而且按钮是被 灰色 禁用的!
要想恢复按钮的 可用状态, 及按钮内地文字, 必须你自己显式的 调用方法: obj.button('reset'), 当然也可以调用 obj.button('complete')方法.
注意: 好像, button('complete')方法和 button('reset')方法最好不要同时使用, 而且, 如果同时使用时, 好像总是在最后 执行complete, 先执行'reset'方法...
<h3 style="color: red;">按钮附加功能和样式的使用</h3>
<button class="btn btn-danger btn-lg stateful-btn" data-loading-text="正在加载, 3秒后加载完成..." data-complete-text="加载完成">显示状态变化的按钮</button>
<br><br>
<script>
$('.stateful-btn').click( function(){
var obj=$(this);
obj.button('loading');
// wait for business logic ....
setTimeout(function(){
obj.button('complete'); // 注意, 这里,不要使用 $(this), 原因如上所述, 因为, setTimeout函数中的$(this) 将会引用到window浏览器窗口对象...
}, 3000);
});
</script>
firefox中的F12的调试器中 "查看" 中显示的 ev是什么?
ev是指当载入这个dom 元素节点的时候, 发生了指定的 event事件, 其中ev就是 event 事件的意思.
单击ev点开 事件列表, 可以看到载入了那些事件 , 执行了哪些js脚本 中的第几行 js代码 等等...
