基于Bootstrap框架菜鸟入门教程(推荐)(6)

<!-- 标准的按钮 --> <button type="button">默认按钮</button> <!-- 提供额外的视觉效果,标识一组按钮中的原始动作 --> <button type="button">原始按钮</button> <!-- 表示一个成功的或积极的动作 --> <button type="button">成功按钮</button> <!-- 信息警告消息的上下文按钮 --> <button type="button">信息按钮</button> <!-- 表示应谨慎采取的动作 --> <button type="button">警告按钮</button> <!-- 表示一个危险的或潜在的负面动作 --> <button type="button">危险按钮</button> <!-- 并不强调是一个按钮,看起来像一个链接,但同时保持按钮的行为 --> <button type="button">链接按钮</button>

基于Bootstrap框架菜鸟入门教程(推荐)

按钮大小

使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

下表列出了获得各种大小按钮的 class:

基于Bootstrap框架菜鸟入门教程(推荐)

<p> <button type="button">大的原始按钮</button> <button type="button">大的按钮</button> </p> <p> <button type="button">默认大小的原始按钮</button> <button type="button">默认大小的按钮</button> </p> <p> <button type="button">小的原始按钮</button> <button type="button">小的按钮</button> </p> <p> <button type="button">特别小的原始按钮</button> <button type="button">特别小的按钮</button> </p> <p> <button type="button">块级的原始按钮</button> <button type="button">块级的按钮</button> </p>

基于Bootstrap框架菜鸟入门教程(推荐)

按钮状态

Bootstrap 提供了激活、禁用等按钮状态的 class,下面将进行详细讲解。

激活状态

按钮在激活时将呈现为被按压的外观(深色的背景、深色的边框、阴影)。

下表列出了让按钮元素和锚元素呈激活状态的 class:

基于Bootstrap框架菜鸟入门教程(推荐)

禁用状态

当您禁用一个按钮时,它的颜色会变淡 50%,并失去渐变。

下表列出了让按钮元素和锚元素呈禁用状态的 class:

基于Bootstrap框架菜鸟入门教程(推荐)

按钮标签

您可以在 <a>、<button> 或 <input> 元素上使用按钮 class。但是建议您在 <button> 元素上使用按钮 class,避免跨浏览器的不一致性问题。

下面的实例演示了这点:

<a href="#" role="button">链接</a> <button type="submit">按钮</button> <input type="button" value="输入"> <input type="submit" value="提交">

基于Bootstrap框架菜鸟入门教程(推荐)

七、Bootstrap 图片

在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性,从而让图片在其父元素中更好的缩放。

如果需要让使用了 .img-responsive 类的图片水平居中,请使用 .center-block 类,不要用 .text-center

基于Bootstrap框架菜鸟入门教程(推荐)

<img src="https://www.jb51.net/cinqueterre.jpg" alt="Cinque Terre">

图片形状

通过为 <img> 元素添加以下相应的类,可以让图片呈现不同的形状。

基于Bootstrap框架菜鸟入门教程(推荐)

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wyzssg.html