文章: 阅读:

Foundation 网格系统

Foundation 网格系统为 12 列。如果不需要 12 列，可以合并一些列，创建一些更大宽度的列。Foundation 的网格系统是响应式的。列会根据屏幕尺寸自动调整大小。在大尺寸屏幕上，可能是三列，小屏幕尺寸就可能是三个单列，按顺序排列。Foundation 网格系统有三个列。.small (手机端)、.medium (平板设备)、.large (电脑设备，笔记本，台式机)。
CSSFoundation

阅读全文 >>

Foundation CSS 样式

Foundation 使用浏览器默认字体大小 (font-size 为 100%)。对于大多数桌面设备的浏览器来说，字体大小默认为 16px。对于移动设备的浏览器，字体默认大小为 12px。默认的字体为 "Helvetica Neue"，line-height 默认为 1.5。这些设置是适用于 body 元素内的元素。此外，p 元素与底部的外边距 (margin-bottom) 为 1.25rem, line-height 为 1.6。
CSSFoundation

阅读全文 >>

Foundation 基础知识

Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架。Foundation 是一个易用、强大而且灵活的框架，用于构建基于任何设备上的 Web 应用。Foundation 是一个以移动优先的流行框架，可创建响应式网页。Foundation 包含了 HTML 和 CSS 的设计模板，提供多种 Web 上的 UI 组件，如表单、按钮、Tabs 等等。同时也提供了多种 JavaScript 插件。Foundation 已使用在 Facebook, eBay, Samsung, Amazon, Disney 等。
CSSFoundation

阅读全文 >>

Bootstrap4 多媒体对象

Bootstrap 提供了很好的方式来处理多媒体对象（图片或视频）和内容的布局。应用场景有博客评论、微博等。要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果。多媒体对象可以多个嵌套（一个多媒体对象中包含另外一个多媒体对象），要嵌套多媒体对象，可以把新的 .media 容器放到 .media-body 容器中。如果想将头像图片显示在右侧，可以在 .media-body 容器后添加图片。可以使用 align-self-* 相关类来设置多媒体对象的图片显示位置。
CSSBootstrap

阅读全文 >>

Bootstrap4 滚动监听

滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。向想要监听的元素（通常是 body）添加 data-spy="scroll"。然后添加 data-target 属性，它的值为导航栏的 id 或 class (.navbar)。这样就可以联系上可滚动区域。注意可滚动项元素上的 id（div id="section1"）必须匹配导航栏上的链接选项（a href="#section1")。可选项 data-offset 属性用于计算滚动位置时，距离顶部的偏移像素。默认为 10px。
CSSBootstrap

阅读全文 >>

Bootstrap4 弹出框

弹出框控件类似于提示框，它在鼠标点击到元素后显示，与提示框不同的是它可以显示更多的内容。通过向元素添加 data-toggle="popover" 来来创建弹出框。title 属性的内容为弹出框的标题，data-content 属性显示了弹出框的文本内容。弹出框要写在 jQuery 的初始化代码里，然后在指定的元素上调用 popover() 方法。默认情况下弹出框显示在元素右侧。可以使用 data-placement 属性来设定弹出框显示的方向 top, bottom, left 或 right。默认情况下，弹出框在再次点击指定元素后就会关闭，你可以使用 data-trigger="focus" 属性来设置在鼠标点击元素外部区域来关闭弹出框。
CSSBootstrap

阅读全文 >>

Bootstrap4 提示框

提示框是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。通过向元素添加 data-toggle="tooltip" 来来创建提示框。title 属性的内容为提示框显示的内容。提示框要写在 jQuery 的初始化代码里，然后在指定的元素上调用 tooltip() 方法。默认情况下提示框显示在元素上方。可以使用 data-placement 属性来设定提示框显示的方向 top, bottom, left 或 right。提示内容添加 HTML 标签，设置 data-html="true"，内容放在 title 标签里头。
CSSBootstrap

