更新时间:2023-04-13 来源:传智教育 浏览量:
Bootstrap常用组件包括按钮、导航、菜单和表单等。使用Bootstrap不需要编写复杂的样式代码，只需要使用Bootstrap组件就可以实现复杂的页面架构。下面将对Boolstrap按钮组件进行详细讲解。
Bootstrap提供了多种样式的按钮，每个样式的按钮都有自己的语义用途，并附带了一些额外的功能，以便进行更多的控制。下面通过一个案例演示Bootstrap中按钮的实现方式。在chapter01文件夹中创建名称为bootstrap1的HTML文件。
<!DOOTYEE htnl> <html> <head> <title>bootatrap0l</title> <link rel="stylesheet"href="bootstrap.min.css"> </head> <body> <button type-"button"class="btn btn-primary">主按钮</button> </body> </html>第5行代码引人boostrap.min,css核心文件;第8行代码定义按钮结构，设置按钮的type属性值为button，表示按钮;设置按钮的类名为bn和btn-primary，表示在bm类名的基础上添加bt-primary类名，btn-primary 主要用于实现主按钮的结构样式。
使用浏览器打开bootstrap01.html文件，运行结果如图所示。
需要注意的是，除了btn-primary外，Bootstrap还包括btn-secondary、bn-success和btn-danger等类，分别用于实现不同的按钮样式效果。
在定义按钮时，除了提供按钮的基本样式外，Bootstrap框架还提供了一些特定的类，通过类名可以设置按钮的大小、状态等。下面分别介绍按钮状态和按钮大小的设置。
1.设置按钮状态
在实现按钮时，如果按钮中的文本内容超出了按钮的宽度，在默认情况下按钮中的内容会自动换行排列，如果不希望按钮文本换行，可以在按钮中添加text-nowrap类。下面修改bootstrap0l.html代码，设置按钮状态为禁止文本换行。修改后的代码如文件所示。
JavaEE
鸿蒙应用开发
HTML&JS+前端
Python+大数据开发
人工智能开发
AI+设计
软件测试
新媒体+短视频
集成电路应用开发
AI+Linux云计算运维
<!DOCTYPE html>
<html>
<head>
<style>
button {
width: 100px;
}
</style>
<title>bootstrap0l</title>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<button type="button" class="btn btn-primary text-nowrap">
主按钮主按钮主按钮
</button>
</body>
</html>第6行代码定义按钮的宽度为100ps;第13~15行代码定义按钮内容，并且为按钮添加了texl-nowrap类名，表示禁止文本换行。运行结果如图所示。
2.设置按钮大小
在Bootstrap中，除了可以直接设置按钮状态外，还可以通过类名调节按钮的大小，修改bootstrapl.html代码实现调用不同类名来调节按钮的大小。使用下面代码替换文件中第13~15行代码。
<button type="button" class=" btn btn-prinary btn-Ig ">主按钮</button> <button type="button" class="btn btn-pri_ary btn-sa">主按钮</button>在上述代码中，分别为按钮添加bin-lg和btn-sm类名，其中ben-lg表示大按钮，bin-sm表示小按钮。
.jpg)