Bootstrap中CSS组件总结（下）

最新推荐文章于 2024-08-16 08:03:25 发布
置顶 最新推荐文章于 2024-08-16 08:03:25 发布
阅读量925 收藏 3
点赞数
分类专栏： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41985570/article/details/82149049
版权

六、面包屑

定义：面包屑组件类似于树杈分支导航，从网站首页逐级导航到详细页，使用breadcrumb类样式，可以把列表结构设计成面包屑导航样式。

基本结构：

<ul class="breadcrumb">
	<li><a href="#">首页</a></li>
	<li><a href="#">新闻频道</a></li>
	<li><a href="#">国内新闻</a></li>
	<li class="active">新闻详细页</li>
</ul>

七、分页组件

定义：Bootstrap 3.0提供了两种风格的分页组件：一种是多页面导航，用于多个页面的跳转，它具有极简风格的分页提示，能够很好的应用在结果搜索页面；另外一种则是翻页，可以快速翻动上下页，适用于个人博客或者杂志。使用pagination类可以设计标准的分页组件样式。

基本结构：

<ul class="pagination">
	<li><a href="#">Prev</a></li>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">Next</a></li>
</ul>

注意：pagination类只能应用于列表包含框上

1、设置大小

分页组件按钮是可以调整大小的，Bootstrap提供了两套尺寸供用户选择：

  • pagination-lg：大号分页按钮样式
  • pagination-sm：小号分页按钮样式

2、设置激活和禁用

在分页组件中，可以根据不同情况定制链接：

  • disabled：设置链接不可点击（在li上添加）
  • active：标明当前页面

3、定义翻页组件

定义：翻页组件是另一类分页组件样式，它用更少的标签和样式来创建简单的“前一页”和“后一页”。使用pager类样式可以设计翻页组件，该组件仅有两个列表项。

基本结构：

<ul class="pager">
	<li class="previous"><a href="#">上一页</a></li>
	<li class="next"><a href="#">下一页</a></li>
</ul>

注意：使用previous和next类，可以把链接向两端对齐

八、标签和徽章

定义：标签是一个很好用的页面小元素，Bootstrap具有多种颜色标签，表达不同的页面信息，只需要使用label类定义即可；

            徽章是细小而简单的组件，用于指示或者计算某种类别的元素，只需要使用badge类定义即可。

基本结构：

标签：

<span class="label label-default">默认标签样式</span><!-- label-default,默认样式，灰色显示 -->
<span class="label label-primary">重要标签样式</span><!-- label-primary,重要样式，深蓝色显示 -->
<span class="label label-info">信息标签样式</span><!-- label-info,信息样式，浅蓝色显示 -->
<span class="label label-success">成功标签样式</span><!-- label-success,成功样式，亮绿色显示 -->
<span class="label label-warning">警告标签样式</span><!-- label-warning,警告样式，黄色显示 -->
<span class="label label-danger">危险标签样式</span><!-- label-danger,危险样式，红色显示 -->

徽章：

<ul class="nav nav-pills nav-stacked">
	<li class="active">
		<a href="#"><span class="badge pull-right">12</span>链接</a>
	</li>
</ul>

九、缩略图

定义：缩略图多应用于图片、视频的搜索结果等页面，还可以链接到其他页面。它还具有很好的可定制性，可以将文章片段、按钮等标签融入缩略图，可同时混合与匹配不同大小的缩略图。组成缩略图的标签：使用<ul>标签包裹任意数量的<li>。

基本结构：

<ul class="thumbnails">
	<li class="col-xs-1">
		<a href="#" class="thumbnail"><img src="images/1.jpg"></a>
	</li>
	<li class="col-xs-2">
		<a href="#" class="thumbnail"><img src="images/2.jpg"></a>
	</li>
	<li class="col-xs-3">
		<a href="#" class="thumbnail"><img src="images/3.jpg"></a>
	</li>
	<li class="col-xs-4">
		<a href="#" class="thumbnail"><img src="images/4.jpg"></a>
	</li>
</ul>

注意：

  1. 在<ul>标签中引入thumbnails类，指定当前列表框为缩略图集；
  2. 在<a>标签中引入thumbnail类，设置当前超链接包含图像为缩略图效果；
  3. 在设计缩略图大小时，建议使用栅格中的尺寸；
  4. 如果在缩略图中自定义HTML内容，标签的变化不大，为了放进块级内容，可以把<a>替换成<div>；

