Bootstrap教程

01

Bootstrap简介

一、介绍 Bootstrap是基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，主要用于开发响应式布局和移动设备优先的Web项目，还提供了许多现成的组件，如导航栏、下拉菜单、按钮、卡片等，可以大大减少前端开发的工作量。同时，它还支持响应式... 浏览 501 02

Bootstrap下载安装

Bootstrap是一套用于 HTML、CSS 和 JS 开发的开源工具集。要下载 Bootstrap，可以选择获取编译后的 CSS 和 JavaScript 文件、源码，或者通过各种软件包管理器，例如 npm、RubyGems 等，将 Bootstrap 添加到项目中。 一、经过编译的CSS和JS 下载 Bootstrap v... 浏览 461 03

Bootstrap软件包内容

Bootstrap 软件包中包含了预编译的 CSS 文件和 JavaScript 插件，Bootstrap 的 JavaScript 插件依赖于 jQuery 库。其中，CSS 文件用于定义网页的样式和布局，而 JavaScript 插件则提供了一些额外的功能，如模态框、下拉菜单等。 一、预编译的Bootstrap文件... 浏览 548 04

Bootstrap浏览器/移动设备

Bootstrap 支持多种浏览器和设备，包括最新的 Chrome、Firefox、Safari、Microsoft Edge 等主流浏览器，以及一些较旧的浏览器如 Internet Explorer。同时，Bootstrap 也兼容各种设备，如桌面电脑、平板电脑和手机等。 一、支持的浏览器 Bootstrap 支持所有... 浏览 485 05

Bootstrap JavaScript插件

Bootstrap 使用基于jQuery构建的JavaScript插件可以变得更加生动活泼。JavaScript 插件插件可以轻松地添加各种交互功能和动态效果，从而增强用户体验，无论是通过简单地在HTML标记中添加data属性，还是通过JavaScript代码来调用API。本篇教程将为大家详细介绍... 浏览 388 06

Bootstrap Sass文件

利用Bootstrap的源Sass文件，用户可以使用变量、映射、mixin和函数来更快地构建和定制项目。通过定义变量和映射，用户可以轻松地调整颜色、字体和间距等样式属性。同时，使用mixin和函数可以快速创建复杂的样式效果，提高开发效率。 一、介绍 在Bootstrap 3... 浏览 643 07

Bootstrap构建工具

本篇教程将详细介绍如何使用 Bootstrap 自带的 npm 脚本来构建文档、编译源码、运行测试等。 一、安装工具 Bootstrap 的构建系统由 npm 脚本 组成的。 其自带的 package.json 文件提供了便捷的途径来编译代码、运行测试等。 无论是使用 Bootstrap 自带的... 浏览 324 08

Bootstrap Webpack

Bootstrap 结合 Webpack 可以带来许多好处。通过Webpack，可以轻松地将Bootstrap中的各种组件、样式表和JavaScript文件进行模块化管理，并且可以利用Webpack的强大功能进行打包、压缩和优化，以便在生产环境中获得更好的性能表现。本文将为大家介绍如何利用We... 浏览 284 09

Bootstrap无障碍功能

Bootstrap是一个易于使用的框架，它包含了开箱即用的样式、布局工具和交互式组件，让开发者能够轻松创建具有视觉吸引力、功能丰富且无障碍的网站和应用程序。 一、总览/局限性 使用 Bootstrap 所构建的任何项目的总体无障碍程度大部分取决于作者所使用的标... 浏览 428 10

Bootstrap布局

Bootstrap提供了用于布局项目的组件和选项，包括包装容器、强大的网格系统、灵活的媒体对象以及响应式实用程序类。这些功能使开发者能够轻松创建具有响应式布局和灵活排版的网站和应用程序。 一、器皿 容器是 Bootstrap 中最基本的布局元素，使用默认网格系... 浏览 314 11

Bootstrap网格系统

一、网格系统 Bootstrap拥有一个功能强大的移动优先网格系统，它能够帮助开发人员创建各种形状和尺寸的页面布局。该网格系统基于12列的布局，并针对不同媒体查询范围提供了多个等级。这个网格系统是响应式设计的核心组成部分，它可以根据设备的屏幕大小和方... 浏览 460 12

