📝 Bootstrap教程

418篇技术文档
  引导网格

📅  最后修改于: 2020-12-18 12:21:04        🧑  作者: Mango

引导网格维基百科说:“在图形设计中,网格是由一系列相交的直线(垂直,水平)线组成的结构(通常是二维的),用于构造内容。在print设计中,网格被广泛用于设计布局和内容结构。在网页设计中,使用HTML和CSS快速有效地创建一致的布局是一种非常有效的方法。”引导网格系统Bootstrap网格系统在整个页面上最多允许12列。您可以单独使用全部12列,也可以将这些列组合在一起以创建更宽的列。Bootstr...

  引导表

📅  最后修改于: 2020-12-18 12:22:34        🧑  作者: Mango

引导表我们可以通过使用不同的类来样式化来创建不同类型的Bootstrap表。Bootstrap基本表:基本的Bootstrap表具有浅色填充物,只有水平分隔物。.table类用于向表添加基本样式。例:Bootstrap条纹行表:.table-striped类用于将斑马条纹添加到表中:Bootstrap带边框表:.table-bordered类用于在表格和单元格的所有侧面添加边框:引导程序悬停行表:...

  引导表格

📅  最后修改于: 2020-12-18 12:23:42        🧑  作者: Mango

引导表格在Bootstrap中,存在三种类型的表单布局:垂直形式(默认)水平形式内联表格自举表格规则这3种表单布局有3条标准规则:始终使用<form role =“ form”>(有助于提高使用屏幕阅读器的用户的可访问性)在<div class =“ form-group”>中包装标签和表单控件(需要最佳间距)将类.form-control添加到所有文本<input>,<textarea>和<se...

  引导警报

📅  最后修改于: 2020-12-18 12:24:48        🧑  作者: Mango

引导警报引导警报用于提供创建预定义警报消息的简便方法。 Alert为您的消息添加了一种样式,以使其对用户更具吸引力。<div>元素中使用了四个类来发出警报。.alert成功.alert-info。警报警告.alert-danger引导警报示例Bootstrap4警报Bootstrap 4在Bootstrap 3教程中定义的Bootstrap Alert中添加了4个新警报。这些是:主要:此警报框指示...

  引导井

📅  最后修改于: 2020-12-18 12:25:40        🧑  作者: Mango

引导井在Bootstrap中,孔用于在元素周围添加带有灰色背景色和填充的圆形边框。就像显示内容的容器一样。.well类与<div>元素一起使用以添加良好。例:引导孔尺寸默认情况下,孔的大小为中等,但您可以根据需要更改孔的大小。.well-sm类用于小型井,.well-lg类用于大型井。例:...

  引导徽章和标签

📅  最后修改于: 2020-12-18 12:26:46        🧑  作者: Mango

引导徽章和标签引导徽章引导徽章是用于指示与特定链接关联多少项目的数字指示器。徽章用于突出显示新的或未读的项目。<span>元素中的类.badge用于创建徽章。引导徽章示例引导徽章示例2您还可以在其他元素(例如按钮)中使用徽章。让我们以一个示例来看一下如何向按钮添加徽章。引导标签引导标签用于指定有关诸如商品数量,技巧或其他页面构成的附加信息。.label类用于显示标签。引导标签示例引导标签示例2:更...

  引导面板

📅  最后修改于: 2020-12-18 12:27:42        🧑  作者: Mango

引导面板在Bootstrap中,面板是带边框的框,其元素周围有一些填充。当您要将DOM组件放在一个盒子中时,将使用面板组件。<div>元素中使用类.panel创建Bootstrap面板。面板内的内容具有.panel-body类。通常,面板包含三个部分:面板头面板内容面板页脚引导面板示例引导面板组面板组用于将多个面板组合在一起。对于面板组,您必须在其周围包裹一个<div>和类.panel-group...

  Bootstrap分页

📅  最后修改于: 2020-12-18 12:28:42        🧑  作者: Mango