十、警告框

定义：警告框为用户提供少数可用且灵活的反馈信息，使用alert类可以设计警告框组件。

基本结构：

<!--危险，提示危险性信息-->
<div class="alert alert-danger">
	<button type="button" class="close" data-dismiss="alert">&times;</button>
	<strong>危险</strong>
</div>
<!--警告，提示错误性信息-->
<div class="alert alert-warning">
	<button type="button" class="close" data-dismiss="alert">&times;</button>
	<strong>警告</strong>
</div>
<!--成功，提示正确性信息-->
<div class="alert alert-success">
	<button type="button" class="close" data-dismiss="alert">&times;</button>
	<strong>成功</strong>
</div>
<!--信息，提示一般信息-->
<div class="alert alert-info">
	<button type="button" class="close" data-dismiss="alert">&times;</button>
	<strong>信息</strong>
</div>

注意：

  • class="close"：定义关闭按钮；
  • data-dismiss="alert"：激活关闭按钮；
  • 使用带有data属性的<button>标签时，必须包含type="button"属性，否则将无法执行提交动作；
  • 如果在警告框中添加链接，则应该在<a>中附加alert-link类，可以快速提供在任何警告框中相符的颜色；

十一、进度条

定义：进度条一般由嵌套的两层结构标签构成，外层标签引入progress类，用来设计进度槽；内层标签引入progress-bar类，用来设计进度条。

基本结构：

<div class="progress">
	<div class="progress-bar" style="width:50%"></div>
</div>
<!--  progress-striped设计条纹样式 -->
<div class="progress progress-striped">
	<div class="progress-bar" style="width:50%"></div>
</div>
<!--  active设计从右到左变化的样式 -->
<div class="progress progress-striped active">
	<div class="progress-bar" style="width:50%"></div>
</div>

1、设置个性进度条

定义：与警告框一样，进度条也允许通过添加其他类改变进度条的背景效果。

基本结构：

<!--  progress-bar-info,浅蓝色背景 -->
<div class="progress">
	<div class="progress-bar progress-bar-info" style="width:40%;"></div>
</div>
<!--  progress-bar-success,浅绿色背景 -->
<div class="progress">
	<div class="progress-bar progress-bar-success" style="width:40%;"></div>
</div>
<!--  progress-bar-warning,浅黄色背景 -->
<div class="progress">
	<div class="progress-bar progress-bar-warning" style="width:40%;"></div>
</div>
<!--  progress-bar-danger,浅黄色背景 -->
<div class="progress">
	<div class="progress-bar progress-bar-danger" style="width:40%;"></div>
</div>

十二、版式

1、大屏幕区块

定义：大屏幕区块是一个轻量、灵活的用于展示网站重点内容的组件，适合应用于营销类或内容类网站，使用jumbotron类设计大屏幕区块。

基本结构：

<div class="jumbotron">
	<h1>大屏幕标题</h1>
	<p>说明性文字</p>
	<p><a class="btn btn-primary btn-lg">更多</a></p>
</div>

2、页面标题

定义：page-header类可以设计网页标题，它相当于一个标题框，可以给<h1>标签套上一个包含框，这样就可以为其增加间隔并从页面中分离出来。

基本结构：

<div class="jumbotron">
	<div class="page-header">
		<h1>网页标题<small>附加信息</small></h1>
	</div>
</div>

 

3、列表组

定义：不仅用于显示简单的列表元素，还用于复杂的定制内容。

基本结构：

<ul class="list-group">
	<li class="list-group-item">项目1</li>
	<li class="list-group-item">项目2</li>
	<li class="list-group-item">项目3</li>
	<li class="list-group-item">项目4</li>
</ul>

 

在列表组内可以添加任何内容：

<div class="list-group">
	<a href="#" class="list-group-item active">
		<h4 class="list-group-item-heading">列表项标题1</h4>
		<p class="list-group-item-text">列表项正文1</p>
	</a>
	<a href="#" class="list-group-item">
		<h4 class="list-group-item-heading">列表项标题2</h4>
		<p class="list-group-item-text">列表项正文2</p>
	</a>
	<a href="#" class="list-group-item">
		<h4 class="list-group-item-heading">列表项标题3</h4>
		<p class="list-group-item-text">列表项正文3</p>
	</a>
