【笔记】《Bootstrap实战》——第5章 电子商务网站

这一生的挚爱 提交于 2020-04-15 15:05:11

【推荐阅读】微服务还能火多久?>>>


  • 构建了公司网站之后,接下来就可以考虑设计一个在线商店了。
  • 此次的设计以上一章的设计为基础, 只是添加了一个包含如下元素的新页面:
    • 包含商品小图、标题和说明的产品网格;
    • 位于左侧的变懒,用于按类别、品牌等筛选商品;
    • 方便用户导航的面包屑和分页链接。
  • 完成后的设计在大、中、小屏幕中的效果应该如下图所示:

image

  • 在超小屏幕上,希望页面的布局变成如下所示:

image

  • Bootstrap 为完成此次设计提供了很好起点,在此基础上,要使用LESS完成调整工作。

一、商品页的标记

  • 本章相对第四章新增products.html标记中的 head 、页头、导航条元素都和第 4章一样。不一样的地方在 main role="main"元素中,这个元素中包含的新内容按先后顺序是:
    • 用无序列表生成的面包屑导航链接;
    • 用 h1 表示的页面标题;
    • 一系列用于筛选商品的选项;
    • 九种商品,分别带有小图、标题、说明和按钮;
    • 用无序列表生成的分页链接,位于商品之下,站点页脚之上。
  • 接下来要完成的事:
    • 首先要应用 Bootstrap 内置的面包屑、页面标题和分页链接的样式,再对它们进行自定义。
    • 然后,要改进九个商品的布局,创造性地使用 Bootstrap的网格系统,让这些格子在不同断点切换时保持视觉上的整齐划一。
    • 最后,就是要给筛选选项添加样式,主要是增强它们的布局,再使用 Font Awesome图标作为复选框。

二、面包屑、页面标题和分页导航

  • 接下来,要把 Bootstrap的样式应用到面包屑、页面标题和分页导航,然后再对它们进行自定义

(1) 在编辑器中打开 products.html。

(2) 找到位于页面标题 h1 上方的无序列表,给 ul 标签添加类 breadcrumb ,然后给最后一个列表项添加类 active :

<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Parent Category</a></li>
<li class="active">Current Category</li>
</ul>

这两个类对应相关 Bootstrap的面包屑样式,相关文档请参考这里:https://v3.bootcss.com/components/#breadcrumbs 。

保存并刷新浏览器。应该能看到如下图所示的效果:

image

(3) 接下来自定义面包屑的设计,去掉浅灰色背景和多余的内边距。对于这个简单的调整,可以直接修改 boostrap 文件夹中的 breadcrumbs.less 文件, 同时注释掉不需要的行,这样可以留下修改的痕迹。

  • 把 padding 设置为 0 ,完全删除 background-color ,使用注释可以让以后知道在这里修改了什么:
