📝 Bootstrap教程

418篇技术文档
  Bootstrap-按钮下拉菜单

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

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

  Bootstrap-输入组

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

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

  Bootstrap-导航元素

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

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

  Bootstrap-导航栏

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

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

  Bootstrap-面包屑

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

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

  Bootstrap-分页

📅  最后修改于: 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...

  Bootstrap-标签

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

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

  Bootstrap-徽章

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

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

  Bootstrap-Jumbotron

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

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

  Bootstrap-页面标题

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

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

  Bootstrap-缩略图

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

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

  Bootstrap-警报

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

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

  Bootstrap-进度条

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

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

  Bootstrap-媒体对象

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

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

  Bootstrap-列表组

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

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