bootstrap4 css源码分析

目录

• 写在前面
• reboot
• .container，.row，.col
• html组件的实现
• 1、按钮组(Button group)
• 2、卡片(Card)
• 3、表单（Forms）
• 4、输入组
• 4、巨幕（jumbotron）
• 5、模态框（modal）
• 6、导航框

写在前面

bootstrap版本：v4.4.1

简单介绍bootstrap的css架构，如有兴趣请自行阅读源码。

reboot

html，body设置字体、背景颜色、行高等，接下来对块级元素和内联元素进行样式设计，属性集中在margin上。

.container，.row，.col

框架采用栅格式设计，自然有行（row）与列（col）的设计

.container首先通过媒体查询限制在当前视口下的最大宽度，确保container两边预留空间，然后设置padding和margin

@media (min- 576px)
.container {
    max-width: 540px;
}
.container {
    width: 100%;
    /* 设置padding确保内容左右留白*/
    padding-right: 15px;
    padding-left: 15px;
    /* 设置margin确保内容居中*/
    margin-right: auto;
    margin-left: auto;
}

.row采用flex布局

.row {
    /* 声明换行flex*/
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
	/* 换行结构*/
    flex-wrap: wrap;
    /* 负值margin为了抵消container的padding，因为col有留白*/
    margin-right: -15px;
    margin-left: -15px;
}

.col响应式设计flex行为和宽度

.col-md-4 {
    /* 设置flex行为*/
    /* flex: flex-grow, flex-shrink, flex-basis*/
    /* flex-grow: 项目的放大比例，默认为0，即如果存在剩余空间，也不放大*/
    /* flex-shrink: 项目的缩小比例，默认为1，如果空间不足，则该项目缩小，若为0，则不缩小.*/
    /* flex-basis: <length> | auto; 默认为auto，即项目本来大小，可设置长度*/
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    /* 父级元素宽度百分比*/
    max-width: 33.333333%;
}

html组件的实现

1、按钮组(Button group)

.btn-group采用内联弹性盒子inline-flex, 注：display:inline-flex与display:flex的区别flex的container元素的表现形式为内联还是块级元素，与子元素flex-item无关

/* 首先设置按钮组样式为inline-flex */
.btn-group{
  position: relative;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
}

/* 按钮的默认样式都有圆角，需要去除中间按钮圆角*/

/*除去最后一个按钮，所有按钮去掉右侧圆角*/
.btn-group > .btn:not(:last-child){
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
/*除去第一个按钮，所有按钮去除左侧圆角*/
.btn-group > .btn:not(:first-child){
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

按钮组中添加radio, 设置radio隐藏

.btn-group-toggle > .btn input[type="radio"]{
    /* clip属性的作用是创建一个只有元素的部分区域可以显示的剪切区域，只对absolute元素有效，将要废弃，可用clip-path替代*/
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}
/*替代方法*/
.btn-group-toggle > .btn input[type="radio"]{
    position: absolute;
    clip-path: circle(0);
    pointer-events: none;
}

按钮组中添加dropdown

按钮组中，添加一个

 

作为dropdown的包含器，将带伪类的一个button元素作为dropdown，伪类三角形可参考css实现各种形状

2、卡片(Card)

卡片采用竖向flex设计

3、表单（Forms）

• 普通表单

  <form>
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
      <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1">
    </div>
    <div class="form-group form-check">
      <input type="checkbox" class="form-check-input" id="exampleCheck1">
      <label class="form-check-label" for="exampleCheck1">Check me out</label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
  

表单组（form-group），一般用于标签加输入框的组合：

form的样式采用默认form样式，为一个块级元素;form-group做了一个margin-bottom的调整；内部label，input，small等元素修改为块级元素，input宽度100%，充满form。

• 内联表单(inline-form)

  内联表单采用flex布局

  .form-inline {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center;
  }
  
  .form-inline .form-group {
      display: -ms-flexbox;
      display: flex;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      -ms-flex-flow: row wrap;
      flex-flow: row wrap;
      -ms-flex-align: center;
      align-items: center;
      margin-bottom: 0;
  }
  

4、输入组

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

.input-group {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: stretch;
  /* 弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。*/
  align-items: stretch;
  width: 100%;
}

.input-group > .form-control{
    position: relative;
    -ms-flex: 1 1 0%;
	/* flex： flex-grow，flex-shink， flex-basis*/
    /* flex-basis指元素的初始宽度，这里设为0%，就是说开始没有占空间，flex-grow设为1后，可充满剩余空间*/
    flex: 1 1 0%;
    min-width: 0;
    margin-bottom: 0;
}

4、巨幕（jumbotron）

占据整个视口的块级元素

.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
  border-radius: 0.3rem;
}

5、模态框（modal）

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

/**首先用.model初始化一个充满视口的灰暗背景，fixed布局*/
.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
}
/* 然后做一个包裹器，用于做动画和调整content的位置*/
.modal-dialog {
  position: relative;
  width: auto;
  margin: 0.5rem;
  pointer-events: none;
}
/* 最后的内容是竖向flex布局*/
.modal-content {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
  outline: 0;
}

6、导航框

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

/* 除去ul的默认样式，横向flex布局 */
.nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

/* 导航链接块设为block，并填充内边距 */
.nav-link {
  display: block;
  padding: 0.5rem 1rem;
}