Bootstrap教程

01

Bootstrap简介

一、介绍 Bootstrap是基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，主要用于开发响应式布局和移动设备优先的Web项目，还提供了许多现成的组件，如导... 浏览 634 02

Bootstrap下载安装

Bootstrap是一套用于 HTML、CSS 和 JS 开发的开源工具集。要下载 Bootstrap，可以选择获取编译后的 CSS 和 JavaScript 文件、源码，或者通过各种软件包管理器，例如 npm、R... 浏览 564 03

Bootstrap软件包内容

Bootstrap 软件包中包含了预编译的 CSS 文件和 JavaScript 插件，Bootstrap 的 JavaScript 插件依赖于 jQuery 库。其中，CSS 文件用于定义网页的样式和布局，而 JavaScript... 浏览 650 04

Bootstrap浏览器/移动设备

Bootstrap 支持多种浏览器和设备，包括最新的 Chrome、Firefox、Safari、Microsoft Edge 等主流浏览器，以及一些较旧的浏览器如 Internet Explorer。同时，Bootstrap 也兼... 浏览 614 05

Bootstrap JavaScript插件

Bootstrap 使用基于jQuery构建的JavaScript插件可以变得更加生动活泼。JavaScript 插件插件可以轻松地添加各种交互功能和动态效果，从而增强用户体验，无论是通过简单地在H... 浏览 496 06

Bootstrap Sass文件

利用Bootstrap的源Sass文件，用户可以使用变量、映射、mixin和函数来更快地构建和定制项目。通过定义变量和映射，用户可以轻松地调整颜色、字体和间距等样式属性。同时，使... 浏览 759 07

Bootstrap构建工具

本篇教程将详细介绍如何使用 Bootstrap 自带的 npm 脚本来构建文档、编译源码、运行测试等。 一、安装工具 Bootstrap 的构建系统由 npm 脚本 组成的。 其自带的 package.js... 浏览 402 08

Bootstrap Webpack

Bootstrap 结合 Webpack 可以带来许多好处。通过Webpack，可以轻松地将Bootstrap中的各种组件、样式表和JavaScript文件进行模块化管理，并且可以利用Webpack的强大功能进行... 浏览 412 09

Bootstrap无障碍功能

Bootstrap是一个易于使用的框架，它包含了开箱即用的样式、布局工具和交互式组件，让开发者能够轻松创建具有视觉吸引力、功能丰富且无障碍的网站和应用程序。 一、总览/局... 浏览 526 10

Bootstrap布局

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

Bootstrap网格系统

一、网格系统 Bootstrap拥有一个功能强大的移动优先网格系统，它能够帮助开发人员创建各种形状和尺寸的页面布局。该网格系统基于12列的布局，并针对不同媒体查询范围提供了... 浏览 575 12

Bootstrap布局实用程序

为了更快地实现移动友好型和响应式开发，Bootstrap 提供了数十个实用程序类，用于处理显示、隐藏、对齐和间距的需求。这些实用程序类可以与网格系统、内容或组件混合使用，... 浏览 632 13

Bootstrap Reboot

Reboot 是一组特定于元素的 CSS 更改，集成在单个文件中，它用于启动 Bootstrap，并提供了一个优雅、一致且简单的基线，以便构建网页布局。 一、方法 Reboot 是基于 Normal... 浏览 630 14

Bootstrap排版

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

Bootstrap代码

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

Bootstrap图片

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

Bootstrap表格

Bootstrap表格是Bootstrap框架中的一个重要组成部分，由一个.table元素和一个或多个.table-responsive元素组成，它提供了一种简单、灵活的方式来创建响应式的HTML表格，具... 浏览 782 18

Bootstrap画像

Bootstrap 框架提供了画像（figure）组件，通过 Bootstrap 的画像组件来显示相关联的图片和文本。本教程包含了画像组件的说明和相关示例。 一、显示图片标题 任何时候需要... 浏览 672 19

Bootstrap警告框

Bootstrap 提供了警告框（alert）功能，通过精炼且灵活的警告消息为典型的用户操作提供契合上下文的反馈。 一、警告框 警报可用于任何长度的文本，以及可选的关闭按钮。要... 浏览 426 20

Bootstrap徽章

在 Bootstrap 中，徽章（badge）是一种小型的用于计数和打标签的组件。本教程将介绍徽章组件的相关示例和说明。 一、徽章 徽章（badge）组件通过使用相对字体大小和 em 单... 浏览 493 21

Bootstrap面包屑导航

在 Bootstrap 中，面包屑导航（Breadcrumb）用于指示当前页面在导航层级中的位置，并通过 CSS 为各导航条目之间自动添加分隔符。本教程向大家介绍如何添加 Bootstrap 面包... 浏览 570 22

Bootstrap按钮

