bootstrap 滚动监听
<!DOCTYPE HTML><HTML lang="en"head> Meta charset="UTF-8"Title>demo1</name="vIEwport" content="wIDth=device-wIDth,initial-scale=1,shrink-to-fit=no"link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/CSS/bootstrap.min.CSS"script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.Js"></script="https://cdn.staticfile.org/popper.Js/1.15.0/umd/popper.min.Js"="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/Js/bootstrap.min.Js"style> body{ margin:10px; padding; } .navbar-itemflex1} body data-spy="scroll" data-target=".navbar" data-offset="50" style="position: relative;"nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ul ="navbar-nav"="wIDth:100%;"> li ="nav-item"> a href="#item1" class="nav-link">item1ali="#item2">item2="#item3">item3="#item4">item4ulnav> div ID="item1"="container-fluID bg-success"="padding:70px 0"h1>Section 1p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!div="item2"="container-fluID bg-warning">Section 2="item3"="container-fluID bg-danger">Section 3="item4"="container-fluID bg-info">Section 4>bodyHTML>
把滚动监听加在body标签上，是正常的
当我尝试加在某个div上时，发现滚动监听似乎无效了
各位有知道原因的么
>="wIDth:300px;margin:0 auto;position: relative;"="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"="wIDth:300px;margin:0 auto;">
垂直滚动监听：
.nav-pills positionfixed top20px .col-8 div height800px="#navbar"="1"="container-fluID"="row"="col-4" ID="navbar"="nav nav-pills flex-column"> > > ="col-8">
bootstrap4 小工具
使用 border 类可以添加或移除边框:
div display inline-block wIDth100px="border"="border-0"="border border-top-0"="border border-right-0"="border border-bottom-0"="border border-left-0">
bootstrap4 提供了一些类来设置边框颜色:
="border border-primary">primary="border border-secondary">secondary="border border-info">info="border border-warning">warning="border border-danger">danger="border border-success">success="border border-light">light="border border-dark">dark="border border-white">white>
使用rounded 类可以添加圆角边框:
="rounded border">rounded="rounded-top border">rounded-top="rounded-bottom border">rounded-bottom="rounded-left border">rounded-left="rounded-right border">rounded-right="rounded-circle border">rounded-circle="rouded-0 border">rouded-0>
.float-right 类用于设置元素右浮动， .float-left 设置元素左浮动, .clearfix 类用于清除浮动:
.Box="clearfix"="Box border float-left">float-left="Box border float-right">float-right>
设置浮动 (.float-*-left|right - * 为 sm,md,lg 或 xl)的方向依赖于屏幕的大小:
<!-- 设置响应式浮动 --> ="Box border float-md-right">在大于中等屏幕尺寸上右浮动>
使用 .mx-auto 类来设置居中对齐:
="Box mx-auto bg-warning">div>
使用 w-* 类 (.w-25, .w-50, .w-75, .w-100, .mw-100) 来设置宽度:
margin-bottom="w-25 bg-warning">25%="w-50 bg-warning">50%="w-100 bg-warning">100%="mw-80 bg-warning">最大80%>
最大宽度没生效，是这么用的么？？
使用 h-* 类 (.h-25, .h-50, .h-75, .h-100, .mh-100) 来设置高度:
.container300px margin-right="container"="float-left h-25 bg-warning"="float-left h-50 bg-warning"="float-left h-100 bg-warning"="float-left mh-80 bg-warning"="height:300px;">
不是很懂这个最大宽度和最大高度的原理……
注意：IE9 及其以下版本不支持d性盒子，所以如果你需要兼容 ie8-9，请使用 bootstrap 3
="d-flex p-3 bg-dark"="p-2 bg-warning">bg-warning="p-2 bg-info">bg-info="p-2 bg-danger">bg-danger>
创建显示在同一行上的d性盒子容器可以使用 d-inline-flex 类:
="d-inline-flex p-3 bg-dark">
.flex-row 可以设置d性子元素水平显示，这是默认的。
使用 .flex-row-reverse 类用于设置右对齐显示，即与 .flex-row 方向相反。
>flex Box1>flex Box3="d-flex p-3 bg-dark flex-row"="d-flex p-3 bg-dark flex-row-reverse">
.flex-column 类用于设置d性子元素垂直方向显示, .flex-column-reverse 用于翻转子元素：
="d-flex p-3 bg-dark flex-column"="d-flex p-3 bg-dark flex-column-reverse">
.justify-content-* 类用于修改d性子元素的排列方式，* 号允许的值有：start (默认),end,center,between 或 around:
="d-flex p-3 bg-dark justify-content-start"="d-flex p-3 bg-dark justify-content-end"="d-flex p-3 bg-dark justify-content-center"="d-flex p-3 bg-dark justify-content-between"="d-flex p-3 bg-dark justify-content-around">
.flex-fill 类强制设置各个d性子元素的宽度是一样的:（填满剩余空间）
>flex Box2="p-2 bg-warning flex-fill"="p-2 bg-info flex-fill"="p-2 bg-danger flex-fill">
.flex-grow-1 用于设置子元素使用剩下的空间。以下实例中两个子元素只设置了它们所需要的空间，中间一个获取剩余空间。
="p-2 bg-info flex-grow-1">
使用 .flex-shrink-1 用于设置子元素的收缩规则。
.order 类可以设置d性子元素的排序，从 .order-1 到 .order-12，数字越低权重越高( .order-1 排在 .order-2 之前) :
="p-2 bg-warning order-2"="p-2 bg-info order-3"="p-2 bg-danger order-1">
.mr-auto 类可以设置子元素右外边距为 auto，即 margin-right: auto!important;，.ml-auto 类可以设置子元素左外边距为 auto，即 margin-left: auto!important;:
="p-2 mr-auto bg-warning"="p-2 ml-auto bg-danger">
d性容器中包裹子元素可以使用以下三个类： .flex-nowrap (默认),.flex-wrap 或 .flex-wrap-reverse。设置 flex 容器是单行或者多行
="d-flex p-3 bg-dark flex-wrap">flex Box4>flex Box5>flex Box6="d-flex p-3 bg-dark flex-wrap-reverse"="d-flex p-3 bg-dark flex-nowrap">
使用 .align-content-* 来控制在垂直方向上如何去堆叠子元素，包含的值有：.align-content-start (默认),.align-content-end,.align-content-center,.align-content-between,.align-content-around 和 .align-content-stretch。
这些类在只有一行的d性子元素中是无效的
.d-flexheight200px="d-flex p-3 bg-dark flex-wrap align-content-start border border-white"="d-flex p-3 bg-dark flex-wrap align-content-end border border-white"="d-flex p-3 bg-dark flex-wrap align-content-center border border-white"="d-flex p-3 bg-dark flex-wrap align-content-around border border-white"="d-flex p-3 bg-dark flex-wrap align-content-stretch border border-white">>
如果要设置单行的子元素对齐可以使用 .align-items-* 类来控制，包含的值有：.align-items-start,.align-items-end,.align-items-center,.align-items-baseline,和 .align-items-stretch (默认)。
="d-flex p-3 bg-dark align-items-start border border-white"="d-flex p-3 bg-dark align-items-end border border-white"="d-flex p-3 bg-dark align-items-center border border-white"="d-flex p-3 bg-dark align-items-around border border-white"="d-flex p-3 bg-dark align-items-stretch border border-white">
如果要设置指定子元素对齐对齐可以使用 .align-self-* 类来控制，包含的值有：.align-self-start,.align-self-end,.align-self-center,.align-self-baseline,和 .align-self-stretch (默认)。
="d-flex p-3 bg-dark border border-white"="p-2 bg-danger align-self-start"="p-2 bg-danger align-self-end"="p-2 bg-danger align-self-center"="p-2 bg-danger align-self-around"="p-2 bg-danger align-self-stretch">
响应式flex类：
可以根据不同的设备，设置 flex 类，从而实现页面响应式布局，以下表格中的 * 号可以的值有：sm,lg 或 xl,对应的是小型设备、中型设备，大型设备，超大型设备。
https://www.runoob.com/bootstrap4/bootstrap4-flex.html 菜鸟笔记最下面写的很清楚，要用了就去翻翻
bootstrap 4 多媒体对象
要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果:
="media border p-3"img ="img/img_avatar.png"="mr-3 mt-3 rounded-circle"="wIDth:50px;"="media-body"h4>基础多媒体对象>要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果。>
多媒体对象可以多个嵌套（一个多媒体对象中包含另外一个多媒体对象）
要嵌套多媒体对象，可以把新的 .media 容器放到 .media-body 容器中:
>
如果你想将头像图片显示在右侧，可以在 .media-body 容器后添加图片:
> >
可以使用 align-self-* 相关类来设置多媒体对象的图片显示位置：
（垂直方向）
="align-self-start mr-3 rounded-circle"="align-self-end mr-3 rounded-circle"="align-self-center mr-3 rounded-circle">
bootstrap4 创建一个网页
> ="jumbotron text-center"="margin-bottom:0;">我的第一个 bootstrap 4 页面> >重置浏览器窗口大小查看效果！> ="navbar navbar-expand-sm bg-dark navbar-dark"> ="navbar-brand"="#">导航button ="navbar-toggler" type="button" data-toggle="collapse"="#collapsibleNavbar"span ="navbar-toggler-icon"spanbutton="collapse navbar-collapse"="collapsibleNavbar"="navbar-nav"="nav-link">链接> > ="col-sm-4"> about me > ="nav-link active">激活状态="nav-link Disabled">禁用> hr ="d-sm-none"="col-sm-8" ... ="margin-bottom:0">footer>
好丑……
总结
以上是内存溢出为你收集整理的Bootstrap 滚动监听+小工具+Flex（d性）布局+多媒体对象全部内容，希望文章能够帮你解决Bootstrap 滚动监听+小工具+Flex（d性）布局+多媒体对象所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）