欢迎您的光临,本博所发布之文章皆为作者亲测通过,如有错误,欢迎通过各种方式指正。

教程  Bootstrap学习(十)--Bootstrap 布局组件1(字体、下拉菜单、按钮)

H框架 本站 320 0评论

一、Bootstrap 字体图标(Glyphicons)


什么是字体图标?

字体图标是在 Web 项目中使用的图标字体。虽然,Glyphicons Halflings 需要商业许可,但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。


获取字体图标

我们已经在 环境安装 章节下载了 Bootstrap 3.x 版本,并理解了它的目录结构。在 fonts 文件夹内可以找到字体图标,它包含了下列这些文件:

glyphicons-halflings-regular.eot

glyphicons-halflings-regular.svg

glyphicons-halflings-regular.ttf

glyphicons-halflings-regular.woff

相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css 和 bootstrap-min.css 文件上。


用法

如需使用图标,只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。

<span class="glyphicon glyphicon-search"></span>


实例:

<p>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-sort-by-attributes"></span>
    </button>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
    </button>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-sort-by-order"></span>
    </button>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-sort-by-order-alt"></span>
    </button>
</p>
<button type="button" class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-default btn-sm">
    <span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-default btn-xs">
    <span class="glyphicon glyphicon-user"></span> User
</button>

效果:

111.jpg


出于性能的考虑,所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意,为了设置正确的内补(padding),务必在图标和文本之间添加一个空格。

·不要和其他组件混合使用

图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span> 标签,并将图标类应用到这个 <span> 标签上。

·只对内容为空的元素起作用

图标类只能应用在不包含任何文本内容或子元素的元素上。

·改变图标字体文件的位置

Bootstrap 假定所有的图标字体文件全部位于 ../fonts/ 目录内,相对于预编译版 CSS 文件的目录。如果你修改了图标字体文件的位置,那么,你需要通过下面列出的任何一种方式来更新 CSS 文件:

··在 Less 源码文件中修改 @icon-font-path 和/或 @icon-font-name 变量。

··利用 Less 编译器提供的 相对 URL 地址参数。

··修改经过编译的 CSS 文件中的 url() 路径。

根据你自身的情况选择一种方式即可。


图标的可访问性

现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免 屏幕识读设备抓取非故意的和可能产生混淆的输出内容(尤其是当图标纯粹作为装饰用途时),我们为这些图标设置了 aria-hidden="true" 属性。


如果你使用图标是为了表达某些含义(不仅仅是为了装饰用),请确保你所要表达的意思能够通过被辅助设备识别,例如,包含额外的内容并通过 .sr-only 类让其在视觉上表现出隐藏的效果。


如果你所创建的组件不包含任何文本内容(例如, <button> 内只包含了一个图标),你应当提供其他的内容来表示这个控件的意图,这样就能让使用辅助设备的用户知道其作用了。这种情况下,你可以为控件添加 aria-label 属性。

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>


定制字体图标

我们已经看到如何使用字体图标,接下来我们看看如何定制字体图标。


我们将以上面的实例开始,并通过改变字体尺寸、颜色和应用文本阴影来进行定制图标。


下面是开始的代码:

<button type="button" class="btn btn-primary btn-lg">
  <span class="glyphicon glyphicon-user"></span> User
</button>

效果如下所示:

222.jpg


在线定制字体图标:https://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm 


二、Bootstrap 下拉菜单(Dropdowns)


下拉菜单是可切换的,是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现。

如需使用下拉菜单,只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单:


实例

<div class="dropdown">  //通过为下拉菜单的父元素设置 .dropup 类,可以让菜单向上弹出(默认是向下弹出的)。
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
        </li>
    </ul>
</div>

效果:

3333.jpg


对齐

B默认情况下,下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">

  ...

</ul>


标题

您可以使用 class dropdown-header 向下拉菜单的标签区域添加标题。下面的实例演示了这点:

实例

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation" class="dropdown-header">下拉菜单标题</li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation" class="dropdown-header">下拉菜单标题</li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
        </li>
    </ul>
</div>


效果:

444.jpg


更多实例

描述实例
.dropdown指定下拉菜单,下拉菜单都包裹在 .dropdown 里尝试一下
.dropdown-menu创建下拉菜单尝试一下
.dropdown-menu-right下拉菜单右对齐尝试一下
.dropdown-header下拉菜单中添加标题尝试一下
.dropup指定向上弹出的下拉菜单尝试一下
.disabled下拉菜单中的禁用项尝试一下
.divider下拉菜单中的分割线尝试一下


三、Bootstrap 按钮组


