web前端全系列 教程
1839个小节阅读:2243k
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
为 <a>
、<button>
或 <input>
元素添加按钮类(button class)即可使用 Bootstrap 提供的样式
xxxxxxxxxx
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
使用下面列出的类可以快速创建一个带有预定义样式的按钮
xxxxxxxxxx
<button type="button" class="btn btn-default">(默认样式)Default</button>
<button type="button" class="btn btn-primary">(首选项)Primary</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>
需要让按钮具有不同尺寸吗?使用 .btn-lg
、.btn-sm
或 .btn-xs
就可以获得不同尺寸的按钮
xxxxxxxxxx
<p>
<button class="btn btn-primary btn-lg">(大按钮)Large button</button>
<button class="btn btn-default btn-lg">(大按钮)Large button</button>
</p>
<p>
<button class="btn btn-primary">(默认尺寸)Default button</button>
<button class="btn btn-default">(默认尺寸)Default button</button>
</p>
<p>
<button class="btn btn-primary btn-sm">(小按钮)Small button</button>
<button class="btn btn-default btn-sm">(小按钮)Small button</button>
</p>
<p>
<button class="btn btn-primary btn-xs">(超小尺寸)Extra small button</button>
<button class="btn btn-default btn-xs">(超小尺寸)Extra small button</button>
</p>
通过给按钮添加 .btn-block
类可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素
xxxxxxxxxx
<button type="button" class="btn btn-primary btn-lg btn-block">(块级元素)Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">(块级元素)Block level button</button>
通过为按钮的背景设置 opacity
属性就可以呈现出无法点击的效果
为 <button>
元素添加 disabled
属性,使其表现出禁用状态
xxxxxxxxxx
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
实时效果反馈
1. 下列那个属性可以设置按钮宽度100%:
A btn-default
B btn-primary
C btn-block
D disabled
答案
1=>C