按钮
按钮是页面中常用的组成部分，当用户单击了页面中的按钮后，可以根据不同的按钮实现不同的功能。例如，当用户单击页面中的登录按钮时，让页面跳转到登录成功后的页面。
在Bootstrap中，包含了几个预定义的按钮样式，每个样式都有自己的语义用途，并附带了一些额外的功能以获得更多的控制。
下面通过例6-1演示Bootstrap中按钮的实现方式。
【例6-1】
创建C:\Bootstrap\chapter06\demo01.html文件，具体代码如下。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
8 </head>
9 <body>
10 <button type="button" class="btn btn-primary">主按钮</button>
11 </body>
12 </html>上述代码中，第7行代码引入bootstrap.min.css核心文件；第10行代码定义按钮结构，设置按钮的type属性值为button，表示按钮；设置按钮的类为.btn和.btn-primary，表示在.btn类的基础上添加.btn-primary类，主要是用来实现主按钮的结构样式。
在浏览器中打开demo01.html文件，运行结果如图1所示。
图1 主按钮
需要注意的是，除了btn-primary之外，还包括btn-secondary、btn-success和btn-danger等类，分别实现不同的按钮样式效果，但是它们的实现方式相同。
我们在定义按钮时，除了设置按钮基本的样式之外，Bootstrap框架还提供了一些特定的类。通过这些类可以设置自定义按钮的大小、状态等。
禁用文本换行
在实现按钮的样式时，如果按钮中的文本内容超出了按钮的宽度，默认情况下，按钮中的内容会自动换行排列，如果不希望按钮文本换行，可以在按钮中添加.text-nowrap类。修改demo01.html代码，具体代码如下。
1 <head>
2 <style>
3 button {
4 width: 100px;
5 }
6 </style>
7 </head>
8 <body>
9 <button type="button" class="btn btn-primary">主按钮主按钮主按钮</button>
10 </body>上述代码中，第4行代码定义按钮的宽度为100px；第9行代码定义按钮内容，并且让按钮中的文本内容超出按钮设置的宽度。
刷新浏览器页面，运行结果如图2所示。
图2 初始页面
修改demo01.html中的代码，具体代码如下。
<button type="button" class="btn btn-primary text-nowrap">
主按钮主按钮主按钮
</button>上述代码中，为按钮添加了.text-nowrap类，表示禁止文本换行。
刷新浏览器页面，运行结果如图3所示。
图3 禁止文本换行
需要注意的是，在默认情况下，当内容超出按钮的宽度时，按钮中的文本内容会自动换行，不需要手动添加.text-wrap类。
2. 设置按钮的大小
在Bootstrap中，除了可以直接设置禁止文本换行外，还可以通过类调节按钮的大小，修改demo01.html代码，具体代码如下，具体代码如下。
<button type="button" class="btn btn-primary btn-lg">主按钮</button>
<button type="button" class="btn btn-primary btn-sm">主按钮</button>上述代码中，分别为按钮添加.btn-lg和.btn-sm类，其中.btn-lg表示大按钮，.btn-sm表示小按钮。
刷新浏览器页面，运行结果如图4所示。
图4 设置按钮大小
隐藏目录
