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.插件名称"...

如何查看元素对象的尺寸?

将鼠标选中要查看的对象的, 此时, 对象上会出现指示工具条: 就可以知道对象的宽度和高度了.

对于滚动监听来说, 监听的是滚动条, 监听的是body的scroll, 但是最后生效的是导航条上的效果. 所以, body data-spy="scroll" data-target="#mynavbar"

!!实际上, 现在的前端框架, 后端框架还是很多的, 如除了bootstrap外, 国内还有 amaze ui前端框架, (不同于亚马逊amazon) 只要熟悉了一种框架,其他框架都是类似的使用, 只要引入了他的 js, css等, 直接使用就可以了!!

使用框架开发, 是现在开发的主流! 一个是减轻coder的工作量, 从大量繁杂重复的工作中,解脱出来, 二是提高项目的开发速度. 现在都是敏捷开发了, 代码讲究的是" 自动生成, 自动布局" , 很少再一个元素一个元素的去拼凑了, 讲求提高代码的生产效率. 使用框架是现实很普遍的了,现在的程序开发, 如web开发, 应用程序开发, 都是使用的框架, 不像使用C, C++ 写底层代码, 嵌入式代码, 驱动代码. 就像你要得到一台汽车, 你不会, 也不可能自己一个零件一个零件的来自己手工生产吧, 都是直接买配件/总成进行装配, 或者直接向汽车厂购买了! 现在是大工业化时代, 以前那种精雕细刻, 纯手工像素级的编码一去不复返了. 编码也是大工业化时代的批量生产了.

web美工, 是一个"奢侈"的概念. 对很多小公司而言, 都是照抄/借鉴/模仿/山寨/修改一些比较好的优秀的界面了. 在china都是这样,谁会挖空心思的去设计,然后被人轻易的就 "借鉴"了呢. 更不要说, 网上有那么大模板, 那么的web站点千篇一律, 大同小异了呢, 正常! 只要有各种行业用途的界面一样的准备一个就够了