09 BootStrap - 随笔分类 - springsnow

bootstrap4（33）：实用工具常用样式清单（可查找）

摘要：1、容器和网格系统容器 container ：固定宽度，不同尺寸固定了不同的宽度 container-fluid： 100%宽度栅格系统 col-： =576px col-md- ： >=768px col-lg- ： >=992px col-xl- ： >=1200px 2、字体颜色及背景颜色字体 tex... 阅读全文

posted @ 2020-01-03 19:53 springsnow 阅读(560) 评论(0) 推荐(0) 编辑

Bootstrap4（32）：综合网页实例

摘要：接下来我们通过 Bootstrap4 来创建一个简单的响应式网页。在学习之前我们可以先看下效果：https://www.runoob.com/try/demo_source/bootstrap3-makewebsite.htm代码：我的第一个 Bootstrap 4 页面重置浏览器窗口大小查看效果！导航 ... 阅读全文

posted @ 2020-01-03 09:37 springsnow 阅读(2391) 评论(0) 推荐(0) 编辑

Bootstrap4（31）：实用工具

摘要：Bootstrap4 提供了一些小工具，可以让我们不用写 CSS 代码就能实现想要的效果。一、边框使用 border 类可以添加或移除边框: 尝试一下 »二、边框颜色Bootstrap4 提供了一些类来设置边框颜色: 尝试一下 »三、边框圆角设置使用rounded 类可以添加圆角边框: 尝试一下 »四、浮动.float-right 类用于设置元素右浮动， .flo... 阅读全文

posted @ 2020-01-02 21:28 springsnow 阅读(343) 评论(0) 推荐(0) 编辑

摘要：Bootstrap 4 通过 flex 类来控制页面的布局。一、弹性盒子(flexbox) ：.d-*-flex；.d-*-inline-flexBootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局，而不是使用浮动来布局。弹性盒子是 CSS3 的一种新的布局模式，更适合响应式的设计，如果你还不了解 flex，可以阅读我们的 CSS3 弹性... 阅读全文

posted @ 2020-01-02 20:12 springsnow 阅读(2078) 评论(0) 推荐(0) 编辑

Bootstrap4（29）：多媒体对象

摘要：Bootstrap 提供了很好的方式来处理多媒体对象（图片或视频）和内容的布局。应用场景有博客评论、微博等:一、基础多媒体对象要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果: 菜鸟教程学的不仅是技术，更是梦想！！！ ... 阅读全文

posted @ 2020-01-02 17:20 springsnow 阅读(368) 评论(0) 推荐(0) 编辑

Bootstrap4（28）：滚动监听(Scrollspy)

摘要：滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。一、如何创建滚动监听以下实例演示了如何创建滚动监听：向您想要监听的元素（通常是 body）添加 data-spy="scroll" 。然后添加 data-target 属性，它的值为导航栏的 id 或 class (.navbar)。这样就可以联系上可滚动区域。注意可滚动... 阅读全文

posted @ 2020-01-02 17:17 springsnow 阅读(680) 评论(0) 推荐(0) 编辑

Bootstrap4（27）：弹出框

摘要：弹出框控件类似于提示框，它在鼠标点击到元素后显示，与提示框不同的是它可以显示更多的内容。一、如何创建弹出框通过向元素添加 data-toggle="popover" 来来创建弹出框。title 属性的内容为弹出框的标题，data-content 属性显示了弹出框的文本内容：多次点我注意: 弹出框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 popover() 方法。以下实例可以... 阅读全文

posted @ 2020-01-02 17:04 springsnow 阅读(1073) 评论(0) 推荐(0) 编辑

Bootstrap4（26）：提示框

摘要：提示框是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。一、如何创建提示框通过向元素添加 data-toggle="tooltip" 来来创建提示框。title 属性的内容为提示框显示的内容：鼠标移动到我这注意: 提示框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 tooltip() 方法。以下实例可以在文档的任何地方使用提示框：$(document).ready... 阅读全文

posted @ 2020-01-02 16:57 springsnow 阅读(421) 评论(0) 推荐(0) 编辑

Bootstrap4（25）：模态框

摘要：模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。一、如何创建模态框以下实例创建了一个简单的模态框效果：按钮：用于打开模态框打开模态框模态框模态框头部模态框头部 ×... 阅读全文

posted @ 2020-01-02 16:49 springsnow 阅读(440) 评论(0) 推荐(0) 编辑

Bootstrap4（24）：轮播

摘要：轮播是一个循环的幻灯片：一、如何创建轮播以下实例创建了一个简单的图片轮播效果：指示符轮播图片左右切换按钮尝试一下 »二、轮播图片上添加描述 ... 阅读全文