引导分页分页用于以有组织的方式对网站的网页进行排序。如果您的网站上有很多网页,则变得非常有必要。以下是Bootstrap提供的用于处理分页的类的列表。ClassDescription.paginationAdd this class to get the pagination on your page..disabled,.activeyou can customize links by usin...

  Bootstrap分页器

📅  最后修改于: 2020-12-18 12:29:35        🧑  作者: Mango

引导寻呼机Bootstrap寻呼机是分页的一种形式。它用于创建上一个和下一个按钮(链接)。<ul>元素内使用“ .pager”类创建上一个/下一个按钮。Bootstrap寻呼机示例Bootstrap分页器对齐按钮您可以将上一个和下一个按钮对齐到页面的每一侧。请参阅以下示例:...

  引导映像

📅  最后修改于: 2020-12-18 12:30:35        🧑  作者: Mango

引导图像Bootstrap支持映像。 Bootstrap中有三个类,可用于将一些简单样式应用于图像。以下类为图像添加样式:ClassesUses.img-roundedIt adds border-radius:6px to give the image rounded corners..img-circleIt makes the entire image round by adding bor...

  引导Glyphico

📅  最后修改于: 2020-12-18 12:31:28        🧑  作者: Mango

自举字形图标字形是Web项目中使用的图标字体。 Bootstrap从Glyphicons Halflings集合中提供260个Glyphicons。Glyphicons的一些示例是:信封字形图标打印字形图标搜索字形图标下载glyphicon等Glyphicons语法要创建所需的Glyphicon,必须相应地替换语法的“名称”部分。例如:如果要创建“信封”字形,则必须编写以下语法:Bootstrap...

  引导轮播

📅  最后修改于: 2020-12-18 12:32:24        🧑  作者: Mango

引导轮播Bootstrap轮播是一种灵活的响应方式,用于向网页添加滑块。它具有足够的响应能力和足够的灵活性,以允许图像,iframe,视频或您要添加的任何其他类型的内容。轮播插件:轮播插件是一个用于在元素之间循环的组件,例如轮播。如果要单独添加插件功能,则必须使用carousel.js文件或一次全部使用(使用“ bootstrap.js”或“ bootstrap.min.js”)。引导轮播示例让我...

  Bootstrap进度栏

📅  最后修改于: 2020-12-18 12:33:33        🧑  作者: Mango

引导进度条进度条显示用户在流程中的距离。在Bootstrap中,有几种类型的进度条。<div>元素中的类.progress用于在引导程序中创建默认进度栏。Bootstrap进度栏示例Bootstrap 4基本进度栏进度条用于向用户显示他/她在过程中待了多长时间。要创建创建默认的进度条,请将.progress类添加到容器元素,并将进度条类添加到其子元素。使用CSS width属性设置进度条的宽度。例...

  引导程序列表组

📅  最后修改于: 2020-12-18 12:34:36        🧑  作者: Mango

引导程序列表组引导程序列表组用于创建包含列表项的列表组。最基本的列表组是包含列表项的无序列表。类“.LIST群”的<UL>元素和类“.LIST基团的项目”的<LI>元素中内被用来创建一个基本列表组。引导程序列表组示例带徽章的引导程序列表组徽章也可以添加到列表组。它们将自动定位在右侧。您必须在列表项中创建一个类别为“ .badge”的<span>元素,以创建徽章。具有超链接的引导程序列表组您还可以将...

  Bootstrap下拉菜单

📅  最后修改于: 2020-12-18 13:13:23        🧑  作者: Mango

自举下拉菜单下拉菜单是可切换的上下文菜单,用于以列表格式显示链接。它方便用户从预定义列表中选择一个值。可以通过下拉JavaScript插件进行交互。您必须将下拉菜单包装在类.dropdown中,以创建Bootstrap Dropdown。Bootstrap下拉示例Bootstrap下拉分隔线.divider类用于分隔下拉菜单中的链接:请参阅以下示例:Bootstrap下拉标题.dropdown-h...