📅  最后修改于: 2020-10-27 03:50:33        🧑  作者: Mango

本章将讨论如何使用Bootstrap类将下拉菜单添加到按钮。要向按钮添加下拉菜单，只需将按钮和下拉菜单包装在.btn-group中。您还可以使用<span class =“ caret”> </ span>来指示该按钮是下拉菜单。以下示例演示了基本的单按钮下拉列表-现场演示拆分按钮下拉菜单“拆分”按钮下拉菜单使用与下拉按钮相同的常规样式，但在下拉菜单中添加了主要操作。拆分按钮的左侧为主要操作，右侧...

📅  最后修改于: 2020-10-27 03:51:15        🧑  作者: Mango

本章介绍了Bootstrap支持的另一项功能，即输入组。输入组是扩展的表单控件。使用输入组，您可以轻松地在基于文本的输入中添加和添加文本或按钮。通过将前置和附加内容添加到输入字段，可以将公共元素添加到用户的输入中。例如，您可以添加美元符号，@作为Twitter用户名，或添加其他可能对于您的应用程序界面通用的符号。在.form-control之前或之后添加元素-用类.input-group将其包装在...

📅  最后修改于: 2020-10-27 03:51:50        🧑  作者: Mango

Bootstrap为样式化导航元素提供了一些不同的选项。它们都共享相同的标记和基类.nav。 Bootstrap还提供了一个帮助程序类，以共享标记和状态。交换修饰符类可在每种样式之间切换。表格导航或标签创建选项卡式导航菜单-从基本无序列表开始，其基类为.nav添加类.nav-tabs。以下示例演示了这一点-现场演示药丸导航基本药要将标签转变为药丸，请按照上述相同的步骤操作，请使用.nav-pill...

📅  最后修改于: 2020-10-27 03:53:01        🧑  作者: Mango

导航栏是Bootstrap网站的主要功能之一。导航栏是响应式“元”组件，用作您的应用程序或站点的导航标题。导航栏在移动视图中折叠，并随着可用视口宽度的增加而变为水平。导航栏的核心是网站名称和基本导航的样式。默认导航栏创建默认导航栏-将.navbar，.navbar-default类添加到<nav>标记。在上面的元素中添加role =“ navigation”，以帮助辅助功能。将头文件类.navba...

📅  最后修改于: 2020-10-27 03:53:15        🧑  作者: Mango

面包屑是显示站点的基于层次结构的信息的好方法。对于博客，面包屑可以显示发布日期，类别或标签。它们指示当前页面在导航层次结构中的位置。Bootstrap中的面包屑只是带有.breadcrumb类的无序列表。分隔符由CSS(bootstrap.min.css)通过以下类自动添加-以下示例演示了面包屑-现场演示...

📅  最后修改于: 2020-10-27 03:53:44        🧑  作者: Mango

本章讨论Bootstrap支持的分页功能。分页是由Bootstrap处理的无序列表，就像其他许多界面元素一样。分页下表列出了Bootstrap提供的用于处理分页的类。ClassDescriptionSample code.paginationAdd this class to get the pagination on your page..disabled, .activeYou can cus...

📅  最后修改于: 2020-10-27 03:53:59        🧑  作者: Mango

本章介绍Bootstrap标签。标签非常适合为页面提供计数，提示或其他标记。使用class.label来显示标签，如以下示例所示：现场演示您可以使用修饰符类来修改标签的外观，例如，label-default，label-primary，label-success，label-info，label-warning，label-danger，如以下示例所示：现场演示...

📅  最后修改于: 2020-10-27 03:54:14        🧑  作者: Mango

本章将讨论有关Bootstrap徽章的信息。徽章类似于标签。主要区别是拐角更圆。徽章主要用于突出显示新的或未读的项目。要使用徽章，只需在链接，Bootstrap导航等中添加<span class =“ badge”>。以下示例演示了这一点-现场演示如果没有新的或未读的项目，只要其中没有内容，徽章将仅通过CSS的：empty选择器折叠。主动导航状态您可以将徽章置于药片和列表导航的活动状态。您可以通过...

