学习Bootstrap 5的第十五天

目录

Bootstrap 5 实用工具

边框

边框圆角

浮动和清除浮动

响应式浮动

居中对齐

宽度与高度

间距

阴影

垂直对齐

纵横比

可见性

关闭图标

屏幕阅读器

颜色

背景颜色


Bootstrap 5 实用工具

边框

Bootstrap 5提供了一系列的边框类,让开发者可以方便地为元素添加或删除边框。这些边框类都是以"border-"为前缀的CSS类,其后跟着不同的属性值来描述边框的样式、颜色和大小等。

以下是Bootstrap 5提供的常用边框类:

  1. border:为元素添加一个默认的1px宽度的边框。
  2. border-0:为元素移除边框。
  3. border-top、border-bottom、border-end、border-start:为元素的指定边添加边框。
  4. border-primary、border-secondary、border-success、border-danger、border-warning、border-info、border-light、border-dark、border-white:为元素添加不同颜色的边框。

此外,Bootstrap 5还提供了更加细粒度的边框类,可以通过组合不同的属性值来实现更加个性化的边框样式。例如:

  1. border-1、border-2、border-3:分别为元素添加1px、2px、3px宽度的边框。
  2. border-top-0、border-bottom-0、border-left-0、border-right-0:分别为元素指定边移除边框。
  3. border-top-1、border-bottom-2、border-left-3、border-right-4:为元素指定不同宽度的边添加边框。

实例 



	
		Bootstrap5 实例
		
		
		
		
	
	
		

Bootstrap 5 边框类示例

默认边框

无边框

顶部边框

底部边框

左侧边框

右侧边框

主要颜色边框
次要颜色边框
成功颜色边框
危险颜色边框
警告颜色边框
信息颜色边框
浅色边框
深色边框
白色边框

1px宽度边框

2px宽度边框

3px宽度边框


为元素移除边框

顶部1px宽度边框

底部0px宽度边框

左侧0px宽度边框

右侧0px宽度边框

边框圆角

在Bootstrap 5中,您可以使用rounded类为元素添加圆角。通过使用不同的rounded类,您可以实现不同程度和形状的圆角效果。

以下是一些常见的rounded类及其对应的圆角效果:

1、rounded:默认圆角效果,边角稍微圆润。

2、rounded-0:无圆角,边角为直角。

3、rounded-1:边角更加圆润。

4、rounded-2:边角更加圆润。

5、rounded-3:边角更加圆润。

6、rounded-circle:创建一个完全圆形的元素。

7、rounded-top、rounded-bottom、rounded-start、rounded-end:分别为元素的顶部、底部、开始(左侧)和结束(右侧)边角添加圆角。

8、rounded-pill:创建一个椭圆形的元素,适用于按钮等元素。

通过组合使用不同的rounded类,可以实现更多自定义的圆角效果。例如,可以将rounded-top和rounded-end类组合在一起,为元素的右上角添加圆角: 

右上角圆角

实例



	
		Bootstrap 实例
		
		
		
		
		
	
	

		

边框圆角

请使用 rounded 类为元素添加圆角:

浮动和清除浮动

在 Bootstrap 5 中,可以使用 .float-end 类将元素向右浮动,或使用 .float-start 类将元素向左浮动。这些类可以应用于任何具有 float 属性的元素。

例如,要将一个元素向右浮动,可以添加 .float-end 类:

向右浮动的元素

同样地,要将一个元素向左浮动,可以添加 .float-start 类:

向左浮动的元素

然而,需要注意的是,虽然Bootstrap 5 提供 .clearfix 类来清除浮动。但是也可以使用 CSS 的 overflow: auto 属性来实现类似的效果。

例如,如果你有一组浮动的元素,并希望包含它们的容器能够自动扩展以适应这些浮动元素,可以将容器的样式设置为 overflow: auto:



	
		Bootstrap 实例
		
		
		
		
	
	
		
Float left Float right
向左浮动的元素
向右浮动的元素

这样,容器将会自动适应包含的浮动元素的高度,不再出现高度塌陷的问题。

请注意,以上内容适用于 Bootstrap 5 版本。如果你使用的是其他版本的 Bootstrap,请参考相应版本的文档以获取正确的浮动和清除浮动方法。

响应式浮动

在响应式设计中,可以使用 Bootstrap 5 提供的响应式工具类来实现浮动效果。以下是一些常用的响应式浮动类:

  • .float-start: 将元素向左浮动。
  • .float-end: 将元素向右浮动。
  • .float-none: 取消元素的浮动效果。

这些类可以与 Bootstrap 的栅格系统结合使用,以实现在不同屏幕大小下的浮动布局。

根据屏幕宽度向左或向右浮动元素,使用响应式浮动类 (.float-*-left|right),其中 * 是:

  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