.breadcrumb {
padding: 0; // 8px 15px; // edited
margin-bottom: @line-height-computed;
list-style: none;
// background-color: @breadcrumb-bg; // edited

image

(4) 下面是页面标题。Bootstrap的页面标题需要被嵌套在类为 page-header 的 div 元素中。

相关文档可以参考这里:https://v3.bootcss.com/components/#page-header 。

  • 按照文档来调整标记,为了利用 Bootstrap 给标题注释添加的样式,再在 small
    标签中添加一些文本内容:
<div class="page-header">
<h1>Product Category Name <small>with explanatory
text</small></h1>
</div>
  • 这样就会得到如下所示的结果:

image

(5) 保留标题带的内、外边距,删除下方边框。打开 bootstrap文件夹中的 type.less文件,搜索 .page-header 并把规则 border-bottom 注释掉:

.page-header {
// border-bottom: 1px solid @page-header-border-color;
}
  • 保存,刷新,就会看到更清爽的结果。更多的空白与整体设计保持了一致,如下图所示:

image

(6) 最后是分页链接。相关的标题就在关闭的 main 标签()稍微靠上一点。在这个标题之上,依次是 .container 、 .row 和 .products-grid 的关闭 div 标签:

            </div><!-- /.products-grid -->
        </div><!-- /.row -->
    </div><!-- /.container -->
</main>

Bootstrap中分页样式的文档在这里:https://v3.bootcss.com/components/#pagination 。

  • 要应用分页导航样式,只需把 class="pagination" 添加到关闭的 .products-grid标签之上的 ul 标签:
<ul class="pagination">
    <li><a href="#"><span class="fa fa-chevron-left"></span>
    Prev</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">Next <span class="fa fa-chevron-
    right"></span></a></li>
</ul>
  • 对于 Next和 Prev,原来的标记中已经应用了类为 a-chevron-lefta-chevron-right 的 span 标签,以使用 Font Awesome图标。 结果就是得到如下所示的屏幕截图:

image

(7) 下面让分页导航在网格下方居中。首先,把它包围在一个 div 标签中,给这个标签一个row 类以保证它清除上方内容,然后添加一个恰如其分的自定义类 pagination-wrap :

<div class="row pagination-wrap">
    <ul class="pagination">
        <li> ...
    </ul>
</div>

(8) 现在就要自己写样式让这个组件在它的父元素内居中。

  • 在第 4章中,使用了自定义的LESS文件 _page-contents.less可保存自定义样式。
  • 在此,创建一个更具体的文件来保存针对商品网格的样式。创建新文件 _products-grid.less,将其与其他自定义LESS文件保存在一起,然后加入以下样式:
.pagination-wrap {
    text-align: center;
}
  • 保存文件。

(9) 最后把新文件添加到 LESS文件的导航列表。打开 less文件夹中的_main.less,在注释 // Other custom files 下面添加一行导入语句:

@import "_products-grid.less"; // added
  • 保存这个文件,然后编译为 CSS。
  • 刷新浏览器,应该看到分页导航居中了。

三、调整商品网格

  • 这一节要把商品网格调整到位。仔细看一看每个商品的标记,你会发现它们都有一个类: col-sm-4 :
<div class="product-item col-sm-4">
  • 这个类虽然起到了约束每个商品宽度的作用,但整个网格看起来仍然尽不如人意。
  • 主要问题是每个商品的高度不确定。因此,Bootstrap 在向左浮动所有商品时,后面的商品就有可能插入到前面的商品中。结果就是整个网格显得很乱,如下图所示。
  • 目前,在中大型视口中,第 4~7个商品由于高度不等,浮动后没有对齐。
  • 的任务就是要调整网格系统,让所有网格的视觉效果得到增强。调整之后,马上就解决布局的问题。

(1) 因为要写自定义的样式,所以还要用编辑器打开_products-grid.less。

(2) 下面写一些样式,调整图片宽度、字号、内边距和外边距,代码如下:

.product-item {
    padding-bottom: 32px;
    img {
        width: 100%;
    }
    h2 {
        font-size: @font-size-large;
        line-height: 1.2;
        padding: 0 !important;
        margin-top: 6px;
        margin-bottom: 2px;
    }
    p {
        font-size: @font-size-small;
        line-height: 1.3;
        color: @gray;
    }
}
  • (3) 以上样式的作用如下:

    • 给每个商品底部添加一些内边距;
    • 把每个商品小图的宽度限制在商品区域内;
    • 把 h2 的字号减小到 @font-size-large ;
    • 把 p 的字号减小到 @font-size-small ;
    • 把 h2 的内边距减小为 0,使用 !important 保证覆盖在标准页面中应用的冲突规则;
    • 把 p 的字体颜色设置为 @gray 。
  • 保存新样式,编译为 CSS,再刷新浏览器。尽管此时的布局还不整齐,但整体效果已经大为改观

(4) 现在该来解决布局问题了。解决问题的关键是找到最高的商品。假设有一个指南,其中对每个商品使用什么图片和文字介绍都有规划。所有商品的小图都是标准大小,文字说明也不会比当前示例页面中的多。这样的话,就可以给所有商品都设置一个固定的高度,或者使用 em 或 ex 等更灵活的单位。在这个练习中,就使用 360px 的固定值,并把超出的部分隐藏起来。因为这些规则针对的是页面布局,所以要单独写一条规则,文件当然还是_products-grid.less:

.product-item {
height: 360px;
overflow: hidden;
}
  • 保存这个文件,编译为 CSS,然后刷新浏览器。你会发现布局问题瞬间得到了解决!
  • 结果如下图所示:

image

(5) 在此之后,就可以放心地使用 Bootstrap 的响应式分栏类,去调整不同视口的布局效果了。具体来说,希望当视口小和超小时,每行只显示两个商品;而当视口中等或较大时,每行显示三个商品。为实现这个效果,要找到并替换每个商品中的类,结果要变成如下所示:

<div class="product-item col-xs-6 col-md-4">
  • 替换成这两个类之后,每个商品在超小和小视口中将会是屏幕宽度的一半,而在中大视口中将切换成屏幕宽度的三分之一。
  • 保存,编辑并刷新浏览器。拖放浏览器窗口,变小再变大,看看商品动态变化的情况。
  • 以下是小和超小视口下的情景:

image

  • 超小视口下因为侧边栏的干扰,还是有显示问题,所以接下来调整侧边栏

四、侧边栏和筛选选项

  • 侧边栏和筛选选项就在商品标记的前面。在小、中、大视口中,侧边栏目前都位于左侧。
  • 目前侧边栏的样子如下所示:

image

  • 而在完成设计工作后,希望把 Clearance Sale做成一个超大按钮,把筛选选项排成两栏,而且每个选项前是复选框而非项目符号,如下图所示:

image

  • 下面先从基本的样式开始,把布局弄好。

1.基本布局

  • 先来调整字体、颜色、外边距和内边距。
  • 在_prod ucts-grid.less中添加如下规则:
.grid-options {
    .panel;
    .panel-default;
    padding-top: 12px;
    padding-bottom: 24px;
    > h2 {
        margin-top: 0;
        font-size: 1.5 * (@font-size-large);
        line-height: 1.2;
        color: @gray-dark;
    }
}
  • 上面的代码用途如下:
    • 给侧边栏应用 Bootstrap默认的 panel 样式(参见:https://v3.bootcss.com/components/#panels );
    • 给侧边栏添加上、下内边距,让新背景贯穿侧边栏内容区;
    • 调整 h2 标题的字号、行高和颜色。
  • 下一步来做 Clearance Sale按钮。

2.Clearance Sale按钮

  • 接下来把 Clearance Sale链接变成一个超大的吸引人的按钮。
  • 按照下面的说明调整标记:
    • 把链接的标题和段落都转换成按钮;
    • 添加自定义的按钮类 btn-feature ,这是在第 4章创建的,具有特殊的颜色——红色;
    • 给整个标签添加 Font Awesome图标,通过使用 Font Awesome内置的 icon-3x 类,将图标放大三倍。

要了解 Font Awesome 特殊尺寸类的更多信息,请参考相关文档:
http://www.fontawesome.com.cn/examples/#larger

  • 调整后的标记如下所示:
<a class="btn btn-feature choose-clearance" href="#">
<span class="icon fa fa-tag fa-3x"></span>
<h3>Clearance Sale</h3>
<p>View clearance items</p>
</a>
  • 效果立竿见影,向目标迈进了一大步:

image

  • 下面再细化,完成下列目标。

(1) 将 Clearance Sale显示为块级元素,使用 .center-block() 这个 Bootstrap的混入将其居中。

(2) 强制其宽度为包含栏的 92.5%。

(3) 添加上、下内边距。

(4) 覆盖 Bootstrap按钮的 white-space: nowrap 规则,让文本可以折行。

Bootstrap的white-space 规则是在 less/bootstrap/buttons.less 中定义的,关于这个属性的更多信息,大家可以参考 http://css-tricks.com/almanac/properties/w/whitespace/

(5) 将按钮设置为相对定位,以便对标签应用绝对定位。

(6) 调整标题和段落的字体、颜色和外边距。

(7) 把标签图标定位到右上角。

  • 以上目标通过下列规则就可以实现:
.choose-clearance {
    .center-block();
        width: 92.5%;
        padding-top: 20px;
        padding-bottom: 12px;
        white-space: normal;
        position: relative;
    h3 {
        font-weight: normal;
        color: #fff;
        padding-top: 4px;
        margin: 6px;
    }
    p {
        margin: 6px 20px;
        line-height: 1.2;
    }
    .icon {
        position: absolute;
        top: 0;
        right: 2px;
    }
}

结果就像下面屏幕截图一样:

image

接下来该轮到筛选商品的选项了。

3.选项列表

如果花点时间分析下在线商店 Amazon (https://www.amazon.com/)或者 Zappos (http://www.zappos.com/) 的商品筛选选项,会发现这些选项其实是链接列表,而且每个选项都被调整成了复选框的样子。也要把链接做成复选框的样式,用户只要选择就会勾选,另外还要调整它们以适应多样化的设备,包括平板电脑和智能手机。

Amazon:

image

Zappos :

image

  • PS:在 Amazon 和 Zappos 等电子商务网站上,筛选项与内容管理系统是关联的,网格中的商品会随着用户选择筛选项而动态变化。 Bootstrap 是一个前端设计框架,不是内容管理系统。因此,这个示例做不到动态筛选商品。但 这个页面完成后,是完全可以在内容管理系统中使用的。

  • 先从每个列表的 h3 元素开始,调整它们的大小、行高、外边距和颜色:

.grid-options {
    > h3 {
        font-size: @font-size-large;
        line-height: 1.2;
        margin-top: 12px;
        color: @gray-dark;
    }
}

这里要使用 >h3 子选择符,因为不希望它应用到 h3 标签,特别是
不能应用到 Clearance Sale按钮中的 h3 标签。

  • 无序列表上,它们都有一个特殊的类,叫 options-list ,就用它作为选择符,确保只针对这些特殊的列表。
  • 首先去掉项目符号和内边距:
.grid-options {
    ..
    .options-list {
        list-style-type: none;
        padding-left: 0;
    }
  • 接下来是链接样式。(稍后还要给列表项添加样式,因此把这些样式包含在了嵌套的选择符中。)
...
    li {
        a {
            .btn;
            .btn-sm;
            padding-left: 0;
            padding-right: 0;
            color: @gray;
            &:hover,
            &:focus,
            &:active,
            .active & {
            color: @link-color;
            }
        }
    }
  • 以上规则的作用如下。
    • 利用 LESS通过 .btn 类加入了基本的按钮样式,包括显示 inline-block 链接和额外的内边距:
    • 因为没有添加其他按钮类,所以也没有出现背景颜色;
    • 通过添加基本的按钮样式,可以让用户更方便点击,使用手指或鼠标皆宜。
    • 再通过 .btn-sm 类引入相关样式,以减少内边距,并让字号比标准按钮再小一些
    • 接着删除无序列表的左和右内边距。
    • 再把链接文本的颜色改为 @gray 。
    • 最后,设置悬停、焦点和活动链接的颜色为 @link-color 。

要了解 Bootstrap的按钮类,请参见:https://v3.bootcss.com/css/#buttons

  • 现在保存、编译并刷新浏览器,看看结果。结果应该如下图所示:

  • 每个选项链接都有了内边距,字号和颜色也都合适了。

有读者可能奇怪为什么我要在这里借用按钮的 .btn 和 .btn-sm 类,而不是直接把这两个类写进标记。当然也可以那么做,但考虑到链接的数量那么多,我想还是通过 CSS来应用样式更便捷。

  • 好了,下一步是给选项链接添加复选框。

4.为选项链接添加Font Awesome图标复选框

  • 本节,将使用 Font Awesome图标在选项链接左侧添加复选框。但不在标记中添加,而是在 LESS 中添加,因为更快捷。然后更进一步,加入另一个 Font Awesome图标,以表示悬停、聚焦和活动状态下勾选的复选框。
  • 通过 LESS添加图标需要从三个文件中取得 Font Awesome样式。首先,从 font-awesome文件夹的core.less中获得基本的样式。在这个文件中,可以看到以下重要的样式:
.@{fa-css-prefix} {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
  • 以上样式是所有 Font Awesome图标样式的基础,包括作为字体的 Font Awesome 图标,以此为基础可以进一步加强相应的样式。
    对现在的需求来说,不需要选择符也不需要花括号,只需要其中的规则。要把这些样式应用给选项链接。最重要的,要使用 :before伪元素,因为可以确保结果最佳。

要了解更多 CSS2.1 :before 伪元素的信息,请参考这篇文章:
http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/ 。

  • 从 core.less中复制上面的规则(不包括选择符),粘贴到_products-grid.less 文件中,嵌套如下:
.grid-options {
    ...
    li {
        ...
        a {
            ...
            &:before {
                // from font-awesome/core.less
                display: inline-block;
                font-family: FontAwesome;
                font-style: normal;
                font-weight: normal;
                line-height: 1;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
  • 这些规则为下一步打下了基础。下一步就可以指定使用哪个 Font Awesome图标了。浏览这个页面:http://www.fontawesome.com.cn/faicons/ ,会发现空复选框的图标和类名:

image

  • 这个图标的 LESS规则可以在 font-awesome文件夹的 icons.less文件里找到。打开该文件,搜索字符串 }-square-o (包括右花括号可以减少匹配项,从而缩小范围),可以看到下面这一行:
.@{fa-css-prefix}-square-o:before { content: @fa-var-square-o; }
  • 对于前面这一行,只需要 content: @fa-var-square-o 。把它复制粘贴到之前&:before 选择符中规则的后面:
li {
    ...
    a {
        ...
        &:before {
            ...
            content: @fa-var-square-o;
  • 最后,想取得另一些 Font Awesome 样式,为图标设置固定的宽度,避免图标在切换时出现位移。这些样式可以在 font-awesome 文件夹的 fixed-width.less 文件中找到。复制下面这两行,同样粘贴到 &:before 选择符中:
width: (18em / 14);
text-align: center;
  • 添加上面的样式后,编译它们为 CSS并刷新浏览器。应该看到下图所示的复选框:接下来,以同样的方式添加选择符和规则,把 Font Awesome复选框图标的勾选版应用给链接的悬停、焦点和活动状态:
li {
    ...
    a {
        &:before {
            ...
            content: @fa-var-square-o;
        }
        &:hover:before,
        &:focus:before,
        &:active:before,
        .active &:before {
            content: @fa-var-check-square-o;
        }
}
  • 保存文件,编译为 CSS,然后刷新浏览器。当鼠标悬停在某个链接上时,就会看到被勾选的复选框,如下图所示:

image

请注意,目前还没有办法强制某个链接停留在活动状态,因为没有内容管理系统支撑。但样式已经齐备,如果有了内容管理系统,就可以直接用了。

  • 接下来,考虑一下充分利用侧边栏的空间,让选项浮动起来。

5.使用LESS混入在栏中对齐选项

  • 上一节,使用 LESS实现了以往需要通过添加标记实现的功能。考虑到筛选项的数量很多,这样做效率最高。同样的思路也适用于对齐侧边栏中的选项。当然,如果使用 Bootstrap的 row 和栏类,通过调整标记也是可以的:
<ul class="options-list options-categories row">
<li class="col-xs-6"><a href="#">Option 1</a></li>
<li class="col-xs-6"><a href="#">Option 2</a></li>
...
  • 但有了 Bootstrap的混入,用几行 LESS代码可以就实现同样的效果。

(1) 首先给 .options-list 选择符应用 .make-row() 混入:

.options-list {
    .make-row();
    ...

这个混入加入的样式与在标记中添加 row 类加入的样式一样。但这里只需要一行代码。

(2) 然后使用 .make-xs-col() 混入给列表项应用分栏规则:

li {
    .make-xs-column(6);
  • 这样就跟给相关的 li 标签添加 col-xs-6 类的效果一样了。

(3) 添加前面两行之后,保存文件,编译为 CSS,再刷新浏览器。应该可以看到选项链接分成两栏了:

image

6.针对平板和手机调整选项列表布局

  • 要限制选项面板的宽度,让它在平板电脑中不至于太宽。
  • 目前来看,Clearance Sale按钮有点太宽了。在 480~768px下,选项列表相隔也太远了。
  • 相应的截图如下所示:

image

  • 其实只要给选项面板设置一个最大宽度就行了:
.grid-options {
    ...
    max-width: 480px;
  • 下面再调整选项列表,让它们在小视口中显示为三栏。使用 LESS,可以在适当的选择符中嵌套一个媒体查询,然后在其中添加一个用于调整的 .make-xs-column(4) 混入:
li {
    .make-xs-column(6);
    @media screen and (max-width: @screen-xs-max) {
    .make-xs-column(4);
}
  • 现在保存,编译,刷新浏览器,查看效果。但是可能会发现侧边栏靠左对齐的,右侧留白太多。而且商品网格的显示有问题每行只显示了一个商品。

image

  • 很明显,首先需要使侧边栏居中,使用 .center-block() 这个Bootstrap 的混入就可以了,代码如下:
.grid-options {
   ...
   .center-block();
  • 另外,商品的显示问题,调试发现是上一章中CSS选择器 div[role=“main”] [class*=“col-”]清除浮动造成的。

image

  • 所以,只需要不清楚浮动就可以了:
.product-item { 
  ...
  clear:none !important;
  ...
  • 现在再解决下一个问题:在单栏布局中隐藏筛选选项,只在需要时显示。

7.在手机上折叠选项面板

  • 现在,筛选项占据了相当多的垂直空间。这在小屏幕上是个问题,会把商品网格推到页面下方很远的地方。

image

  • 原因就是筛选项不必要地占据了大量空间。商品本身才是最应该首先显示的。既要让用户迅速看到商品,也可以在需要时打开筛选项。
  • 为此,需要使用 Bootstrap的折叠插件。下面几步讲解如何对选项面板使用折叠插件,同时添加一个扩展面板的按钮,并把折叠行为限定在窄视口中。

(1) 在编辑器中打开 products.html。

(2) 添加一个新的 div 标签,包装 Clearance Sale按钮和三个选项列表。给这个 div 添加一个特殊的类 collapse ,以及一个唯一的 ID,以便 JavaScript插件找到它,同时也添加一个同名的类:

<div id="options-panel" class="options-panel collapse">
    <a class="btn btn-feature choose-clearance" href="#">
    ...
    <h3>Categories</h3>
    <ul class="options-list options-categories">
        <li><a href="#">Option 10</a></li>
        ...
    </ul>
</div><!-- /#options-panel.collapse -->
  • Bootstrap的折叠JavaScript插件也是在响应式折叠导航条中使用的。
    这个插件也可以用于其他用途,具体可参考 Bootstrap 的文档:
    https://v3.bootcss.com/javascript/#collapse 。

(3) 保存文件,刷新浏览器。你会发现 Clearance Sale按钮和选项列表顿时从眼前消失了。只剩下选项面板上方的 h2 标题“Narrow your selection”了,如下图所示:

image

  • 现在需要一个切换按钮,在被点击时显示筛选项。

(4) 在这个还能看见的内容为“Narrow your selection”的 h2 中,添加一个 button 元素,
还有相应的属性:

<h2 class="clearfix">Narrow your selection
    <button type="button" class="options-panel-toggle btn btn-primary pull-right" data-toggle="collapse" data-target="#options-panel">
    <span class="icon fa fa-cog fa-2x"></span>
    </button>
</h2>
  • 下面来解释一下上面的标记:
    • 给 h2 添加的 clearfix 类可以确保它包含切换按钮,因为切换按钮是浮动到右边的(可以在 bootstrap文件夹的 utilities.less文件中找到 clearfix 类,在 mixins.less文件中找到生成它的混入);
    • 类 btn 和 btn-primary 会给新的按钮添加 Bootstrap的基本按钮样式,背景颜色为 @brand-primary ;
    • 类 pull-right 会把按钮浮动到右侧;
    • 在 button 元素中,放了一个 Font Awesome齿轮图标,使用 fa-2x 类放大到两倍。
  • 保存并刷新浏览器,可以看到下面的结果:

image

(5) 下面要写一些规则,在中大屏幕中隐藏切换按钮并展开选项面板。为此,可以在_products-grid.less中添加以下规则:

// Responsive adjustments
@media (min-width: @screen-sm-min) {
    .options-panel {
        display: block;
    }
    .options-panel-toggle {
        display: none;
    }
}
  • (6) 这些规则的作用如下:

    • 媒体查询保证只把规则应用到小中大视口;
    • 第一条规则抵消 collapse 类的作用,它默认是隐藏元素的;
    • 第二条规则隐藏切换按钮。
  • 保存并刷新,应该就能看到想要的结果了。

  • 在超小视口中,选项列表会折叠起来,但切换按钮可见:

image

  • 在小、中、大视口中,切换按钮隐藏,选项列表可见:

image
结束

发布了41 篇原创文章 · 获赞 90 · 访问量 2万+
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!