Bootstrap布局实用程序

为了更快地实现移动友好型和响应式开发，Bootstrap 提供了数十个实用程序类，用于处理显示、隐藏、对齐和间距的需求。这些实用程序类可以与网格系统、内容或组件混合使用，以便在不同的视口尺寸下灵活控制元素的表现形式。 一、改变display 我们的显示实用... 浏览 521 13

Bootstrap Reboot

Reboot 是一组特定于元素的 CSS 更改，集成在单个文件中，它用于启动 Bootstrap，并提供了一个优雅、一致且简单的基线，以便构建网页布局。 一、方法 Reboot 是基于 Normalize 构建的，它使用元素选择器为许多 HTML 元素提供了一些自认为合理的默认样式。这... 浏览 527 14

Bootstrap排版

Bootstrap 是一个流行的前端框架，它提供了丰富的排版样式和组件，可以帮助您快速搭建现代化的网页。本教程将介绍 Bootstrap 排版的相关示例，包括全局设置、标题、正文文本、列表、响应式字体大小等等。 一、全局设置 Bootstrap 设置基本的全局显示、排版... 浏览 314 15

Bootstrap代码

Bootstrap 是一个流行的前端框架，用于快速构建响应式网站和 Web 应用程序。它提供了许多预定义的 CSS 类和组件，可以简化开发过程并提高代码的可读性和可维护性。本教程将介绍 Bootstrap 行内代码和多行代码块。 一、行内代码 用 <code> 包裹行内代... 浏览 398 16

Bootstrap图片

Bootstrap 框架为图片提供了一些预设的样式类，以帮助开发者轻松地对图片排版。本教程展示了如何让图片支持响应式行为（这样它们就不会超出父元素的范围）以及如何通过类（class）添加些许样式。 一、响应式图片 通过 Bootstrap 所提供的 .img-fluid 类让图... 浏览 689 17

Bootstrap表格

Bootstrap表格是Bootstrap框架中的一个重要组成部分，由一个.table元素和一个或多个.table-responsive元素组成，它提供了一种简单、灵活的方式来创建响应式的HTML表格，具有响应式设计和内置样式等特点。 一、例子 由于表格在日历和日期选择器等第三方小部... 浏览 681 18

Bootstrap画像

Bootstrap 框架提供了画像（figure）组件，通过 Bootstrap 的画像组件来显示相关联的图片和文本。本教程包含了画像组件的说明和相关示例。 一、显示图片标题 任何时候需要显示一段内容（例如带有可选标题的图片），请使用 <figure> 标签。 .figure... 浏览 563 19

Bootstrap警告框

Bootstrap 提供了警告框（alert）功能，通过精炼且灵活的警告消息为典型的用户操作提供契合上下文的反馈。 一、警告框 警报可用于任何长度的文本，以及可选的关闭按钮。要获得正确的样式，请使用八个必需的上下文类之一（例如，.alert-success）。对于内联... 浏览 306 20

Bootstrap徽章

在 Bootstrap 中，徽章（badge）是一种小型的用于计数和打标签的组件。本教程将介绍徽章组件的相关示例和说明。 一、徽章 徽章（badge）组件通过使用相对字体大小和 em 单位来实现缩放以匹配其直接父元素的大小。 <h1>Example heading <span... 浏览 388 21

Bootstrap面包屑导航

在 Bootstrap 中，面包屑导航（Breadcrumb）用于指示当前页面在导航层级中的位置，并通过 CSS 为各导航条目之间自动添加分隔符。本教程向大家介绍如何添加 Bootstrap 面包屑导航，以及如何改变分隔符。 一、示例 <nav aria-label="breadcrumb"> &l... 浏览 447 22

Bootstrap按钮

使用Bootstrap自定义的按钮样式，可以轻松地为表单、对话框等操作添加美观且功能丰富的按钮。同时，Bootstrap 按钮还支持设置多种大小、状态等，让用户能够更加灵活地定制按钮的外观和行为。 一、示例 Bootstrap包含了几个预定义的按钮样式，每个样式都有自... 浏览 346 23

Bootstrap按钮组