实例 



	
		Bootstrap 实例
		
		
		
		
	
	
		

响应式浮动

重置浏览器查看效果

小屏幕向右浮动

中等屏幕向右浮动

大屏幕向右浮动

超大屏幕向右浮动

特大屏幕向右浮动

没有浮动

居中对齐

要将元素水平居中对齐,可以使用 Bootstrap 5 提供的 .mx-auto 类。该类会自动为元素添加 margin-left: auto 和 margin-right: auto 属性,从而实现水平居中对齐。

以下是一个示例:



	
		Bootstrap 实例
		
		
		
		
	
	
		
居中对齐

请注意,为了使 .mx-auto 类生效,需要将元素包含在一个具有 .container 类的容器中。这是因为 .mx-auto 类依赖于 Bootstrap 的网格系统来计算间距。

通过使用 .mx-auto 类,可以轻松地实现元素的水平居中对齐,无论是在响应式布局中还是在固定宽度的容器中。

宽度与高度

Bootstrap 5 提供了一组类来设置元素的宽度和高度。以下是一些常用的设置元素宽度的类:

  • .w-*:设置元素的宽度。可以使用 * 替换为 25、50、75、100,表示宽度的百分比。例如,.w-50 将使元素的宽度为其父元素宽度的 50%。
  • .mw-auto:将元素的最大宽度设置为自动。这将使元素在不超过其父元素宽度的情况下尽可能大。
  • .mw-100:将元素的最大宽度设置为 100%。这将使元素的宽度等于其父元素的宽度。

以下是一些常用的设置元素高度的类:

  • .h-*:设置元素的高度。可以使用 * 替换为 25、50、75、100,表示高度的百分比。例如,.h-50 将使元素的高度为其父元素高度的 50%。
  • .mh-auto:将元素的最大高度设置为自动。这将使元素在不超过其父元素高度的情况下尽可能大。
  • .mh-100:将元素的最大高度设置为 100%。这将使元素的高度等于其父元素的高度。

请注意,这些类需要与 Bootstrap 的栅格系统和容器一起使用,以确保元素的宽度和高度能够正确地响应不同的屏幕大小。



	
		Bootstrap 实例
		
		
		
		
	
	
		
宽度为 25%
宽度为 50%
宽度为 75%
宽度为 100%
自动设置宽度
最大宽度为 100%

高度为 25%
高度为 50%
高度为 75%
高度为 100%
自动设置高度
最大高度为 100%

通过使用这些类,你可以轻松地设置元素的宽度和高度,从而实现各种布局需求。

间距

Bootstrap 5 拥有广泛的响应式 margin 和 padding 实用程序类。它们适用于所有断点:

xs (<= 576px)
sm (> = 576px)
md (> = 768px)
lg (> = 992px)
xl (> = 1200px)
xxl (> = 1400px)
这些类的使用格式为:{property}{sides}-{size} 用于 xs,以及 {property}{sides}-{breakpoint}-{size} 用于 sm、md、lg、xl 和 xxl。

property 是以下之一:

  • m:用于设置元素的外边距(margin)。
  • p:用于设置元素的内边距(padding)。

sides 是以下之一:

  • t - 设置 margin-top 或 padding-top
  • b - 设置 margin-bottom 或 padding-bottom
  • s - 设置 margin-left 或 padding-left
  • e - 设置 margin-right 或 padding-right
  • x - 同时设置 padding-left 和 padding-right 或 margin-left 和 margin-right
  • y - 同时设置 padding-top 和 padding-bottom 或 margin-top 和 margin-bottom
  • blank - 在元素的所有四个边设置 margin 或 padding

size 是以下之一:

  • 0 - 把 margin 或 padding 设置为 0
  • 1 - 把 margin 或 padding 设置为 .25rem
  • 2 - 把 margin 或 padding 设置为 .5rem
  • 3 - 把 margin 或 padding 设置为 1rem
  • 4 - 把 margin 或 padding 设置为 1.5rem
  • 5 - 把 margin 或 padding 设置为 3rem
  • auto - 把 margin 设置为 auto


	
		Bootstrap 实例
		
		
		
		
	
	
		

这个元素具有在 md 断点及以上的顶部外边距为 1rem

这个元素具有在所有断点上的垂直内边距为 0.5rem

这个元素具有在 xl 断点及以上的左侧内边距为 3rem

在上面的示例中,我们使用了不同的 Bootstrap 5 响应式 margin 和 padding 实用程序类来设置元素之间的间距。根据不同的断点,元素的外边距和内边距会有所调整,以实现响应式布局。

请注意,示例中的类是根据常见的需求进行选择的,你可以根据自己的具体需求进行调整和组合这些类。同时,确保在适当的位置使用 Bootstrap 的容器和栅格系统,以获得最佳效果。