</div>

 

注意： 

  • class="list-group"：定义列表组；
  • class="list-group-item"：定义列表组项目；
  • 列表组还支持非列表结构，因此用户可以使用<a>标签代替<li>标签，使用<div>标签代替<ul>标签；
  • class="list-group-item-heading"：为每个列表项添加项目标题；
  • class="list-group-item-text"：为每个列表项添加正文；

4、面板

定义：面板是一种特殊样式的版式容器，常用来设计折叠项目以及其他标准栏目。默认使用panel类设计面板。

基本结构：

<div class="panel panel-default">
	<div class="panel-heading">面板标题</div>
	<div class="panel-body">面板内容</div>
</div>
<div class="panel panel-default">
	<div class="panel-heading">
		<h3 class="panel-title">面板预定义标题</h3>
	</div>
	<div class="panel-body">面板正文</div>
	<div class="panel-footer">面板脚注</div>
</div>

面板也支持样式类，给特定的面板设计特定的样式：

<div class="panel panel-default">
	<div class="panel-heading">面板标题</div>
	<div class="panel-body">面板内容</div>
</div>
<div class="panel panel-primary">
	<div class="panel-heading">面板标题</div>
	<div class="panel-body">面板内容</div>
</div>
<div class="panel panel-success">
	<div class="panel-heading">面板标题</div>
	<div class="panel-body">面板内容</div>
</div>
<div class="panel panel-info">
	<div class="panel-heading">面板标题</div>
	<div class="panel-body">面板内容</div>
</div>
<div class="panel panel-warning">
	<div class="panel-heading">面板标题</div>
	<div class="panel-body">面板内容</div>
</div>
<div class="panel panel-danger">
	<div class="panel-heading">面板标题</div>
	<div class="panel-body">面板内容</div>
</div>

 

注意：

  • class="panel panel-default"：在外包含框指定面板框；
  • class="panel-heading"：在内层框定义标题容器，也可以用<h1>~<h6>和panel-title类定义预定义样式的标题；
  • class="panel-body"：内层指定面板正文框；
  • class="panel-footer"：定义面板脚注；
  • 面板可以与表格、列表无缝衔接，可以把表格放入panel-body中；

5、Well

定义：Well可以设计一个内嵌容器，能够很好的包含指定对象或者页面内容。

基本结构：

<div class="well">
	<img src="images/6.jpg" style="width:200px;">
</div>

注意：在well中添加well-lg或well-sm类可以调整Well容器的补白空间大小和圆角大小。

 

