bootstrap样式大全 bootstrap

编程之家2026-07-041179次浏览

这篇文章给大家聊聊关于bootstrap样式大全，以及bootstrap对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。

bootstrap样式按钮有哪些

Bootstrap提供了丰富的按钮样式，主要分为基础样式、尺寸样式和状态样式三类：

一、基础样式

.btn：所有按钮的基础类，提供圆角灰色外观，是其他样式的底层基础。.btn-default：默认按钮，白色背景，按下时呈现灰色。.btn-primary：原始状态按钮，通常用于未操作时的主按钮，颜色为蓝色。.btn-success：表示成功操作的按钮，颜色为绿色。.btn-info：用于弹出信息或提示的按钮，颜色为浅蓝色。.btn-warning：表示需要谨慎操作的按钮，颜色为橙色。.btn-danger：表示危险操作的按钮，颜色为红色。.btn-link：让按钮看起来像链接，但仍保留按钮行为，无背景色。二、尺寸样式

.btn-lg：大尺寸按钮，适用于需要突出显示的场景。.btn-sm：小尺寸按钮，适用于紧凑布局。.btn-xs：超小尺寸按钮，适用于极简设计（Bootstrap 3.3.7支持，但后续版本可能移除）。.btn-block：块级按钮，宽度拉伸至父元素的100%，适合全宽布局。三、状态样式

.active：按钮被点击时的激活状态，呈现按压外观（深色背景、边框和阴影）。.disabled：禁用按钮，颜色变淡50%，失去渐变效果，且无法交互。组合使用示例

基础样式可与尺寸样式叠加，如：

<button class="btn btn-primary btn-lg">大尺寸主按钮</button><button class="btn btn-danger btn-block">全宽危险按钮</button>注意事项

Bootstrap 3.3.7的按钮样式需通过类名直接定义，而按钮组（如<div class="btn-group">）可实现横向排列。更多高级用法（如嵌套、垂直分组）可参考官方文档或基础教程。

如何修改bootstrap样式

一、段落

段落是排版中另一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式（这里所说的文本是指正文文本）：

1、全局文本字号为14px(font-size)。

2、行高为1.42857143（line-height），大约是20px(大家看到一串的小数或许会有疑惑，其实他是通过LESS编译器计算出来的，当然Sass也有这样的功能)。

3、颜色为深灰色（#333）；

二、文字样式

在实际项目中，对于一些重要的文本，希望突出强调的部分都会做另外的样式处理。Bootstrap同样对这部分做了一些轻量级的处理。

如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。

1.粗体：在Bootstrap中，可以使用<b>和<strong>标签让文本直接加粗。

2.斜体：在Bootstrap中，可以使用<em>或<i>来实现文本斜体。

三、强调类

.text-muted：提示，使用浅灰色（#999）

.text-primary：主要，使用蓝色（#428bca）

.text-success：成功，使用浅绿色(#3c763d)

.text-info：通知信息，使用浅蓝色（#31708f）

.text-warning：警告，使用黄色（#8a6d3b）

.text-danger：危险，使用褐色（#a94442）

<div class="text-muted">.text-muted效果</div>

<div class="text-primary">.text-primary效果</div>

<div class="text-success">.text-success效果</div>

<div class="text-info">.text-info效果</div>

<div class="text-warning">.text-warning效果</div>

<div class="text-danger">.text-danger效果</div>

四、文本对齐

在排版中离不开文本的对齐方式。在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格：

☑左对齐，取值left

☑居中对齐，取值center

☑右对齐，取值right

☑两端对齐，取值justify

为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：

☑.text-left：左对齐

☑.text-center：居中对齐

☑.text-right：右对齐

☑.text-justify：两端对齐

有了文字样式，使得排版效果更清晰简洁，希望大家在自己的作品中多使用一些简单大方的文字样式，使作品脱颖而出，更加具有吸引力。

（望楼主采纳哦）

怎么修改bootstrap样式的字体