更多实例

.m-# / m-*-# 设置所有边的外边距 尝试一下
.mt-# / mt-*-# margin top 尝试一下
.mb-# / mb-*-# margin bottom 尝试一下
.ms-# / ms-*-# margin left 尝试一下
.me-# / me-*-# margin right 尝试一下
.mx-# / mx-*-# margin left 与 right 尝试一下
.my-# / my-*-# margin top 与 bottom 尝试一下
.p-# / p-*-# 使用边设置 padding 尝试一下
.pt-# / pt-*-# padding top 尝试一下
.pb-# / pb-*-# padding bottom 尝试一下
.ps-# / ps-*-# padding left 尝试一下
.pe-# / pe-*-# padding right 尝试一下
.py-# / py-*-# padding top 与 bottom 尝试一下
.px-# / px-*-# padding left 与 right 尝试一下

阴影

Bootstrap 5 提供了一系列用于添加阴影的实用程序类,你可以使用它们来为元素添加不同类型和大小的阴影效果。

以下是一些常用的阴影类:

  • .shadow-sm:添加一个小的阴影效果。
  • .shadow:添加默认大小的阴影效果。
  • .shadow-lg:添加一个大的阴影效果。
  • .shadow-none:移除阴影效果。

这些类可以应用于任何元素,例如 div、img 或 button 等。你可以根据具体需求选择合适的阴影类,并将其应用于相应的元素。

以下是一个示例,演示如何使用 .shadow 类为 div 元素添加默认大小的阴影效果:



	
		Bootstrap 实例
		
		
		
		
	
	
		
没有阴影
小型阴影
默认阴影
大型阴影

请注意,在使用这些阴影类时,要根据具体需求和设计选择合适的大小和颜色,并确保在不同断点下进行测试和调整,以确保在各种屏幕尺寸和设备上都能获得最佳效果。

垂直对齐

Bootstrap 5 提供了一系列用于更改元素对齐方式的实用程序类,你可以使用它们来控制元素在垂直方向上的对齐方式。

以下是一些常用的垂直对齐类:

  • .align-baseline:将元素与基线对齐。
  • .align-top:将元素与顶部对齐。
  • .align-middle:将元素与中心对齐。
  • .align-bottom:将元素与底部对齐。
  • .align-text-top:将元素文本与顶部对齐。
  • .align-text-bottom:将元素文本与底部对齐。

这些类可以应用于任何 inline、inline-block、inline-table 和表格单元格元素,例如 span、img 或 td 等。你可以根据具体需求选择合适的对齐类,并将其应用于相应的元素。

以下是一个示例,演示如何使用 .align-middle 类将 img 元素与父元素的中心对齐:

image

这是一段文本

在上面的示例中,我们使用 .align-middle 类将 img 元素与父元素的中心对齐。我们还使用了其他 Bootstrap 实用程序类,如 .d-flex(将元素设置为 Flexbox 容器)和 .ms-3(设置左侧外边距),以实现更完整的样式效果。

请注意,在使用这些垂直对齐类时,要根据具体需求和设计选择合适的方式,并确保在不同断点下进行测试和调整,以确保在各种屏幕尺寸和设备上都能获得最佳效果。

纵横比

Bootstrap 5 提供了一种方便的方法来创建响应式的视频或幻灯片,通过使用 .ratio 类和 .aspect-ratio-* 类来设置纵横比。

你可以将 .ratio 类与你选择的纵横比类 .aspect-ratio-* 添加到父元素上,并在其中嵌入视频或 iframe 元素。

以下是一个示例,演示如何使用纵横比类创建一个具有16:9纵横比的响应式视频:

在上面的示例中,我们创建了一个父元素,并添加了 .ratio 和 .aspect-ratio-16x9 类。然后,在父元素中嵌入了一个 iframe 元素,该元素包含了一个 YouTube 视频的嵌入链接。

通过使用这些类,父元素会根据其宽度自动调整高度,以保持指定的纵横比。这样,无论父元素的宽度如何改变,嵌入的视频或幻灯片都会保持正确的纵横比,并在不同的屏幕尺寸和设备上呈现良好。

请注意,在使用纵横比类时,确保为嵌入的内容提供适当的宽度和高度属性,以便在没有 CSS 的情况下提供回退样式。

可见性

Bootstrap 5 提供了 .visible 和 .invisible 类来控制元素的可见性。

  • .visible 类将元素设置为可见状态,它会添加 visibility: visible; 样式规则到元素上。这意味着元素将在页面上显示,并响应用户的交互。
  • .invisible 类将元素设置为不可见状态,它会添加 visibility: hidden; 样式规则到元素上。这样,元素仍然占据空间,但用户将无法看到它,也无法与其进行交互。

