Bootstrap——CSS样式之按钮、图片

目录

可作为按钮使用的标签或元素为<a><button><input>元素添加按钮类(button class)即可使用 Bootstrap 提供的样式。

针对组件的注意事项

  • 虽然按钮类可以应用到 <a><button> 元素,但,导航和导航条组件只支持 <button> 元素。
  • 如果 <a> 元素被作为按钮使用 – 并用于在当前页面触发某些功能而不是用于链接其他页面或链接当前页面中的其他部分,那么,务必为其设置 role="button" 属性。

按钮

按钮样式

<!-- Standard button -->
<button type="button" class="btn btn-default">(默认样式)Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">(首选项)Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">(成功)Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">(一般信息)Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">(警告)Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">(危险)Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">(链接)Link</button>

按钮尺寸
使用btn-lgbtn-mdbtn-xm 就可以获得不同尺寸的按钮。
.btn-block 类可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素。

<p>
  <button type="button" class="btn btn-primary btn-lg">(大按钮)Large button</button>
  <button type="button" class="btn btn-default btn-lg">(大按钮)Large button</button>
</p>
<!-- 其他尺寸类似-->

按钮状态

当按钮处于激活状态时,其表现为被按压下去(底色更深、边框夜色更深、向内投射阴影)。对于 <button> 元素,是通过 :active 状态实现的。对于 <a> 元素,是通过 .active 类实现的。然而,你还可以将 .active 应用到 <button> 上(包含 aria-pressed="true" 属性)),并通过编程的方式使其处于激活状态。

为按钮添加disabled类可以实现禁用的效果
按钮组的使用

<!--在 div 中直接使用 .btn-group 可以创建按钮组:-->
<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

<!--使用 .btn-group-lg|sm|xs 来控制按钮组的大小:-->
<div class="btn-group btn-group-lg"></div>

<!--如果要设置垂直方向的按钮可以通过 .btn-group-vertical 类来设置:-->
<div class="btn-group-vertical"></div>

<!--可以通过 .btn-group-justified 类来设置自适应大小的按钮组。-->
<div class="btn-group-justified"></div>

图片

响应式图片

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

图片形状

<img src="..." alt="..." class="img-rounded"><!--图片圆角显示-->
<img src="..." alt="..." class="img-circle"><!--圆形显示-->
<img src="..." alt="..." class="img-thumbnail"><!--图片加白色边框显示-->
发布了12 篇原创文章 · 获赞 5 · 访问量 640

猜你喜欢

转载自blog.csdn.net/qq_44091773/article/details/104683348