按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时,这就显得非常有用。您可以通过 Bootstrap 按钮(Button) 插件 添加可选的 JavaScript 单选框和复选框样式行为。

下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class:

Class描述代码示例
.btn-group该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。
<div class="btn-group">
  <button type="button" class="btn btn-default">Button1</button>
   <button type="button" class="btn btn-default">Button2</button>
</div>
.btn-toolbar该 class 有助于把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中,一般获得更复杂的组件。
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">...</div>
  <div class="btn-group">...</div>
</div>
.btn-group-lg, .btn-group-sm, .btn-group-xs这些 class 可应用到整个按钮组的大小调整,而不需要对每个按钮进行大小调整。
<div class="btn-group btn-group-lg">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>
.btn-group-vertical该 class 让一组按钮垂直堆叠显示,而不是水平堆叠显示。
<div class="btn-group-vertical">
  ...
</div>

· 按钮组中的工具提示和弹出框需要特别的设置

当为 .btn-group 中的元素应用工具提示或弹出框时,必须指定 container: 'body' 选项,这样可以避免不必要的副作用(例如工具提示或弹出框触发时,会让页面元素变宽和/或失去圆角)。


· 确保设置正确的 role 属性并提供一个 label 标签

为了向使用辅助技术 - 如屏幕阅读器 - 的用户正确传达一正确的按钮分组,需要提供一个合适的 role 属性。对于按钮组合,应该是 role="group",对于toolbar(工具栏)应该是 role="toolbar"。


一个例外是按钮组合只包含一个单一的控制元素或一个下拉菜单(比如实际情况,<button> 元素组成的两端对齐排列的按钮组 )或下拉菜单。


此外,按钮组和工具栏应给定一个明确的label标签,尽管设置了正确的 role 属性,但是大多数辅助技术将不会正确的识读他们。在这里提供的实例中,我们使用 aria-label,但是, aria-labelledby 也可以使用。


1.基本的按钮组

下面的实例演示了上面表格中讨论到的 class .btn-group 的使用:

实例

<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <button type="button" class="btn btn-default">按钮 3</button>
</div>

效果:

555.jpg


2.按钮工具栏

下面的实例演示了上面表格中讨论到的 class .btn-toolbar 的使用:

实例

<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <button type="button" class="btn btn-default">按钮 3</button>
 </div>
<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 4</button>
    <button type="button" class="btn btn-default">按钮 5</button>
    <button type="button" class="btn btn-default">按钮 6</button>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 7</button>
    <button type="button" class="btn btn-default">按钮 8</button>
    <button type="button" class="btn btn-default">按钮 9</button>
</div>
</div>

效果:

666.jpg


3.按钮的大小

只要给 .btn-group 加上 .btn-group-* 类,就省去为按钮组中的每个按钮都赋予尺寸类了,如果包含了多个按钮组时也适用。

实例:

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

效果:

777.jpg


4.嵌套

您可以在一个按钮组内嵌套另一个按钮组,即,在一个 .btn-group 内嵌套另一个 .btn-group 。当您想让下拉菜单与一系列按钮组合使用时,就会用到这个。

实例

<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        下拉
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">下拉链接 1</a></li>
        <li><a href="#">下拉链接 2</a></li>
    </ul>
    </div>
</div>

效果:

888.jpg


5.垂直的按钮组

下面的实例演示了上面表格中讨论到的 class .btn-group-vertical 的使用:

实例

<div class="btn-group-vertical">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <div class="btn-group-vertical">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        下拉
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">下拉链接 1</a></li>
        <li><a href="#">下拉链接 2</a></li>
    </ul>
    </div>
</div>

效果:

999.jpg


笔记:

如果同时使用 btn-group 和 btn-group-vertical ,你会发现,不管你在 btn-group 样式的按钮前面设置了多少个 btn-group-vertical 样式的按钮, btn-group 的优先级总会高于 btn-group-vertical ,换句话说,就是 btn-group 的内容会先显示, btn-group-vertical 的内容再显示。

这个主要是由外层的导致的 <div class="btn-group" role="toolbar">........</div> 导致的,如果要按钮组一垂直显示在前面只需把 <div class="btn-group" role="toolbar">......</div> 给删掉即可。或者希望能按照顺序显示,只需要在btn-group-vertical 类前,加多一个btn-group类,就可以了。













字体图标列表:

https://v3.bootcss.com/components/

https://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm











转载请注明: ITTXX.CN--分享互联网 » Bootstrap学习(十)--Bootstrap 布局组件1(字体、下拉菜单、按钮)

最后更新:2022-03-02 19:11:42

赞 (0) or 分享 ()
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