bootstrap6 关于bs的使用总结
在同一行中也可以有多个过了行的 "行", 即列的"总宽度"超宽度12. 即实现堆叠display:block和水平排列float的自动控制,
在div的class中还可以使用多个"断点"breakpoint 类型的结合使用: 即 div.col-md-6.col-lg-3, 通常宽度较大的类放在后面, 当viewport视口(不是设备的屏幕宽度, 而是指浏览器窗口的宽度, 就是当你扩大或缩小browser窗口的大小时....)的宽度大于断点的时候, 后面的类样式就会生效, 而且会覆盖前面的断点样式类.
col-md -xs -lg -sm 总共有四种断点类型. 注意断点类型的含义是指的: 用这些断点指定的列的宽度, 对应的是多少像素 , 比如, 对于col-md-x, 每一个col单位对应的宽度就是:
大约是: (970-2*15)/12, 约等于80px.
xs表示 这样的列 的宽度总是最小的 在任何视口下, 都是堆叠的.
对于md和lg, 每一列的宽度就是那么规定的, 也就是说, 对于某一个宽度的视口, 如果视口的宽度>md-x的宽度和, 就成水平排列, 如果对于同一个视口宽度, 如果它小于lg-x的宽度和, 就成堆叠排列.
可能对于bs的栅格系统, 最重要的理解是: 当我们要实现 "多栏. 灵活的多栏. 复杂嵌套的多栏" 展示和布局时, 就要使用 栅格系统了. 这才是 "栅格系统"的真谛.
徽章: 就是一些制服上的, 右上角的那个标志, 在军队/警察中用来表示军衔或警衔的那个, 它是用span来实现的,(因为是在同一行嘛), 给予类class=badge, 那么这个span就会自动向右边偏移. 主要用来表示/统计 回复个数,在线人数等. (要处理的任务等, 这个在页面设计中还是很多很常见的) 对于 程序自动化生成代码内容来说, 很多内容都不是直接写的, 而是使用变量来生成的:
对于超链接a标签, 只有当他写了 href属性时, 浏览器才会给他 以"手形" 的鼠标指针.否则不会是 手形
- 对于列表组, 可以使用三种形式: ul>li, div>a, 和 div >button 等三种形式, 但是通常是用第二种, 因为单纯的列表没有 "列表/同时链接" 的应用更广泛. 可以在li或a中包含更多的内容, 和h2, 和p等, 成为 所谓的"定制内容".
bootstrap主要就是通过data- 这个自定义的 全局的属性来 实现 跟背后的js 相关联的目的和作用.
主要有两个data-属性:
data-类别 = "...", 类别有: data-toggle做切换目标元素使用, data-spy滚动监听, data-dismiss做关闭使用的. 这些主要 是用来 表示当前元素是起什么作用的, 是起 切换目标div元素的开启和关闭, 还是监听 还是用来关闭目标元素的.
data-toggle=buttons /dropdown /navi等等, 用来说明切换到类型
data-target="#targ", 用来说明切换的目标元素. 这里的target一定要用# 来表示id, 因为如果你不加#, data-target如何能够找到那个要作用的目的元素div呢, 这个target名称到底是id呢, 还是class, 还是label/element呢? 就无法确定...
- div.panel.panel-default > div.panel-heading + div.panel-body + div.panel-footer 面板和弹出窗口的区别?
div.panel-heading下, 就可以直接放置文本内容了 . 也可以将文本内容 放在 添加了 .panel-title类的h1-h6中, 注意是将.panel-title类样式放在hx中, 不是单独再创建div.panel-title的容器后再放h1-h6这样是不合理的. (panel-heading的类样式比panel-title更高, 如同html中的head/title层次结构一样).
两种是类似的, 都有标题栏和内容区, 可以把panel当作 是 嵌入到页面中的 弹出窗口.
面板的情景类, 是放在div.panel.panel-default/primary/danger/success等. (success通常是绿色, 表示成功/绿灯行), 而不是放在 div.panel-heading.
bs的情景类:
default: 通常表示灰色
primay: 蓝色;
info: 浅蓝色, 天蓝色
success: 绿色
warning: 粉色, 浅红色;
danger: 红色
面板还可以和表格/列表组等 "无缝" 连接 中间的间距都直接调整好了的, 要注意到是, 面板的 div.panel-body不要 去 包含 table, list-group等...
在bootstrap的思维结构里面, 凡是文本, 不管是head/heading, 还是body中的什么内容, 只要是文本, 都应该放在标签中, 放在有 具体"语义" 的标签中. 也就是说, 文本通常应该放在h2, p, span, a等 这四种 标签中, 而普通的容器如div中, 不应该 直接放置文本内容!? 容器div 应该放其他 "语义"结构标签, 如p, h2等.... :
在bs中, 只要写一个 <span class="close">×</span> 就可以得到一个 关闭按钮, 而且这个叉叉, 会自动float漂移到右上角的位置.
但是,要想这个关闭 "图标"要能够起作用, 去关闭对象的话, 就要给span加上data-属性, 通常是data-dismiss=modal....
**bootstrap总体的结构包括: 全局css样式, 组件, javascript插件 . 最后这个js插件很重要, 里面就包括了collapse, carou'sel[k2r2'sel] 旋转木马, 传送带, 引申为幻灯片 **
用图片做链接? 或者说 如何让图片成为可链接?
首先知道, 要成为一个链接, 除了使用form,还可以使用a标签元素, 然后将 img元素放在a中就可以了:
<a class="navbar-brand" href="#"> <img src=".." alt="..." ></a>
- 导航条navbar 有两种样式navbar-default 普通默认样式 和 navbar-inverse反转样式.
有3种位置类: nav.navbar-fixed-top/.navbar-fixed-bottom/.navbar-static-top , 其中, 最后的一个位置类.navbar-static-top无需设置body的内布padding-top....
可以通过 普通div 标签 或<nav>....</nav>标签来实现.
整个nav 标签包括 nav> .container-fluid> 然后在下面包括 两个部分:
一个是: div.navbar-header , 包括 一个button(包括3个span.icon-bar)和一个 .navbar-brand的链接/链接图片, 作为自己网站的 "品牌图标"放在导航条(导航栏)上.
一个是: navbar的实体
navbar的实体组成:
div .collapse .navbar-collapse 其中collapse, nav都是基本类, 后面的navbar-collapse 和 navbar-nav是补充类...
ul .nav .navbar-nav
li > a ...
li > a ...
li > a ...
- 关于下拉菜单的使用变形
下来菜单的使用非常灵活, 可以自由的/ 任意的 嵌套在任何地方
下拉菜单是 由一个div(下来标签的容器) 加上一个 button(或a) + ul>li组 构成的
div.dropdown (li.dropdown) // 这个div在更多的时候, 是用 li.dropdown来作为 下拉菜单的容器,
// 因为很少有专门的一个 div贯穿整行的div来做一个下拉菜单的, 通常是做一个li来显示下来菜单的
button (或者a链接标签) .btn.btn-default .dropdown-toggle[data-toggle="dropdown"] // 这里的触发元素 更多的是用一个a 链接标签... 关键的 是一个类和一个属性: 类名 是dropdwown-toggle, 而属性是: data-toggle="dropdown". 类名dropdown-toggle和toggle "相反"...
button或a后面的向下的三角形, 可以用span class="caret", 也可以直接用b标签: b class="caret"
下拉菜单的实际内容:
ul .dropdown-menu
li>a....
li>a...
li>a....
**滚动监听, 依赖于导航条, 导航条中具体内容的div中要加上 div .collapse .navbar-collapse 和这个 专门的 "js-navbar-scrollyspy 这个类好像可以不用, 因为在例子中的单词都写错了, 是scrollspy, 它多了一个y???" id="myScrollspy" ** 这个 data-spy="scroll" data-offset=0 等可以直接写在div 上面不一定要写在 body上面, 据说, offset写成10%, 70%最合理??
这里的data-offset是指的, 某个锚点h1, 距离浏览器客户区顶部的 "像素值" , 不是 百分比
好像设置navbar-static或自动, 导航条会跟着滚动, 这时后, 你是看不到滚动监听的效果的. 要想办法将 导航条固定, 要么固定在顶部, 使用 navbar-fixed-top, 或navbar-static-top. 或者使用绝对定位的容器...
滚动监听的事件: $("#myScrollspy").on("activate.bs.scrollspy", function(){....} 事件的名称是: "事件.bs.插件名称"...
如何查看元素对象的尺寸?
将鼠标选中要查看的对象的, 此时, 对象上会出现指示工具条: 就可以知道对象的宽度和高度了.