posted @ 2020-01-02 16:33 springsnow 阅读(623) 评论(0) 推荐(0) 编辑

Bootstrap4（23）：自定义表单

摘要：Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。一、自定义复选框如果要自定义一个复选框，可以设置为父元素，类为 .custom-control 和 .custom-checkbox，复选框作为子元素放在该里头，然后复选框设置为 type="checkbox"，类为 .custom-control-input。复选框的文本使用 label 标签，标签使用 .custo... 阅读全文

posted @ 2020-01-02 16:26 springsnow 阅读(716) 评论(0) 推荐(0) 编辑

Bootstrap4（22）：输入框组

摘要：一、输入框前后添加信息我们可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。使用 .input-group-prepend 类可以在输入框的的前面添加文本信息， .input-group-append 类添加在输入框的后面。最后，我们还需要使用 .input-group-text 类来设置文本的样式。 @ ... 阅读全文

posted @ 2020-01-02 16:16 springsnow 阅读(447) 评论(0) 推荐(0) 编辑

Bootstrap4（21）：表单控件

摘要：Bootstrap4 支持以下表单控件：input textarea checkbox radio select一、Bootstrap InputBootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel... 阅读全文

posted @ 2020-01-02 16:03 springsnow 阅读(768) 评论(0) 推荐(0) 编辑

Bootstrap4（20）：表单

摘要：创建表单在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。表单元素 input, textarea, 和 select ，elements 在使用 .form-control 类的情况下，宽度都是设置为 100%。Bootstrap4 表单布局堆叠表单 (全屏宽度)：垂直方向内联表单：水平方向Boo... 阅读全文

posted @ 2020-01-02 14:32 springsnow 阅读(441) 评论(0) 推荐(0) 编辑

Bootstrap4（19）：面包屑导航（Breadcrumb）

摘要：面包屑导航是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置，是在用户界面中的一种导航辅助。Bootstrap 中的面包屑导航是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS（bootstrap.min.css）中的 ::before 和 content 来添加，下面所示的 class... 阅读全文

posted @ 2020-01-02 14:28 springsnow 阅读(942) 评论(0) 推荐(0) 编辑

Bootstrap4（18）：导航栏

摘要：一、导航栏导航栏一般放在页面的顶部。我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。导航栏上的选项可以使用元素并添加 class="navbar-nav" 类。然后在元素上添加 .nav-item 类，元素上使用 .nav-link 类: 小屏幕上水... 阅读全文

posted @ 2020-01-02 14:23 springsnow 阅读(3420) 评论(0) 推荐(0) 编辑

Bootstrap4（17）：导航

摘要：一、创建导航栏如果你想创建一个简单的水平导航栏，可以在元素上添加 .nav类，在每个选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类: Link Link Link Disabled 导航居中导航右对齐尝试一下 »三、垂直导航.flex-column 类用于创建... 阅读全文

posted @ 2020-01-02 11:19 springsnow 阅读(618) 评论(0) 推荐(0) 编辑

Bootstrap4（16）：折叠板

摘要：Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。折叠 Lorem ipsum dolor text.... 尝试一下 » 实例解析 .collapse 类用于指定一个折叠元素 (实例中的 ); 点击按钮后会在隐藏与显示之间切换。控制内容的隐藏与显示，需要在或元素上添加 data-toggle="collapse" 属性。 ... 阅读全文

posted @ 2020-01-02 10:47 springsnow 阅读(541) 评论(0) 推荐(0) 编辑

Bootstrap4（15）：下拉菜单

摘要：一、创建下拉菜单Bootstrap4 下拉菜单依赖于 popper.min.js。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。.dropdown 类用来指定一个下拉菜单。我们可以使用一个按钮或链接来打开下拉菜单，按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。元素上添加 .dropdown-menu 类来设置实际下拉菜单... 阅读全文

posted @ 2020-01-02 10:36 springsnow 阅读(762) 评论(0) 推荐(0) 编辑

Bootstrap4（14）：卡片

摘要：一、简单的卡片我们可以通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片，实例如下: 简单的卡片尝试一下 »Bootstrap4 的卡片类似 Bootstrap 3 中的面板、图片缩略图、well。二、头部和底部.card-header类用于创建卡片的头部样式， .card-footer 类用于创建卡片的底部样式：头部内容底部 ... 阅读全文

posted @ 2020-01-01 15:55 springsnow 阅读(1474) 评论(0) 推荐(0) 编辑

工作在浏览器上人-YangBobin

随笔分类 - 09 BootStrap