Bootstrap 提供了一种简单的方法，可以将一系列按钮组合在一行上。这可以通过使用 Bootstrap 的 .btn-group 类来实现。然后，可以使用 JavaScript 来增强这些按钮的功能。 一、基本示例 将一系列带有.btn的按钮用.btn-group包装。 <div class="btn-... 浏览 623 24

Bootstrap卡片

Bootstrap卡片是一个有弹性且可扩展的内容容器。它包含了页首和页尾的选项、多样化的内容、上下文的背景颜色以及强大的展示选项。对于熟悉Bootstrap的用户来说，卡片将取代旧有的panel、well和thumbnail。与那些元件类似的功能已经都整合到卡片内了。 一、例... 浏览 481 25

Bootstrap卡片样式

Bootstrap卡片提供了多种自定义背景、边框和颜色的选项，以实现各种设计需求。本篇教程将详细介绍Bootstrap的卡片样式，包括背景和颜色、边框和Mixin通用类。 一、背景和颜色 使用文字和背景通用类别来改变卡片的外观。 <div class="card text-whit... 浏览 360 26

Bootstrap卡片布局

Bootstrap是一个流行的前端框架，它提供了许多用于快速构建响应式网页的工具和组件。除了对卡片内容进行样式设计外，Bootstrap还提供了一些用于卡片排版的选项。包括排版组、网络卡片、Masonry等。 一、卡片组 使用卡片群组将一系列卡片呈现为具有等宽、高... 浏览 535 27

Bootstrap轮播

轮播（Carousel）是Bootstrap中的一个幻灯片放映组件，用于在元素、图像或文本幻灯片之间循环播放，类似于旋转木马的效果。它由一个class为“carousel”的容器定义，其中包含轮播指示器、轮播内容以及轮播的控制按钮。 一、运作方式 轮播是一个幻灯片，用于循... 浏览 525 28

Bootstrap折叠

Bootstrap折叠按钮是一个常用的用户界面元素，是基于JavaScript来实现显示和隐藏内容的。它允许用户通过点击按钮来显示或隐藏内容。这种效果是通过Bootstrap的collapse类实现的，这个类被用于指定一个折叠元素，例如一个div标签。当用户点击按钮后，对应内容... 浏览 806 29

Bootstrap下拉菜单

Bootstrap下拉菜单是一种在网页上实现导航和交互的组件，它允许Bootstrap下拉菜单是一种在网页上实现导航和交互的组件，用户通过点击一个按钮或链接来展开或收起一个包含多个选项的列表，并提供了多种下拉菜单的样式和功能，可以根据需要进行定制和扩展。 一... 浏览 553 30

Bootstrap表单控件

Bootstrap表单控件是一种扩展了我们用类重置的表单样式的工具，它提供了许多用于自定义显示的选项，以便在浏览器和设备之间实现更一致的呈现。这些控件包括文本输入框、文本区域、复选框、单选按钮和下拉菜单等，它们都可以通过Bootstrap的样式进行定制和扩展... 浏览 358 31

Bootstrap表单布局

Bootstrap提供了多种类型的表单布局，包括垂直表单、内联表单、水平表单和垂直或基本表单。每种布局方式都有其特定的适用场景和实现方法。 Bootstrap 适用于几乎所有的窗体控件，因此默认情况下窗体将垂直堆叠。 一、表单组 .form-groupmargin-bottom类是向... 浏览 428 32

Bootstrap表单验证

Bootstrap表单验证使用JavaScript和jQuery来实现，并且需要与HTML5表单一起使用。它提供了一些内置的验证规则，例如必填字段、电子邮件格式、文件格式等。此外，它还允许开发人员自定义验证规则以满足特定的需求。 虽然目前客户端的自定义验证样式和工具提... 浏览 427 33

Bootstrap自定义表单

Bootstrap支持创建自定义表单，如复选框、单选按钮、文件输入等。Bootstrap提供了一套强大的工具，用于自定义和扩展表单的样式和布局。这些工具包括各种预定义的类，可以用来修改表单控件的外观，以实现与浏览器和设备之间更一致的展示。 一、复选框和单选按... 浏览 457 34

Bootstrap输入组