使用Bootstrap自定义的按钮样式，可以轻松地为表单、对话框等操作添加美观且功能丰富的按钮。同时，Bootstrap 按钮还支持设置多种大小、状态等，让用户能够更加灵活地定制... 浏览 477 23

Bootstrap按钮组

Bootstrap 提供了一种简单的方法，可以将一系列按钮组合在一行上。这可以通过使用 Bootstrap 的 .btn-group 类来实现。然后，可以使用 JavaScript 来增强这些按钮的功能。... 浏览 759 24

Bootstrap卡片

Bootstrap卡片是一个有弹性且可扩展的内容容器。它包含了页首和页尾的选项、多样化的内容、上下文的背景颜色以及强大的展示选项。对于熟悉Bootstrap的用户来说，卡片将取代... 浏览 583 25

Bootstrap卡片样式

Bootstrap卡片提供了多种自定义背景、边框和颜色的选项，以实现各种设计需求。本篇教程将详细介绍Bootstrap的卡片样式，包括背景和颜色、边框和Mixin通用类。 一、背景和颜... 浏览 464 26

Bootstrap卡片布局

Bootstrap是一个流行的前端框架，它提供了许多用于快速构建响应式网页的工具和组件。除了对卡片内容进行样式设计外，Bootstrap还提供了一些用于卡片排版的选项。包括排版组... 浏览 656 27

Bootstrap轮播

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

Bootstrap折叠

Bootstrap折叠按钮是一个常用的用户界面元素，是基于JavaScript来实现显示和隐藏内容的。它允许用户通过点击按钮来显示或隐藏内容。这种效果是通过Bootstrap的collapse类实... 浏览 915 29

Bootstrap下拉菜单

Bootstrap下拉菜单是一种在网页上实现导航和交互的组件，它允许Bootstrap下拉菜单是一种在网页上实现导航和交互的组件，用户通过点击一个按钮或链接来展开或收起一个包含多... 浏览 661 30

Bootstrap表单控件

Bootstrap表单控件是一种扩展了我们用类重置的表单样式的工具，它提供了许多用于自定义显示的选项，以便在浏览器和设备之间实现更一致的呈现。这些控件包括文本输入框、文... 浏览 466 31

Bootstrap表单布局

Bootstrap提供了多种类型的表单布局，包括垂直表单、内联表单、水平表单和垂直或基本表单。每种布局方式都有其特定的适用场景和实现方法。 Bootstrap 适用于几乎所有的窗体... 浏览 545 32

Bootstrap表单验证

Bootstrap表单验证使用JavaScript和jQuery来实现，并且需要与HTML5表单一起使用。它提供了一些内置的验证规则，例如必填字段、电子邮件格式、文件格式等。此外，它还允许开... 浏览 550 33

Bootstrap自定义表单

Bootstrap支持创建自定义表单，如复选框、单选按钮、文件输入等。Bootstrap提供了一套强大的工具，用于自定义和扩展表单的样式和布局。这些工具包括各种预定义的类，可以用... 浏览 582 34

Bootstrap输入组

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

Bootstrap巨幕

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

Bootstrap列表组

Bootstrap列表组（List Group）是一个用于创建自定义列表的组件，它可以包含多个列表项（List Item）。列表组通常用于展示一组相关的信息或选项，要使用Bootstrap列表组，... 浏览 575 37

Bootstrap媒体对象

Bootstrap的媒体对象（Media Object）是一种用于构造高度重复的组件的布局模式，常用于展示博客评论、推文等内容。媒体对象包括一个图片（可选）、一个标题和一些文本内容... 浏览 673 38

Bootstrap静态框

Bootstrap静态框（Modal）是一种常用的交互组件，主要用于在网页上创建对话框，常见的应用场景包括Bootstrap静态框（Modal）是一种常用的交互组件，主要用于在网页上创建对... 浏览 474 39

Bootstrap导航

Bootstrap 提供了一组共享常规标记和样式的导航组件，从基础的 .nav 类到活动和禁用状态。通过交换修改器类，可以在各个样式之间进行切换。 Nav 组件使用 FlexBox 构建，为... 浏览 474 40

Bootstrap导航条

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

Bootstrap分页

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

Bootstrap弹出框

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

Bootstrap进度条

Bootstrap 的进度条是一种用于展示操作进度或状态的组件，使用两个HTML元素，一些CSS设定宽度以及一些属性设定而成，它可以轻松地在网页中创建各种类型的进度条。Bootstrap... 浏览 417 44

Bootstrap滚动监控

Bootstrap滚动监控可以根据滚动位置自动更新Bootstrap 导航或列表组组件，以提供视觉上的指示。通过检测滚动位置并与每个链接的位置信息进行比较，可以确定哪个链接在视口... 浏览 498 45

Bootstrap读取图标

