4.1、Bootstrap V4自学之路------组件---按钮
1、一个示例
<!-- 确定按钮 --> <button type="button" class="btn btn-primary">Primary</button> <!-- 次等按钮，比如取消--> <button type="button" class="btn btn-secondary">Secondary</button> <!-- 指示成功或积极行为 --> <button type="button" class="btn btn-success">Success</button> <!-- 信息提醒按钮--> <button type="button" class="btn btn-info">Info</button> <!-- 提示需要谨慎的行为 --> <button type="button" class="btn btn-warning">Warning</button> <!-- 表示危险或潜在的负作用行为 --> <button type="button" class="btn btn-danger">Danger</button> <!-- 强调一个按钮，使它看起来像一个链接的同时保持按钮的行为 --> <button type="button" class="btn btn-link">Link</button>
<button type="button" class="btn btn-success" value="Success">
默认样式的<button>就不写了，哈哈 样子比较起来真的好难看。
PS：通过BS的学习，发现在web开发时，代码也存在语义。真是大大的丰富了文本的内涵。感觉很赞。
2、按钮标签
<a class="btn btn-primary" href="#">Link</a> <a class="btn btn-primary" href="#" role="button">Link</a> <button class="btn btn-primary" type="submit">Button</button> <input class="btn btn-primary" type="button" value="Input"> <input class="btn btn-primary" type="submit" value="Submit">
PS： 1、.btn 类可以是在用<a>、<button>、<input type=button>和<input type=sumbit>中。
2、<a>标签中的role属性，其意义有两种。一：纯语义。二：协助其他控件（屏幕阅读器）传达某个指定意义
3、描边按钮
需要一个按钮，但是不要他们自带的背景颜色？请用 .btn-*-outline 代替默认的修饰类，移除这些按钮上面的所有的背景底图和底色。
<button type="button" class="btn btn-primary-outline">btn-primary-outline</button> <button type="button" class="btn btn-secondary-outline">btn-secondary-outline</button> <button type="button" class="btn btn-success-outline">btn-success-outline</button> <button type="button" class="btn btn-warning-outline">btn-warning-outline</button> <button type="button" class="btn btn-danger-outline">btn-danger-outline</button>
PS：如上所述，也可以使用在<a>、<button>和<input>中。
4、按钮尺寸
<div class="row"> <div class="col-sm-12"> <button type="button" class="btn btn-primary btn-lg">class="btn btn-primary btn-lg"</button> <button type="button" class="btn btn-secondary btn-lg">class="btn btn-secondary btn-lg"</button> </div> </div> <div class="row"> <div class="col-sm-12"> <button type="button" class="btn btn-primary">class="btn btn-primary"</button> <button type="button" class="btn btn-secondary">class="btn btn-secondary"</button> </div> </div> <div class="row"> <div class="col-sm-12"> <button type="button" class="btn btn-primary btn-sm">class="btn btn-primary btn-sm"</button> <button type="button" class="btn btn-secondary btn-sm">class="btn btn-secondary btn-sm"</button> </div> </div>
PS：从高度看出每个尺寸的差别。
下图是使用 .btn-block类。将按钮元素充满整个父类宽度。
<div class="col-sm-4"> <button type="button" class="btn btn-primary btn-lg btn-block">class="btn-lg btn-block"</button> <button type="button" class="btn btn-secondary btn-lg btn-block">class="btn-lg btn-block"</button> </div> <div class="col-sm-4"> <button type="button" class="btn btn-primary btn-block">class="btn-block"</button> <button type="button" class="btn btn-secondary btn-block">class="btn-block"</button> </div> <div class="col-sm-4"> <button type="button" class="btn btn-primary btn-sm btn-block">class="btn-sm btn-block"</button> <button type="button" class="btn btn-secondary btn-sm btn-block">class="btn-sm btn-block"</button> </div>
5、激活状态
激活状态是指，按钮呈现被按下时的样子。只需要在按钮上 .active 类
<a href="#" class="btn btn-primary btn-lg" role="button">Primary link</a> <a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a> <a href="#" class="btn btn-secondary btn-lg" role="button">Link</a> <a href="#" class="btn btn-secondary btn-lg active" role="button">Link</a>
PS：效果确实是hover的状态。但鼠标浮动在 .active类的按钮上时，颜色会更加深一些
6、禁用状态
<div class="col-sm-12"> <div>《button》标签可以使用HTML5的属性 disabled在禁止使用，光标会变禁用样式</div> <button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button> <button type="button" class="btn btn-secondary btn-lg" disabled>Button</button> </div> <div class="col-sm-12"> <div>由于《a》标签不支持disabled属性，则使用bs提供的.disabled类伪装。光标无变化</div> <a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a> <a href="#" class="btn btn-secondary btn-lg disabled" role="button">Link</a> </div>
7、按钮插件
还可以对按钮做更多。可以控制按钮的状态或者为更多组件创建按钮组，像工具栏之类的。
切换状态
<div class="col-sm-12"> <button type="button" class="btn btn-primary" data-toggle="button"> class="btn btn-primary" 增加属性 data-toggle="button" </button> </div> <div class="col-sm-12"> <button type="button" class="btn btn-primary active" data-toggle="button"> class="btn btn-primary active" 增加属性 data-toggle="button" </button> </div>
PS：增加 data-toggle="button" 属性的效果是，点击后按钮保持被active状态。
如果需要初始时就显示active的状态，需要手动加入 .active类和属性aria-pressed="true"。
复选框和单选按钮
复选框
<div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked) </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off"> Checkbox 2 </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off"> Checkbox 3 </label> </div> </div>
使用按钮组，给按钮组加入属性 data-toggle="button"。按钮组中的按钮都享受。
如果需要在初始时就是选装状态，则需要在 <label>标签手动加入 .active类。复选框手动checked。
单选框
<div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected) </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3 </label> </div>
使用按钮组，给按钮组加入属性 data-toggle="button"。按钮组中的按钮都享受。
如果需要在初始时就是选装状态，则需要在 <label>标签手动加入 .active类。复选框手动checked。
方法(function)
$().button('toggle') 切换到按下状态。给按钮一个它已经被激活的外观。
<button id="abc" class="btn btn-success">test</button>
<button onclick="active_btn()" class="btn btn-warning">active_btn()</button>
<script type="text/javascript">
function active_btn(){
$("#abc").button("toggle");
}
</script>
PS： 点击按钮 active_a() ，test目标显示被选中。再次点击，test取消选中。