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代码 等等...
http://www.tudou.com/programs/view/bFEHdKQWl8M/ 第15集
http://www.tudou.com/programs/view/A-7lavN56ss/ 第14集
bootstrap5的更多相关文章
- BeetleX使用bootstrap5开发SPA应用
在早期版本BeetleX.WebFamily只提供了vuejs+element的集成,由于element只适合PC管理应用开发相对于移动应用适配则没这么方便.在新版本组件集成了bootstra ...
- 【Bootstrap5】精细学习记录
[Bootstrap5]精细学习记录 Bootstrap模板 <!DOCTYPE html> <html> <head> <title>Bootstra ...
- bootstrap-5
代码(一) 在bootstrap中主要提供了三种代码风格:详见688行-730行 1.使用<code></code>来显示单行内联代码 2.使用<pre></ ...
- Bootstrap5 多级dropdown
<div class="dropdown"> <a class="btn dropdown-toggle"> Dropdown link ...
- Bootstrap5 如何创建多媒体对象
一.在Bootstra5中使用媒体对象 Bootstrap 媒体对象在版本 5 中已经停止支持了.但是,我们仍然可以使用 flex 和 margin 创建包含左对齐或右对齐媒体对象(如图像或视频)以及 ...
- 原生js学习 选择dom
连bootstrap5 都抛弃jquery了,重新使用原生js来写,所以最近在学习原生js. 一.选择dom元素: id let sure=document.getElementById('sure' ...
- Web前端兼容性指南
一.Web前端兼容性问题 一直以来,Web前端领域最大的问题就是兼容性问题,没有之一. 前端兼容性问题分三类: 浏览器兼容性 屏幕分辨率兼容性 跨平台兼容性 1.浏览器兼容性问题 第一次浏览器大战发生 ...
- 【Tomcat】手写迷你版Tomcat
目录 源码地址 一,分析 Mini版Tomcat需要实现的功能 二,开发--准备工作 2.1 新建Maven工程 2.2 定义编译级别 2.3 新建主类编写启动入口和端口 三,开发--1.0版本 3. ...
- Django静态文件配置 request对象 Django操作MySQL
Django中的文件介绍 render.HttpResponse和redirect 当我们想起手写一个项目,创建好应用并且注册之后,在urls.py文件先导入app文件夹下migrations下的vi ...
随机推荐
- opencv-Python---动态人脸捕捉
本章重点内容: 1.python写人脸识别 2.选择OpenCv框架 案例1 导入图片并打开显示 思路:1.导入库 2.加载图片 3.创建窗口 4.显示图片 5.暂停窗口 6.关闭窗口 #1.导入库 ...
- Linux中Kill掉进程的10种方法
常规篇: 首先,用ps查看进程,方法如下: 复制代码 代码如下: $ ps -ef……smx 1822 1 0 11:38 ? 00:00:49 gnome-terminalsmx 1823 1822 ...
- Improving the quality of the output
There are a variety of reasons you might not get good quality output from Tesseract. It's important ...
- pd.read_csv操作读取分隔符csv和text文件
pandas.read_csv可以读取CSV(逗号分割)文件.文本类型的文件text.log类型到DataFrame 1. pandas.read_csv常用参数整理 也支持文件的部分导入和选择迭代 ...
- 2018-2019-2 网络对抗技术 20165324 Exp2: 后门原理与实践
2018-2019-2 网络对抗技术 20165324 Exp2: 后门原理与实践 课程学习: 后门 后门:是不经过正常认证流程而访问系统的通道,存在与编译器.操作系统.固件和应用中等等. 后门工作流 ...
- jxl(Java Excel API) 使用方法 【1】
// 构建Workbook对象, 只读Workbook对象 // 直接从本地文档创建Workbook // 从输入流创建Workbook Workbook workbook = nul ...
- iOS 网易彩票-2框架搭建-代码重构
在上一篇中,我们基本已经把整个框架都搭建出来了,下面进行代码重构一下. 思路: 导航按钮,按下时,会变灰,那是系统自带了,通过自定义UIButton,实现按下按钮立即切换效果. MJTabBarCon ...
- 树莓派3B新版raspbian系统换国内源
树莓派新版系统更换了专门优化过的桌面环境PIXEL,正好手头有个闲置的TF卡决定刷上新版系统玩玩.下载刷系统过程很多教程页很简单.插卡,上电开机,释放卡上的剩余空间都很正常,因为树莓派官方源访问很慢下 ...
- Catch all the latest Jordan Release Dates
In case y'all missed yesterday's news, Air Jordan 13 Olive 2018 officially unveiled their 2017 Holid ...
- zw版【转发·台湾nvp系列Delphi例程】HALCON ZoomImageFactor
zw版[转发·台湾nvp系列Delphi例程]HALCON ZoomImageFactor procedure TForm1.Button1Click(Sender: TObject);var ima ...