使用Bootstrap的读取图标（spinners）可以在项目中展示加载状态。这些图标仅使用HTML和CSS构建，因此无需任何JavaScript即可创建。但是可能需要自定义JavaScript代码来切换... 浏览 638 46

Bootstrap吐司消息

Bootstrap的吐司（Toasts）是一种轻量级通知组件，旨在模仿移动和桌面操作系统中常见的推送通知。它们使用flexbox布局构建，因此很容易进行对齐和定位。吐司组件可以在页面... 浏览 724 47

Bootstrap工具提示

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

Bootstrap边框

Bootstrap是一个流行的前端开发框架，提供了丰富的CSS样式和组件，以帮助开发人员快速构建现代化的网站和应用程序。在Bootstrap中，边框（border）是一种常用的样式元素，... 浏览 648 49

Bootstrap颜色

Bootstrap提供了一些颜色（Colors）通用类别，使颜色的表达更加有意义。这些类别包括按钮、链接、背景等元素的颜色，以及支持hover状态的样式连接。使用这些颜色类别可以快... 浏览 484 50

Bootstrap Display

Bootstrap使用Display通用类别来快速且响应式地切换元素的显示与否。这个类别包含了许多常用的值，同时还可以在打印时使用。通过使用这些值，我们可以方便地控制元素在各种... 浏览 485 51

Bootstrap内嵌

在Bootstrap中，内嵌是一种创建响应式视频或幻灯片嵌入的方法。通过设置固有比率，可以根据父级的宽度进行缩放，从而实现在任何设备上的自适应显示。这种方式可以让我们更... 浏览 814 52

Bootstrap弹性盒子

Bootstrap提供了一整套响应式的Flexbox实用程序，方便用户快速管理网格列、导航、组件等的布局、对齐方式和大小调整。这些实用程序充分利用了Flexbox强大的布局功能，使用... 浏览 977 53

Bootstrap浮动

Bootstrap使用响应式的float通用类别，可以在任何断点上切换任何元素的浮动。这种浮动功能可以用于创建复杂的布局和设计，而无需编写大量的自定义CSS代码。通过使用Bootstr... 浏览 499 54

Bootstrap图片替换

Bootstrap是一个流行的前端框架，它提供了许多预先定义的CSS类和组件，可以帮助开发者快速构建响应式网站。在Bootstrap中，图片可以通过标签插入到网页中，并使用相应的Boo... 浏览 459 55

Bootstrap交互方式

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

Bootstrap溢出

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

Bootstrap定位

Bootstrap中，定位工具类用于快速设置元素的位置。这些类可以帮助轻松地将元素定位到页面上的任何位置，而无需编写复杂的CSS代码。可以通过将这些类应用到HTML元素上，轻松... 浏览 704 58

Bootstrap阴影

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

Bootstrap尺寸

在进行Web开发时，经常需要对页面中的元素进行尺寸调整，以适配不同的屏幕大小和显示设备。Bootstrap提供了一组通用类别，例如宽度和高度类别，可以帮助开发者轻松地改变元... 浏览 709 60

Bootstrap间隔

Bootstrap提供了一系列简写的响应式类，用于调整元素的外边距（margin）、内边距（padding）和间距（spacing），以改变元素的外观。这些通用类别可以根据不同的屏幕尺寸自... 浏览 721 61

Bootstrap延伸链接

使用CSS中的"延伸（stretching）"技术，可以轻松地将任何HTML元素或Bootstrap组件转换为可点击的。还可以通过将元素设置为具有一定的宽度和高度，并为其添加透明的背景色来... 浏览 435 62

Bootstrap文本

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

Bootstrap纵向对齐

Bootstrap可以轻松地更改内联（inline）、内联块（inline-block）、内联表格（Bootstrap可以轻松地更改内联（inline）、内联块（inline-block）、内联表格（inline-table）... 浏览 725 64

Bootstrap可见性

Bootstrap提供了一些内置的可见性（Visibility）工具类，用于控制HTML元素的可见性。这些工具类不会修改display属性，也不会对布局产生影响。设置了.invisible的HTML元素仍... 浏览 795 65

Bootstrap方法论

通过对Bootstrap的内部工作原理的了解，用户可以更好地利用其灵活性，根据自身需求进行定制，并在项目中实现更加个性化的样式和功能。包括深入了解Bootstrap的设计理念、开... 浏览 874 66

Bootstrap图标大全

Bootstrap图标库是由@mdo设计并由Bootstrap团队维护的SVG图标库，该图标库包含1800多个免费、高质量的开源图标。这些图标全部是SVG文件，因此能够轻松快捷地进行缩放，并可... 浏览 1002 67

Bootstrap迁移到v4版本

Bootstrap是一个流行的前端框架，它提供了许多有用的工具和组件来帮助开发人员快速构建响应式网站。然而，随着时间的推移，Bootstrap的版本不断更新，旧版本可能会不再得到... 浏览 574