创新互联Foundation教程:Foundation 按钮组

Foundation 按钮组


按钮组

Foundation 可以在同一行内创建一系列的按钮。

三河网站制作公司哪家好,找成都创新互联!从网页设计、网站建设、微信开发、APP开发、响应式网站设计等网站项目制作,到程序开发,运营维护。成都创新互联于2013年成立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联

可以使用

    元素并添加 .button-group 类来创建按钮组:

    实例

    <
    ul
    class=
    "button-group"
    >

     
    <
    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
    >

    尝试一下 »


    垂直按钮组

    垂直按钮组使用 .stack 类来创建。注意,按钮会跨越父元素的整个宽度:

    实例

    <
    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
    >

    尝试一下 »

    .stack-for-small 类用于小尺寸的屏幕,按钮有水平排列变为垂直排列:

    实例

    <
    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
    >

    尝试一下 »


    圆角按钮组

    按钮组中使用 .radius.round 类为按钮添加圆角效果:

    实例

    <
    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
    >

    <
    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
    >

    尝试一下 »


    均匀延展按钮组

    .even-num 类用于在按钮组中均匀的分配按钮的宽度并跨越父元素 100% 宽度。

    num 为按钮组中按钮的数量,从 1 到 8:

    实例

    <
    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
    >

    <
    ul
    class=
    "button-group even-8"
    >

     
    <
    li
    >
    <
    button
    type=
    "button"
    class=
    "button"
    >A
    <
    /button
    >
    <
    /li
    >

     
    <
    li
    >
    <
    button
    type=
    "button"
    class=
    "button"
    >B
    <
    /button
    >
    <
    /li
    >

     
    <
    li
    >
    <
    button
    type=
    "button"
    class=
    "button"
    >C
    <
    /button
    >
    <
    /li
    >

     
    <
    li
    >
    <
    button
    type=
    "button"
    class=
    "button"
    >D
    <
    /button
    >
    <
    /li
    >

     
    <
    li
    >
    <
    button
    type=
    "button"
    class=
    "button"
    >E
    <
    /button
    >
    <
    /li
    >

     
    <
    li
    >
    <
    button
    type=
    "button"
    class=
    "button"
    >F
    <
    /button
    >
    <
    /li
    >

     
    <
    li
    >
    <
    button
    type=
    "button"
    class=
    "button"
    >G
    <
    /button
    >
    <
    /li
    >

     
    <
    li
    >
    <
    button
    type=
    "button"
    class=
    "button"
    >H
    <
    /button
    >
    <
    /li
    >


    <
    /ul
    >

    尝试一下 »


    下拉菜单按钮

    下拉菜单按钮可以让用户选取设定好的值:

    实例




    <
    a
    href=
    "#"
    data-dropdown=
    "id01"
    class=
    "button dropdown"
    >Dropdown Button
    <
    /a
    >




    <
    ul
    id=
    "id01"
    data-dropdown-content class=
    "f-dropdown"
    >

     
    <
    li
    >
    <
    a
    href=
    "#"
    >Link 1
    <
    /a
    >
    <
    /li
    >

     
    <
    li
    >
    <
    a
    href=
    "#"
    >Link 2
    <
    /a
    >
    <
    /li
    >

     
    <
    li
    >
    <
    a
    href=
    "#"
    >Link 3
    <
    /a
    >
    <
    /li
    >


    <
    /ul
    >




    <
    script
    >

    $(document).ready(function() {

        $(document).foundation();

    })


    <
    /script
    >

    尝试一下 »

    实例解析

    .dropdown 类创建一个下拉菜单按钮。

    使用带有 data-dropdown="id" 属性的按钮或链接打开下拉菜单。

    id 值需要与下拉菜单的内容 (id01) 匹配。

      中添加 .f-dropdown 类和 data-dropdown-content 属性来创建下拉菜单的内容。

      最后初始化 Foundation JS。


      分割按钮

      我们也可以创建一个分割按钮的下拉菜单。只需要在按钮中添加 .split 类并使用 span 元素生成一个方向箭的按钮:

      实例

      <
      button
      class=
      "button split"
      >Split Button

       
      <
      span
      data-dropdown=
      "id01"
      >
      <
      /span
      >


      <
      /button
      >

      <
      ul
      id=
      "id01"
      data-dropdown-content class=
      "f-dropdown"
      >

       
      <
      li
      >
      <
      a
      href=
      "#"
      >Link 1
      <
      /a
      >
      <
      /li
      >

       
      <
      li
      >
      <
      a
      href=
      "#"
      >Link 2
      <
      /a
      >
      <
      /li
      >

       
      <
      li
      >
      <
      a
      href=
      "#"
      >Link 3
      <
      /a
      >
      <
      /li
      >


      <
      /ul
      >




      <
      script
      >

      $(document).ready(function() {

          $(document).foundation();

      })


      <
      /script
      >

      尝试一下 »

      文章标题:创新互联Foundation教程:Foundation 按钮组
      链接分享:http://www.shufengxianlan.com/qtweb/news33/205033.html

      网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

      广告

      声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联