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代码，设置按钮状态为禁止文本换行。修改后的代码如文件所示。
<!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表示小按钮。
本文来自投稿，不代表科技代码立场，如若转载，请注明出处https://www.cwhello.com/276929.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除
