首页 > 代码库 > Bootstrap CSS(三)

Bootstrap CSS(三)

2024-10-07 06:30:02   218人阅读

1.Bootstrap 按钮

任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。Bootstrap 提供了一些选项来定义按钮的样式，可用于<a>, <button>, 或 <input> 元素。

例如：btn btn-default btn-primary btn-success btn-info btn-warning btn-danger btn-link

技术分享

 

1.1按钮大小

技术分享

 

1.2按钮状态

1.2.1激活状态

技术分享

1.2.2禁用状态

技术分享

1.3按钮标签

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

2.Bootstrap 图片

Bootstrap 提供了三个可对图片应用简单样式的 class：

  • .img-rounded：添加 border-radius:6px 来获得图片圆角。
  • .img-circle：添加 border-radius:50% 来让整个图片变成圆形。
  • .img-thumbnail：添加一些内边距（padding）和一个灰色的边框。

3.Bootstrap 辅助类

3.1文本

 技术分享

 

3.2背景

技术分享

3.3其他

技术分享

3.4实例

3.4.1清除浮动

<div class="clearfix"  style="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
  <div class="pull-left" style="background:#58D3F7;">
    向左快速浮动
  </div>
  <div class="pull-right" style="background: #DA81F5;">
    向右快速浮动
  </div>
</div>

 

 技术分享

3.4.2内容居中

<div class="row"> <div class="center-block" style="width:200px;"> 这是 center-block 实例 </div> </div>

技术分享

3.4.3插入符

<p>插入符实例
  <span class="caret"></span>
</p>

3.4.4关闭图标

<p>关闭图标实例
  <button type="button" class="close" aria-hidden="true">
    &times;
  </button>
</p>

4.Bootstrap 响应式实用工具

技术分享

 

Bootstrap CSS(三)


联系
我们