BootStrap样式笔记

• 【版权所有，文章允许转载，但须以链接方式注明源地址，否则追究法律责任】
• 【创作不易，点个赞就是对我最大的支持】

前言

仅作为学习笔记，供大家参考
总结的不错的话，记得点赞收藏关注哦！

注：以下样式均为class样式，直接写入class属性中

button按钮样式

用法: <button class=”btn btn-XX”>name </button>

按钮有各种颜色选项：

• btn-default为白色
• btn-primary为深蓝色
• btn-success为绿色
• btn-info为浅蓝色
• btn-warning为橙色
• btn-danger为红色

各种尺寸：

• btn-lg用于大按钮
• btn-sm用于小按钮
• btn-xs用于超小的按钮

辅助类的按钮可用：

• btn-block将使按钮跨越整个网格
• active将使按钮看起来像它当前点击
• disabled将使按钮无法单击并显示渐变色。

bootstrap中的居左和居右、居中

1、pull-left和pull-right

2、text-left、text-center和text-right

3、text-center（子元素居中）

4、center-block（自身居中）

5、利用bootstrap中列偏移的概念。例如：col-md-offset-2(外边距向右偏移两列)

6、div中的子元素span垂直（上下）居中

第一种方法

 #divspan{
 width: 85%;
   position: relative;
}
#spans{
width:80%;
  max-width: 100%;
  left: 50%;
  top: 50%;
  position: absolute;
  -webkit-transform: translate(-50%, -50%); /* 水平居中，垂直居中*/
  transform: translate(-50%, -50%); /* 水平居中，垂直居中*/
}

第二种方法

// 父级样式
.parent {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center; /*垂直居中*/
  justify-content: center; /*水平居中*/
}

---

一点点更新