开关是在鼠标点击(手指敲击)下在 "On" 和 "Off" 状态下切换: 切换开关使用 <div class="switch"> 创建。 <div> 内添加带有唯一 id 的 <input type="checkbox"> , <label> 元素的 for 属性需要与 <input type="c ...
分类:
其他好文 时间:
2020-06-09 14:24:25
阅读次数:
52
在你想隐藏部分内容的显示时,可以使用折叠列表。 实例 <ul class="accordion" data-accordion> <li class="accordion-navigation"> <a href="#demo">Simple Collapsible</a> <div id="dem ...
分类:
其他好文 时间:
2020-06-09 12:51:17
阅读次数:
59
在 HTML 中,无序列表 (<ul>) 实例如下: <ul> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li></ul> 结果: List item List item List item Lis ...
分类:
其他好文 时间:
2020-06-09 12:47:45
阅读次数:
48
如果你的网页有很多内容,就需要使用分页功能。 要创建一个基础的分页功能需要在 <ul> 元素上加上 .pagination 类: 实例 <ul class="pagination"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li> ...
分类:
其他好文 时间:
2020-06-09 12:45:59
阅读次数:
55
选项卡导航可以很好的展示不同的内容,并可以对内容进行切换。 选项卡使用 <ul class="tabs" data-tab> 来创建, 各个选项使用 <li> 元素并加上 .tab-title 类来创建。 提示: 当前选中项可以使用 .active 类。 实例 <ul class="tabs" da ...
分类:
其他好文 时间:
2020-06-09 12:31:30
阅读次数:
71
按钮样式 Foundation 提供了 6 种按钮样式。 .button 类创建了一个蓝色的按钮并附有内边距。不同颜色按钮类为: .secondary, .success, .info, .warning 或 .alert: 实例 <button type="button" class="butto ...
分类:
其他好文 时间:
2020-06-08 14:59:43
阅读次数:
53
Foundation 的 <table> 元素样式为灰色斑马条纹且包含四个边框: 实例 <table> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>J ...
分类:
其他好文 时间:
2020-06-08 14:40:06
阅读次数:
57
什么是 Foundation? Foundation 是一个免费的前端框架,用于快速开发。 Foundation 包含了 HTML 和 CSS 的设计模板,提供多种 Web 上的 UI 组件,如表单、按钮、Tabs 等等。同时也提供了多种 JavaScript 插件。 Foundation 移动优先 ...
分类:
其他好文 时间:
2020-06-08 14:36:25
阅读次数:
58
Foundation5 教程 Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架。 Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。 Foundation 是一个以移动优先的流行框架。 Foundation 用 ...
分类:
其他好文 时间:
2020-06-08 14:30:25
阅读次数:
93
按钮组 Foundation 可以在同一行内创建一系列的按钮。 可以使用 <ul> 元素并添加 .button-group 类来创建按钮组: 实例 <ul class="button-group"> <li><button type="button" class="button">Apple</bu ...
分类:
其他好文 时间:
2020-06-08 14:30:01
阅读次数:
82