Bootstrap输入组允许用户在文本输入、自定义选择和自定义文件输入的任一侧添加文本、按钮或按钮组，可以轻松扩展窗体控件。例如在输入的任一侧放置一个附加组件或按钮。也可以在输入的两侧各放置一个。记住将label放在输入组之外。 一、基本示例 在输入的任... 浏览 370 35

Bootstrap巨幕

Bootstrap巨幕是一个轻量级、灵活的组件，用于展示关键的营销信息。它提供了一种简单的方式来创建响应式布局，可以在不同设备上自动调整大小和样式。要使用Bootstrap巨幕组件，首先需要在HTML文件中引入Bootstrap的CSS和JavaScript文件。 一、示例 <di... 浏览 373 36

Bootstrap列表组

Bootstrap列表组（List Group）是一个用于创建自定义列表的组件，它可以包含多个列表项（List Item）。列表组通常用于展示一组相关的信息或选项，要使用Bootstrap列表组，首先需要在HTML文件中引入Bootstrap的CSS和JavaScript文件。 一、基本示例 最基本的... 浏览 485 37

Bootstrap媒体对象

Bootstrap的媒体对象（Media Object）是一种用于构造高度重复的组件的布局模式，常用于展示博客评论、推文等内容。媒体对象包括一个图片（可选）、一个标题和一些文本内容，三个部分都可以通过Bootstrap的CSS类进行样式定制。 一、示例 Bootstrap媒体对象可... 浏览 570 38

Bootstrap静态框

Bootstrap静态框（Modal）是一种常用的交互组件，主要用于在网页上创建对话框，常见的应用场景包括Bootstrap静态框（Modal）是一种常用的交互组件，主要用于在网页上创建对话框，常见的应用场景包括灯箱、用户通知或完全自定义的内容。 一、运作方式 在使用... 浏览 374 39

Bootstrap导航

Bootstrap 提供了一组共享常规标记和样式的导航组件，从基础的 .nav 类到活动和禁用状态。通过交换修改器类，可以在各个样式之间进行切换。 Nav 组件使用 FlexBox 构建，为构建各种类型的导航组件提供了坚实的基础。它包括一些样式覆盖（用于处理列表）、... 浏览 362 40

Bootstrap导航条

Bootstrap提供了一套强大的响应式导航条文件和示例，其中包括品牌标识、导览功能等，同时还支持折叠插件。在开始使用Bootstrap导航条之前，需要了解其工作原理，本文将详细为大家介绍，并提供一些实例。 一、工作原理 在开始使用导航条之前，需要了解以下内... 浏览 541 41

Bootstrap分页

Bootstrap是一个流行的前端开发框架，它提供了丰富的组件和工具，用于快速构建响应式、移动设备优化的网站和Web应用程序。其中包括了一系列的分页组件，用于在页面上展示分页导航。本教程将给大家分享一些Bootstrap的分页案例。 一、Bootstrap分页 使用一大... 浏览 275 42

Bootstrap弹出框

在 Bootstrap 中，弹出框是一种常见的交互式组件，风格类似iOS，可加在网页上的任何元素上，用于在用户点击按钮或链接时显示一段额外的信息、确认消息或者用户输入表单。本教程将向大家展示Bootstrap弹出提示框相关示例。 一、popover插件 使用popover插件... 浏览 365 43

Bootstrap进度条

Bootstrap 的进度条是一种用于展示操作进度或状态的组件，使用两个HTML元素，一些CSS设定宽度以及一些属性设定而成，它可以轻松地在网页中创建各种类型的进度条。Bootstrap自定义进度条支持堆叠、动态背景和文字标签。 一、工作原理 进度条元件使用两个HTML... 浏览 298 44

Bootstrap滚动监控

Bootstrap滚动监控可以根据滚动位置自动更新Bootstrap 导航或列表组组件，以提供视觉上的指示。通过检测滚动位置并与每个链接的位置信息进行比较，可以确定哪个链接在视口中处于活动状态，并相应地更新样式。 一、工作原理 滚动监控正常运行的几个要求：... 浏览 372 45

Bootstrap读取图标

使用Bootstrap的读取图标（spinners）可以在项目中展示加载状态。这些图标仅使用HTML和CSS构建，因此无需任何JavaScript即可创建。但是可能需要自定义JavaScript代码来切换它们的显示状态。 通过Bootstrap提供的通用类别，可以轻松自定义这些图标的外观、... 浏览 517 46

