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-groupa.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-dialogdiv.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 (模态对话框的页脚部分)buttonbutton [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管理应用开发相对于移动应用适配则没这么方便.在新版本组件集成了bootstrap5可以 ...
- Bootstrap5 文字排版讲解
目录 一.文本对齐方式 二.文本换行和溢出 三.文本转换 四.文本大小 五.字体粗细及斜体 六.行高(行距) 七.重置链接颜色 一.文本对齐方式 使用文本对齐类能够轻松地将文本重新对齐到组件.对于左侧 ...
- bootstrap5基本使用
目录 前言 导入 常用 Flex基础 Container Gird网格 Columns列 垂直居中 水平居中 间距margin.padding Gutter列填充 Reboot 重置样式 Typogr ...
- Bootstrap5 网格系统讲解
目录 前言 一.列样式 二.网格类 三.网格系统规则 四.使用案例 五.列偏移 六.列顺序 七.对齐方式 垂直对齐 水平对齐 前言 Bootstrap 提供了一套响应式.移动设备优先的流式网格系统.随 ...
- ReactJs+Bootstrap5管理后台模板下载
下载地址Qovex是一个简单而漂亮的管理后台模板,建立基于最新的React Js和Bootstrap5.它有6 +不同的布局和3种模式(黑暗,光明和RTL).你可以改变任何布局或模式通过改变几行代码. ...
- Bootstrap5使用bootstrapValidator完成表单验证(包括解决样式、图标不显示及其他组件表单验证出问题解决方案)
以下都为个人实践. CND引入bootstrap5及bootstrapValidator文件 bootstrap5 <link href="https://cdn.jsdelivr.n ...
- BootStrap5快速入门
BootStrap5快速入门 BootStrap5快速入门 引入 1.容器 2.网格系统 3.文字排版标签 Display 标题类 small mark abbr blockquote code kb ...
- Bootstrap5学习笔记
教程: https://www.runoob.com/bootstrap5/bootstrap5-tutorial.html Bootstrap5 支持主要的最新版本浏览器,不支持 Interne ...
- 爬虫训练场项目前端基础,Bootstrap5排版、表格、图像
文章目录 Bootstrap5 文字排版 表格 Bootstrap 图像+Python flask 静态资源配置 Bootstrap5 文字排版 在 Bootstrap 5 中,文字大小 font-s ...
- 【自用】javaWeb复习笔记1,html,css,javascript,bootstrap5
idea重启 步骤: 在IDEA 的菜单栏中选择 File(文件)菜单. 选择 Invalidate Caches / Restart(无效缓存/重启)选项. 在弹出的对话框中,选择重启 Intell ...
最新文章
- 【Android 应用开发】BluetoothDevice详解
- linux下的strerror和perror
- 【转】上篇:陈皓谈程序员升级:职业规划就像软件工程
- Ubuntu16安装anaconda没有这个文件或者目录
- 数据结构 二、向量(接口与实现and可扩容向量)
- Git(11)-cherry-pick、reset、rebase
- 《面向模式的软件体系结构2-用于并发和网络化对象模式》读书笔记(13)--- 线程安全接口和双检查加锁优化...
- 两个不同的数据库如何跨库事务
- centos7的systemd命令对比
- 学计算机比学农好吗,学农教育效果如何?学生:“做农活比打游戏有意义”
- 播放视频中称比例的计算
- OBS 录制的视频声音越来越大
- 可视化学习第三周-对比型和分布型数据
- python语言工具_可爱的 Python
- 热门智力题 过桥问题和倒水问题
- Android菜鸟笔记-WifiPickerActivity 实现跳转到系统自带wifi连接界面
- Postfix邮箱(八):安装反垃圾邮件系统Spam Locker
- VC6中工具条的新特色 (转)
- SpringBoot启动图标修改(通俗易懂)
- 一个人窝在摇椅里乘凉 我承认这样真的很安详 和楼下老爷爷一样
热门文章
- C#访问Access和Win7 64位下可能遇到的 未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0” 提供程序 问题
- Spring MVC漏洞学习总结
- Bash命令行历史用法【转】
- 详解数据库引擎与SQL语句增删改查(非常详细,带例)
- leetcode32 Longest Valid Parentheses
- [dts]TI-am437x dts
- JavaScript 兼容新旧版chrome和firefox的桌面通知
- [SQL] SQL 基础知识梳理(三) - 聚合和排序
- redis常用配置项
- API 版本控制的几种方式