代码基本网页元素如何使用Bootstrap代码基本网页元素 - 傻瓜

除了纯布局，Bootstrap还可以创建几乎每个网站上的网页组件。这里的想法与使用布局时相同 - 不是每次通过设计自己的按钮或工具栏来重新创建轮子，最好使用已经在多个浏览器和设备上测试过的预构建代码。以下示例显示如何快速创建常用Web组件。

<！ --1 - >

设计按钮

按钮是许多网页上的基本元素，但通常可能难以设置和样式。如这里所示，按钮可以有各种类型和大小。

用于创建按钮的引导代码

属性

类别前缀

描述	按钮类型	btn-defaultbtn-primarybtn-successbtn-danger
<！带有悬停效果的蓝色按钮	悬停效果的绿色按钮	悬停效果的红色按钮 按钮尺寸 btn-lgbtn​​-defaultbtn-sm 大按钮大小 默认按钮大小
小按钮大小	要创建按钮，请输入以下HTML：	以 按钮 开始HTML元素。

在开始的<< 按钮>

1. 标签中包含 type =“button” 。
2. 包含class属性和 btn 类属性值，并根据所需的效果添加额外的类前缀。 要添加其他样式，请继续将 类
3. 前缀名称添加到HTML 类的 属性中。
4. <！以下代码将按钮类型和按钮尺寸组合在一起： 大主按钮 大默认按钮 默认成功按钮 默认默认按钮

小危险按钮

小的默认按钮

引导按钮的类型和尺寸。

检查附加的按钮类型，按钮大小和其他按钮选项。

使用工具栏

进行导航具有多个页面或视图的网页通常会有一个或多个工具栏来帮助用户进行导航。这里有一些工具栏选项。

导航工具栏的引导代码

属性

类别前缀

描述

工具栏类型

导航标签

nav-pills

标签导航工具栏	或实心按钮导航工具栏	工具栏按钮类型
下拉菜单	插入符号下拉菜单 按钮或选项卡作为下拉菜单	向下箭头下拉菜单图标 下拉菜单菜单项
要创建药片或实体按钮导航工具栏，请编写以下HTML：	使用 ul	元素开始无序列表。 在开始的 标记中，包含

class =“nav nav-pills”

1. 。 使用 标签创建按钮。在一个开始的
2. 标签中包含
   class =“active” ，以指定当鼠标悬停在按钮上时，主工具栏上的哪个标签应该显示为可视化突出显示。 要创建一个下拉菜单，请嵌套一个无序列表。使用类前缀
   • “下拉菜单”
   • ， “插入符号” 和
   • “下拉菜单”
   • “查看”更多“旁边的代码。 您可以使用 标记链接到下拉菜单中的其他网页。 以下代码使用Bootstrap创建工具栏： 时间轴 关于 照片

     朋友 更多

地点

• 运动
• 音乐
• 下拉菜单。

• 下拉式切换

  • 类和
  • 数据切换=“下拉式”
  • 属性和值一起工作，将下拉菜单添加到链接等元素。看看更多的工具栏选项。

添加图标

图标经常与按钮一起用于帮助传达某种类型的动作。例如，您的电子邮件程序可能使用带有垃圾桶图标的按钮来删除电子邮件。图标可以快速向用户传达建议的操作，无需太多解释。 这些图标被称为 字形， 和字形图标提供Bootstrap中使用的字形。 Bootstrap支持200多个字形，您可以使用

标签将其添加到按钮或工具栏。以下示例代码创建了三个带星号，回形针和垃圾桶标志符号的按钮。使用图标

星号

附加 垃圾桶 引导按钮。

在这里检查所有Bootstrap字形的名字。