浅谈对Bootstrap的看法之三(提示框和弹出框、滚动监听、小工具)

标签: Bootstrap  前端开发  提示框  滚动监听  小工具

1.提示框和弹出框

相关说明:提示框和弹出框效果类似。

提示框:通过向元素添加 data-toggle="tooltip" 来创建提示框,<a href="#" data-toggle="tooltip" title="我是提示内容!">鼠标移动到我这</a>,title引号中的内容为提示框显示的内容。提示框需要使用到 jQuery , 在指定的元素上调用 tooltip() 方法。效果为当鼠标聚焦到某一指定位置,自动出现一个气泡框显示提示内容。

弹出框:通过向元素添加 data-toggle="popover" 来创建弹出框,<a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框内容">多次点我</a>,title引号中为标题,data-content引号中为内容。弹出框需要使用到 jQuery , 在指定的元素上调用 popover() 方法。效果为当鼠标点击某一指定位置,自动弹出一文本框显示内容。


主要代码:

<div class="container">
  <h3>弹出框实例</h3>
  <a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框内容">多次点我多次点我</a>
</div>
<br>
<script>$(document).ready(function(){$('[data-toggle="popover"]').popover();})</script>
<div class="container">
  <h3>提示框实例</h3><br>
  <a href="#" data-toggle="tooltip" title="我是提示内容!">鼠标移动到我这</a>
</div>
<script>$(document).ready(function(){$('[data-toggle="tooltip"]').tooltip();});</script>

2.滚动监听

相关说明:为想要监听的元素(通常是 body)添加<data-spy="scroll">属性,然后添加data-target属性,它的值为导航栏上id或class的值,这样做是为了联系可滚动区域。

滚动区域中<div id="section1">与导航栏上的链接选项<a href="#section1">相匹配。可选项data-offset 属性用于计算滚动区域内与导航栏相匹配的元素距离顶部的像素(默认为10px)。


主要代码:

<style>body {
      position: relative; 
  }</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">  
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#section1">Section 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section2">Section 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section3">Section 3</a>
    </li>
  </ul>
</nav>
<div id="section1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 1</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! </p>
</div>

3.小工具

Bootstrap4里面还包含了许多css小样式,例如:边框、边框颜色、圆角设置、浮动、响应式浮动、居中对齐、宽度、高度等。

更多详细设置查看链接:http://www.runoob.com/bootstrap4/bootstrap4-utilities.html


原文链接:加载失败,请重新获取