秋min
关注
专栏目录
Bootstrap 组件
武林半侠的博客
06-01 955
Bootstrap 组件   1.字体图标 Bootstrap3与Bootstrap2的最大差异在于使用了font文件来替代图片，用于显示图标，这些font图片称为Glyphicons--象形文字图标。 可以使用或标签来配合使用，具体如下： //使用小图标 glyphicon glyphicon-star"> glyphicon glyphicon-star"> //也可以结合按钮
Bootstrap-css组件
Leona__的博客
10-30 443
小图标 类名： glyphicon glyphicon-样式 样式： 通过CSS设置字体大小和颜色设置 示例： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wi
CSS 组件库教程
最新发布
gitblog_00858的博客
08-16 252
CSS 组件库教程 css-components项目地址:https://gitcode.com/gh_mirrors/css/css-components 项目介绍 CSS 组件库是一个开源项目，旨在提供一系列可重用的 CSS 组件，帮助开发者快速构建美观且响应式的网页。该项目由 LFeh 维护，包含多种常见的 UI 组件，如按钮、导航栏、列表等。 项目快速启动 安装 首先，克隆项目到本地： ...
Bootstrap CSS组件
热门推荐
WEN38306482的博客
11-20 18万+
一，使用图标组件 如需使用图标，只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。 <span class="glyphicon glyphicon-search"></span> 使用简单，需要哪个图标就引用对应的类即可。 设置图标组件大小，font-size即可。 二，使用下拉菜单组件 下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。 <div class="dropdown"> <button type="button" clas
转：Bootstrap的常用类(CSS和布局组件)的总结
qx1995318的博客
07-25 1149
原文地址：点击打开链接 Bootstrap通过给标签赋予一个类名(class name),来生成对应类名的效果标签 网格选项 row :行 col-*-*: 列 (第一个*可以为xs[超小]/sm[小型]/md[中型]/lg[大型]第二个*必须为12以内的[列数]) col-*-offset-* :列偏移(第一个*和上面一样,第二个*范围是1到11,表示把该列的左
bootstrap——css样式（三、表格）
zaichuanguanshui的专栏
01-18 1110
1、.table 为任意 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。.table { width: 100%; max-width: 100%; margin-bottom: 20px; } td { padding: 8px; line-height: 1.42857143; verti
BootStrap常用组件（全局CSS样式）
m0_46420078的博客
01-28 986
一、全局CSS样式——概述 1、布局容器 Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。 container类 用于固定宽度ving支持响应式布局的容器 container-fluid类 用于100%宽度，占据全部视口（viewport）的容器 ...
Bootstrap CSS组件之下拉菜单(dropdown)
01-19
Bootstrap下拉菜单，常用在开发项目中，今天为大家介绍介绍 dropdown、dropdown-menu、dropdown-header、divider、dropdown-submenu 例子见下拉菜单.html //源码 .dropup, .dropdown { position: relative; } ....
bootstrap.min.css.map
05-12
在前端开发中，Bootstrap是一个非常流行的开源框架，它提供了丰富的CSS样式、JavaScript组件以及字体图标，使得网页设计和开发变得更加高效。"bootstrap.min.css.map"是与Bootstrap相关的文件，尤其在错误排查和调试...
bootstrap中CSS的学习1
08-08
在“bootstrap中CSS的学习1”这个主题中，我们将深入探讨如何使用 Bootstrap 来创建网页，并关注 CSS 和 JavaScript 的基本使用。 首先，我们看到一个简单的 HTML 文件结构，它引入了 Bootstrap 的 CSS 和 ...
bootstrap.css.map
12-06
在标题提到的"bootstrap.css.map"文件中，包含的是Bootstrap CSS源代码映射信息。这个文件对于前端开发者来说具有重要的意义，因为它有助于在调试时快速定位CSS样式。 首先，我们来解释一下什么是CSS Map（Source ...
bootstrap组件类 ( 个人总结 )
weixin_45824120的博客
05-11 482
在bootstrap组件类 - - 栅格 .container 固定 .container 流式（宽100%） .col-* <=576px （*可写可不写，不写自适应） .col-sm-* >=576px .col-md-* >=768px .col-lg-* >=992px .col-xl-* >=1200px /-可混合搭配使用-/ .col-*（屏幕）-auto 根据内容自行改变 .row-clos-* 一行有多少列 .w-100 可让其折行（例子：共有12列，在第1列
Bootstrap中CSS组件总结（上）
qq_41985570的博客
08-28 1871
正确使用CSS组件 因为Bootstrap使用的某些HTML和CSS需要的文档类型为HTML5 doctype，所以要创建html5文档，以确保CSS组件能够正确使用。然后在&lt;head&gt;里引入jquery.js、bootstrap.js、bootstrap.css文件。接下来总结一下Bootstrap的一些常用组件及其使用方法： 一、下拉菜单 定义：下拉菜单组件必须包含在drop...
bootstrap组件
穆雄雄的博客
07-25 471
一、Bootstrap常用的组件： icon图标，下拉菜单，导航，导航条，输入框，缩略图，媒体对象，列表组，分页导航。 二、小图标： 1.bootstrap中内置提供了250多种小图标。 2.语法：首页 三、下拉菜单： 往下拉 NO.1 NO.2 NO.3 NO.4 四、输入框： 姓名 百度一下 五、导航： 1.选项卡导航： class=“nav nav-tabs”...
Bootstrap组件
十三阿哥的博客
05-29 208
组件
Bootstrap CSS组件详解：导航组件
"Bootstrap学习笔记之css组件(3)，主要介绍Bootstrap中的CSS组件，包括导航组件。" Bootstrap是一款广泛使用的前端框架，它简化了网页设计和开发过程，特别是其丰富的CSS组件。在本学习笔记中，我们将关注导航组件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值