Bootstrap4 教程

Bootstrap4 创建一个网页

阅读(482)

接下来我们通过 Bootstrap4 来创建一个简单的响应式网页。 在学习之前我们可以先看下效果:http://demo.runoops.com/sources/bootstrap4/makeawebsite.html

Bootstrap4 多媒体对象

阅读(464)

Bootstrap 提供了很好的方式来处理多媒体对象(图片或视频)和内容的布局。应用场景有博客评论、微博等: 基础多媒体对象 要创建一个多媒体对象,可以在容器元素上添加 .media 类,然后将多媒体内容放到子容器上,子容器需要添加 .me...

Bootstrap4 Flex(弹性)布局

阅读(438)

Bootstrap4 通过 flex 类来控制页面的布局。 弹性盒子(flexbox) Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局,而不是使用浮动来布局。 弹性盒子是 CS...

Bootstrap4 小工具

阅读(515)

Bootstrap4 提供了一些小工具,可以让我们不用写 CSS 代码就能实现想要的效果。 边框 使用 border 类可以添加或移除边框: 边框颜色 Bootstrap4 提供了一些类来设置边框颜色: 边框圆角设置 使...

Bootstrap4 滚动监听(Scrollspy)

阅读(466)

滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。 如何创建滚动监听 以下实例演示了如何创建滚动监听: 实例解析 向您想要监听的元素(通常是 body)添加&nbs...

Bootstrap4 弹出框

阅读(430)

弹出框控件类似于提示框,它在鼠标点击到元素后显示,与提示框不同的是它可以显示更多的内容。 如何创建弹出框 通过向元素添加 data-toggle="popover" 来来创建弹出框。 title 属性的内容为弹...

Bootstrap4 提示框

阅读(412)

提示框是一个小小的弹窗,在鼠标移动到元素上显示,鼠标移到元素外就消失。 如何创建提示框 通过向元素添加 data-toggle="tooltip" 来来创建提示框。 title 属性的内容为提示框显示的内容: ...

Bootstrap4 模态框

阅读(407)

模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。 如何创建模态框 以下实例创建了一个简单的模态框效果 : 模态框尺寸 我们可以通过添加&nb...

Bootstrap4 轮播

阅读(434)

如何创建轮播 以下实例创建了一个简单的图片轮播效果 : 轮播图片上添加描述 在每个 <div class="carousel-item"> 内添加 <div class="carousel-c...

Bootstrap4 自定义表单

阅读(481)

Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。 自定义复选框 如果要自定义一个复选框,可以设置 <div> 为父元素,类为 .custom-control 和&nb...