请注意,.visible 和 .invisible 类不会更改元素的 CSS display 值。它们只会通过添加 visibility 属性来控制元素的可见性。

以下是一个示例,演示如何使用 .visible 和 .invisible 类:



	
		Bootstrap 实例
		
		
		
		
	
	
		

这是可见的文本。

在上面的示例中,第一个段落使用 .visible 类,使其可见。第二个段落使用 .invisible 类,使其不可见。两个段落都存在于 HTML 中,但只有第一个段落对用户可见。

请注意,在使用可见性类时,你可以根据需要自定义其他样式来调整元素的外观和行为。例如,你可以结合使用这些类和其他 Bootstrap 类,如 .d-none(隐藏元素)和 .d-block(显示元素),以实现更复杂的可见性控制。

关闭图标

Bootstrap 5 提供了 .btn-close 类来设置关闭图标的样式。这个类通常用于警告框和模态框中,以便用户可以关闭它们。

.btn-close 类将元素设置为一个带有默认样式的关闭图标。该类添加了一个带有 × 文本内容的伪元素 ::before,并为其设置了 content 属性。此外,它还设置了一些基本样式,如颜色、字体大小、位置和光标类型。

以下是一个示例,演示如何使用 .btn-close 类:



	
		Bootstrap 实例
		
		
		
		
	
	
		

在上面的示例中,我们创建了一个警告框,并在其中添加了一个关闭按钮。关闭按钮具有 .btn-close 类,这使它具有默认的关闭图标样式。此外,我们还使用了 Bootstrap 5 的 dismiss 插件,使关闭按钮可以关闭警告框。

请注意,在使用 .btn-close 类时,你可以根据需要自定义其他样式来调整关闭图标的外观和行为。例如,你可以结合使用这个类和其他 Bootstrap 类,如 .btn-sm(小型按钮)和 .text-danger(红色文本),以实现更复杂的关闭图标控制。

屏幕阅读器

Bootstrap 5 提供了 .visually-hidden 类,可以在所有设备上隐藏元素,但对于屏幕阅读器来说是可见的。

.visually-hidden 类将元素设置为不可见,同时保持其可访问性。这意味着元素对于普通用户是不可见的,但对于使用屏幕阅读器的用户是可见的。这样做是为了确保屏幕阅读器用户能够获取到元素的内容。

以下是一个示例,演示如何使用 .visually-hidden 类:



	
		Bootstrap 实例
		
		
		
		
	
	
		

在上面的示例中,我们创建了一个带有购物车图标的按钮。购物车文本使用了 .visually-hidden 类,这样它对于普通用户来说是不可见的,但对于屏幕阅读器用户来说是可见的。这样,屏幕阅读器用户将能够听到按钮的含义。

请注意,在使用 .visually-hidden 类时,你可以根据需要自定义其他样式来调整元素的外观和行为。例如,你可以结合使用这个类和其他 Bootstrap 类,如 .sr-only(仅屏幕阅读器可见)和 .text-danger(红色文本),以实现更复杂的可访问性控制。

颜色

下面列出了所有文本和背景颜色类的列表:

针对文本颜色的类是:

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
  • .text-secondary
  • .text-white
  • .text-dark
  • .text-body(默认 body 颜色/通常为黑色)
  • .text-light


	
		Bootstrap 实例
		
		
		
		
	
	
		

上下文颜色

此文本已静音。

此文字很重要。

此文本表示成功。

此文字代表了一些信息。

此文本表示警告。

此文字代表危险。

次要文本。

此文字为深灰色。

默认主体颜色(通常为黑色)。

此文本为浅灰色(在白色背景上)。

这段文字是白色的(在白色背景上)。

注意:上下文文本类也可用于链接:




  Bootstrap Example
  
  
  
  







还可以使用 .text-black-50 或 .text-white-50 类为黑色或白色文本添加 50% 的不透明度:




  Bootstrap 实例
  
  
  
  



不透明度文本颜色

白色背景上不透明度为 50% 的黑色文本

黑色背景上不透明度为 50% 的白色文本

背景颜色

针对背景颜色的类是:

  1. .bg-primary
  2. .bg-success
  3. .bg-info
  4. .bg-warning
  5. .bg-danger
  6. .bg-secondary
  7. .bg-dark
  8. .bg-light

请注意,背景颜色不会设置文本颜色,因此在某些情况下,需要将它们与 .text-* 类一起使用。



	
		Bootstrap 实例
		
		
		
		
	
	
		
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-body
.bg-white
.bg-transparent

注意:.bg-gradient 类可以设置背景颜色渐变的效果。



	
		Bootstrap 实例
		
		
		
		
	
	
		
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-body
.bg-white
.bg-transparent

你可能感兴趣的:(Bootstrap,学习,bootstrap,前端)