📅  最后修改于: 2020-10-27 03:54:29        🧑  作者: Mango

本章将讨论Bootstrap支持的另一个功能Jumbotron。顾名思义，此组件可以有选择地增加标题的大小，并为目标网页内容增加很多边距。要使用Jumbotron-用.jumbotron类创建一个容器<div>。除了较大的<h1>之外，字体粗细也减小为200px。以下示例演示了这一点-现场演示要获得全角且没有圆角的巨型飞船，请在所有.container类之外使用.jumbotron类，而在其中添加...

📅  最后修改于: 2020-10-27 03:54:42        🧑  作者: Mango

页面标题是一个不错的小功能，可以在页面标题周围添加适当的间距。这在网页上可能特别有用，在该网页上您可能有多个帖子标题，并且需要一种为每个帖子标题添加区别的方法。要使用页面页眉，请将您的标题包装在带有.page-header类的<div>中-现场演示...

📅  最后修改于: 2020-10-27 03:55:07        🧑  作者: Mango

本章讨论有关Bootstrap缩略图的信息。许多站点都需要一种在网格中布置图像，视频，文本等的方式，Bootstrap提供了一种使用缩略图实现此目的的简便方法。使用Bootstrap创建缩略图-在图像周围添加带有.thumbnail类的<a>标记。这将添加四个填充像素和一个灰色边框。悬停时，动画发光会勾勒出图像轮廓。以下示例演示了默认缩略图-现场演示添加自定义内容现在我们有了基本的缩略图，可以在缩...

📅  最后修改于: 2020-10-27 03:55:27        🧑  作者: Mango

本章将讨论有关警报以及Bootstrap为警报提供的类。警报提供了一种样式化给用户的消息。它们为典型的用户操作提供上下文反馈消息。您可以添加可选的关闭图标以发出警报。对于内联解雇，请使用Alerts jQuery插件。您可以通过创建包装器<div>并添加.alert类和四个上下文类之一(例如.alert-success，.alert-info，.alert-warning，.alert-dange...

📅  最后修改于: 2020-10-27 03:55:57        🧑  作者: Mango

本章讨论有关Bootstrap进度条的信息。进度条的目的是为了表明资产正在加载中，正在进行中，或者正在对页面上的元素进行任何操作。进度条使用CSS3过渡和动画来实现其某些效果。这些功能在Internet Explorer 9及更低版本或Firefox的较低版本中不受支持。 Opera 12不支持动画。默认进度条创建一个基本的进度条-添加带有.progress类的<div>。接下来，在上面的<div...

📅  最后修改于: 2020-10-27 03:56:27        🧑  作者: Mango

本章讨论媒体对象。这些是抽象的对象样式，用于构建各种类型的组件(例如博客评论，推文等)，这些组件在文本内容旁边具有左对齐或右对齐的图像。媒体对象的目的是使用于开发这些信息块的代码大大缩短。媒体对象的目标(轻标记，易于扩展)是通过将类应用于一些简单标记来实现的。媒体对象有两种形式-.media-此类允许将媒体对象(图像，视频和音频)浮动到内容块的左侧或右侧。.media-list-如果要准备一个列表...

📅  最后修改于: 2020-10-27 03:56:54        🧑  作者: Mango

列表组组件的目的是在列表中呈现复杂的自定义内容。获取基本列表组-将类.list-group添加到元素<ul>中。将类.list-group-item添加到<li>。以下示例演示了这一点-现场演示将徽章添加到列表组我们可以将badges组件添加到任何列表组项，它将自动位于右侧。只需在<li>元素内添加<span class =“ badge”>。以下示例演示了这一点-现场演示链接列表组项目通过使用锚...