Bootstrap吐司消息

Bootstrap的吐司（Toasts）是一种轻量级通知组件，旨在模仿移动和桌面操作系统中常见的推送通知。它们使用flexbox布局构建，因此很容易进行对齐和定位。吐司组件可以在页面的任何位置显示，并且可以包含文本、图像和按钮等内容。 你可以使用Bootstrap的类... 浏览 615 47

Bootstrap工具提示

Bootstrap工具提示（Tooltips）是一种常用的交互性组件，用于提供对元素的简短解释或补充信息。它以浮动的气泡形式展示，当用户将鼠标悬停在一个元素上时，或通过触摸屏点击元素时，工具提示会显示出来。Bootstrap工具提示可以通过CSS和JavaScript来实现。... 浏览 364 48

Bootstrap边框

Bootstrap是一个流行的前端开发框架，提供了丰富的CSS样式和组件，以帮助开发人员快速构建现代化的网站和应用程序。在Bootstrap中，边框（border）是一种常用的样式元素，可以通过使用Border通用类别来快速设计边框的元素。 注意：使用Bootstrap的Border通... 浏览 515 49

Bootstrap颜色

Bootstrap提供了一些颜色（Colors）通用类别，使颜色的表达更加有意义。这些类别包括按钮、链接、背景等元素的颜色，以及支持hover状态的样式连接。使用这些颜色类别可以快速地为网站添加一致和吸引人的色彩方案。 一、颜色 使用color通用类别为文字上色。... 浏览 353 50

Bootstrap Display

Bootstrap使用Display通用类别来快速且响应式地切换元素的显示与否。这个类别包含了许多常用的值，同时还可以在打印时使用。通过使用这些值，我们可以方便地控制元素在各种设备和屏幕尺寸上的显示效果。 一、工作原理 使用Bootstrap的响应式Display通用类别... 浏览 373 51

Bootstrap内嵌

在Bootstrap中，内嵌是一种创建响应式视频或幻灯片嵌入的方法。通过设置固有比率，可以根据父级的宽度进行缩放，从而实现在任何设备上的自适应显示。这种方式可以让我们更加灵活地设计网页布局，提高用户体验。 一、内嵌 在Bootstrap中，规则直接应用于<... 浏览 638 52

Bootstrap弹性盒子

Bootstrap提供了一整套响应式的Flexbox实用程序，方便用户快速管理网格列、导航、组件等的布局、对齐方式和大小调整。这些实用程序充分利用了Flexbox强大的布局功能，使用户能够轻松创建灵活且适应不同屏幕尺寸的布局。 一、启用flex 使用display通用类别来... 浏览 810 53

Bootstrap浮动

Bootstrap使用响应式的float通用类别，可以在任何断点上切换任何元素的浮动。这种浮动功能可以用于创建复杂的布局和设计，而无需编写大量的自定义CSS代码。通过使用Bootstrap的响应式设计，可以轻松地在不同的设备和屏幕尺寸上调整元素的大小和位置。 一、浮... 浏览 353 54

Bootstrap图片替换

Bootstrap是一个流行的前端框架，它提供了许多预先定义的CSS类和组件，可以帮助开发者快速构建响应式网站。在Bootstrap中，图片可以通过<img>标签插入到网页中，并使用相应的Bootstrap类进行样式化。那么Bootstrap图片怎么替换? 注意：在 v4.1 中，c... 浏览 313 55

Bootstrap交互方式

Bootstrap 提供了一系列的交互方式（Interactions），可改变使用者如何与网页内容互动的通用类。这些类可以改变用户与网页元素的互动方式，提升用户体验。本教程将介绍更改用户与内容交互时选择内容的方式和Pointer事件。 一、文本选择 更改用户与内容交互... 浏览 308 56

Bootstrap溢出

在Bootstrap中，溢出（Overflow）是指内容超出其容器尺寸的情况。为了处理溢出内容，Bootstrap提供了一系列速记的通用类别来快速配置内容溢出元素的方式。本篇教程将介绍使用这些速记的通用类别快速配置内容溢出元素的方式。 一、溢出 默认情况下，overflow... 浏览 361 57

