一个免费的web快速开发框架：Foundation，20大组件，拿来即用

最新推荐文章于 2025-04-29 07:00:00 发布

道-闇影

最新推荐文章于 2025-04-29 07:00:00 发布

阅读量760

点赞数

文章标签： web开发框架 html

本文链接：https://blog.youkuaiyun.com/qq_41200768/article/details/121547040

版权

本文介绍了Foundation这一免费的Web快速开发框架，详细列举了包括文本、表格、按钮、图标等在内的20个常用组件，并展示了各组件的实际效果和源代码，旨在帮助开发者实现高效编码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生编码确实酸爽，但用个框架，不香吗？

组件一览

文本
表格
按钮
按钮组
图标
标签
提醒框
进度条
面板
图片、缩略图
折叠列表
普通列表
选项卡切换
分页
导航（顶部导航、侧边导航、滑动导航、麦哲伦导航）
表单
开关
滑块
提示框
模态框
栅格布局

效果一览

直接download下面的代码就可以了！

对应源代码一览

helloworld.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/foundation/5.5.3/css/foundation.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/foundation/5.5.3/js/foundation.min.js"></script>
    <script src="https://cdn.staticfile.org/foundation/5.5.3/js/vendor/modernizr.js"></script>
    <!-- fundation icon -->
    <link rel="stylesheet" href="http://static.runoob.com/assets/foundation-icons/foundation-icons.css">
</head>
<body>
    <!-- Foundation:
      1.封装度更高
      2.使用更加快捷 -->


    <h1>1.文本</h1>
    <hr>
    <h1>h1</h1>
    <h6>h6</h6>
    <h1 class="subheader">h1 subheader</h1>
    <h6 class="subheader">h6 subheader</h6>
    <small>small</small>
    <a href="#">a</a>
    <p>
        <abbr title="Hello world">hw</abbr>
    </p>
    <blockquote>
        <p>blockquote-title</p>
        <cite>blockquote-cite</cite>
    </blockquote>

    <dl>
        <dt>AAA</dt>
        <dd>aaa</dd>
        <dt>BBB</dt>
        <dd>bbb</dd>
    </dl>

    <p>
        <code>print("hello world")</code>
    </p>

    <p>
        <kbd>ctrl+p</kbd>
    </p>

    <hr>
    <h1>2.表格</h1>
    <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Password</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1001</td>
            <td>zhangsan</td>
            <td>111</td>
          </tr>
          <tr>
            <td>1002</td>
            <td>lisi</td>
            <td>222</td>
          </tr>
        </tbody>
      </table>

      <br><br>
      <div style="overflow-x:hidden">
        <table>
            <thead>
              <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Password</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1001</td>
                <td>zhangsan</td>
                <td>111</td>
              </tr>
              <tr>
                <td>1002</td>
                <td>lisi</td>
                <td>222</td>
              </tr>
            </tbody>
          </table>
      </div>
      <hr>

      <h1>3.按钮</h1>
      <hr>
    <button type="button" class="button">Default</button>
    <button type="button" class="button secondary">Secondary</button>
    <button type="button" class="button success">Success</button>
    <button type="button" class="button info">Info</button>
    <button type="button" class="button warning">Warning</button>
    <button type="button" class="button alert">Alert</button>
    <br>
    <a href="#" class="button info" role="button">Link Button</a>
    <button type="button" class="button info">Button</button>
    <input type="button" class="button info" value="Input Button">
    <input type="submit" class="button info" value="Submit Button">
    <br>
    <button type="button" class="button large">Large</button>
    <button type="button" class="button">Default</button>
    <button type="button" class="button small">Small</button>
    <button type="button" class="button tiny">Tiny</button>
    <br>
    <button type="button" class="button">Default Button</button>
    <button type="button" class="button radius">Radius Button</button>
    <button type="button" class="button round">Round Small</button>
    <br>
    <button type="button" class="button">Default Button</button>
    <button type="button" class="button expand">Expanded Button</button>
    <br>
    <button type="button" class="button">Default Button</button>
    <button type="button" class="button disabled">Disabled Button</button>
    <hr>
    <h1>4.按钮组</h1>
    <hr>
    <ul class="button-group">
        <li><button type="button" class="button">AAA</button></li>
        <li><button type="button" class="button">BBB</button></li>
        <li><button type="button" class="button">CCC</button></li>
    </ul>
    <br>
    <ul class="button-group stack">
        <li><button type="button" class="button">Apple</button></li>
        <li><button type="button" class="button">Samsung</button></li>
        <li><button type="button" class="button">Sony</button></li>
      </ul>
      <br>
      <ul class="button-group stack-for-small">
        <li><button type="button" class="button">Apple</button></li>
        <li><button type="button" class="button">Samsung</button></li>
        <li><button type="button" class="button">Sony</button></li>
      </ul>
      <br>
      <ul class="button-group radius">
        <li><button type="button" class="button">Apple</button></li>
        <li><button type="button" class="button">Samsung</button></li>
        <li><button type="button" class="button">Sony</button></li>
      </ul>
      <br>
      <ul class="button-group round">
        <li><button type="button" class="button">Apple</button></li>
        <li><button type="button" class="button">Samsung</button></li>
        <li><button type="button" class="button">Sony</button></li>
      </ul>
      <br>
      <ul class="button-group even-3">
        <li><button type="button" class="button">Apple</button></li>
        <li><button type="button" class="button">Samsung</button></li>
        <li><button type="button" class="button">Sony</button></li>
      </ul>
      
      <ul class="button-group even-5">
        <li><button type="button" class="button">Apple</button></li>
        <li><button type="button" class="button">Samsung</button></li>
        <li><button type="button" class="button">Sony</button></li>
        <li><button type="button" class="button">HTC</button></li>
        <li><button type="button" class="button">Huawei</button></li>
      </ul>

      <br>
      <!-- 下拉菜单按钮 -->
      <a href="#" data-dropdown="id01" class="button dropdown">下拉按钮</a>
      <ul id="id01" data-dropdown-content class="f-dropdown">
          <li><a href="#">Link1</a></li>
          <li><a href="#">Link2</a></li>
          <li><a href="#">Link3</a></li>
      </ul>
      <script>
          $(document).ready(function(){
     
              $(document).foundation();
          })
      </script>
      <br>
      <button class="button split">Split Button
        <span data-dropdown="id02"></span>
      </button>
      <ul id="id02" data-dropdown-content class="f-dropdown">
        <li><a href