阅读全文 >>

Bootstrap4 模态框

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。可以通过添加 .modal-sm 类来创建一个小模态框，.modal-lg 类可以创建一个大模态框。尺寸类放在 div 元素的 .modal-dialog 类后。
CSSBootstrap

阅读全文 >>

Bootstrap4 轮播

轮播是一个循环的幻灯片。在每个 div class="carousel-item" 内添加 div class="carousel-caption" 来设置轮播图片的描述文本。.carousel 创建一个轮播。.carousel-indicators 为轮播添加一个指示符，就是轮播图底下的一个个小点，轮播的过程可以显示目前是第几张图。.carousel-inner 添加要切换的图片。.carousel-item 指定每个图片的内容。.carousel-control-prev 添加左侧的按钮，点击会返回上一张。.carousel-control-next 添加右侧按钮，点击会切换到下一张。
CSSBootstrap

阅读全文 >>

Bootstrap4 表单

Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。表单元素 input, textarea, 和 select elements 在使用 .form-control 类的情况下，宽度都是设置为 100%。Bootstrap4 表单布局，堆叠表单 (全屏宽度) - 垂直方向。内联表单 - 水平方向。Bootstrap 支持所有的 HTML5 输入类型 text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 以及 color。如果 input 的 type 属性未正确声明，输入框的样式将不会显示。
CSSBootstrap

阅读全文 >>

Bootstrap4 导航

如果想创建一个简单的水平导航栏，可以在 ul 元素上添加 .nav 类，在每个 li 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类。.justify-content-center 类设置导航居中显示，.justify-content-end 类设置导航右对齐。.flex-column 类用于创建垂直导航。使用 .nav-tabs 类可以将导航转化为选项卡。然后对于选中的选项使用 .active 类来标记。.nav-pills 类可以将导航项设置成胶囊形状。
CSSBootstrap

阅读全文 >>

Bootstrap4 折叠

Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。.collapse 类用于指定一个折叠元素 (实例中的 div); 点击按钮后会在隐藏与显示之间切换。控制内容的隐藏与显示，需要在 a 或 button 元素上添加 data-toggle="collapse" 属性。data-target="#id" 属性是对应折叠的内容。a 元素上你可以使用 href 属性来代替 data-target 属性。默认情况下折叠的内容是隐藏的，你可以添加 .show 类让内容默认显示。
CSSBootstrap

阅读全文 >>

Bootstrap4 下拉菜单

Bootstrap4 下拉菜单依赖于 popper.min.js。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线。.dropdown-header 类用于在下拉菜单中添加标题。.active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)。如果要禁用下拉菜单的选项，可以使用 .disabled 类。如果想让下拉菜单右对齐，可以在元素上的 .dropdown-menu 类后添加 .dropdown-menu-right 类。
CSSBootstrap

阅读全文 >>

Bootstrap4 卡片

Bootstrap4 的卡片类似 Bootstrap 3 中的面板、图片缩略图、well。可以通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片。.card-header 类用于创建卡片的头部样式，.card-footer 类用于创建卡片的底部样式。Bootstrap4 提供了多种卡片的背景颜色类 .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。可以在头部元素上使用 .card-title 类来设置卡片的标题 。.card-text 类用于设置卡片正文的内容。.card-link 类用于给链接设置颜色。
CSSBootstrap

阅读全文 >>

Bootstrap4 列表组

大部分基础列表组都是无序的。要创建列表组，可以在 ul 元素上添加 .list-group 类, 在 li 元素上添加 .list-group-item 类。通过添加 .active 类来设置激活状态的列表项。.disabled 类用于设置禁用的列表项。要创建一个链接的列表项，可以将 ul 替换为 div，a 替换 li。如果你想鼠标悬停显示灰色背景就添加.list-group-item-action 类。列表项目的颜色可以通过以下列来设置：.list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark 和 list-group-item-light。
CSSBootstrap

阅读全文 >>