Bootstrap定位

Bootstrap中，定位工具类用于快速设置元素的位置。这些类可以帮助轻松地将元素定位到页面上的任何位置，而无需编写复杂的CSS代码。可以通过将这些类应用到HTML元素上，轻松实现元素的定位和布局。 一、定位工具类 以下是一些常用的定位工具类： 1、.posi... 浏览 590 58

Bootstrap阴影

在使用Bootstrap进行Web开发时，经常需要为元素添加阴影效果来增强页面的视觉吸引力。Bootstrap提供了一组通用类来方便地增加或移除阴影，其中就包括了box-shadow类。通过使用box-shadow类，开发者可以轻松地为元素添加阴影效果，或者在不需要时将其移除。... 浏览 650 59

Bootstrap尺寸

在进行Web开发时，经常需要对页面中的元素进行尺寸调整，以适配不同的屏幕大小和显示设备。Bootstrap提供了一组通用类别，例如宽度和高度类别，可以帮助开发者轻松地改变元素的宽度和高度，还可以根据屏幕大小自动调整元素的尺寸，从而实现响应式布局。 一、... 浏览 545 60

Bootstrap间隔

Bootstrap提供了一系列简写的响应式类，用于调整元素的外边距（margin）、内边距（padding）和间距（spacing），以改变元素的外观。这些通用类别可以根据不同的屏幕尺寸自动调整元素的间距，实现响应式布局。 一、运作方式 赋予一个缩写class使margin或padd... 浏览 568 61

Bootstrap延伸链接

使用CSS中的"延伸（stretching）"技术，可以轻松地将任何HTML元素或Bootstrap组件转换为可点击的。还可以通过将元素设置为具有一定的宽度和高度，并为其添加透明的背景色来实现。本教程将详细介绍如何为Bootstrap组件添加延伸链接。 一、示例 为链接添加 .s... 浏览 300 62

Bootstrap文本

Bootstrap文本是一套用于快速构建响应式网站的CSS框架，它提供了丰富的工具类来控制文本内容的对齐、折行、溢出、中断、转换、粗细、斜体、颜色和装饰等属性。轻松地实现各种文本样式效果，从而提升网站的整体视觉效果和用户体验。 一、文本对齐 使用文本对... 浏览 315 63

Bootstrap纵向对齐

Bootstrap可以轻松地更改内联（inline）、内联块（inline-block）、内联表格（Bootstrap可以轻松地更改内联（inline）、内联块（inline-block）、内联表格（inline-table）以及表格单元（table cell）元素的垂直对齐方式。 使用 纵向对齐（vertical-alignm... 浏览 605 64

Bootstrap可见性

Bootstrap提供了一些内置的可见性（Visibility）工具类，用于控制HTML元素的可见性。这些工具类不会修改display属性，也不会对布局产生影响。设置了.invisible的HTML元素仍然占据页面空间。页面内容在视觉上以及对使用辅助技术/屏幕阅读器的用户来说都是隐藏... 浏览 685 65

Bootstrap方法论

通过对Bootstrap的内部工作原理的了解，用户可以更好地利用其灵活性，根据自身需求进行定制，并在项目中实现更加个性化的样式和功能。包括深入了解Bootstrap的设计理念、开发原则和最佳实践，以及掌握使用Bootstrap工具类进行样式定制的技术。 一、摘要 我... 浏览 753 66

Bootstrap图标大全

Bootstrap图标库是由@mdo设计并由Bootstrap团队维护的SVG图标库，该图标库包含1800多个免费、高质量的开源图标。这些图标全部是SVG文件，因此能够轻松快捷地进行缩放，并可以通过CSS设置样式。 一、Bootstrap图标库 虽然 Bootstrap 没有内置的图标库，但是... 浏览 867 67

Bootstrap迁移到v4版本

Bootstrap是一个流行的前端框架，它提供了许多有用的工具和组件来帮助开发人员快速构建响应式网站。然而，随着时间的推移，Bootstrap的版本不断更新，旧版本可能会不再得到支持或存在一些已知的问题。本教程将介绍如何把BootStrap迁移到v4版本。 一、稳定变... 浏览 480