/ css

bootstrap

bootstrap

相关开发资源:

布局容器

container 类用于固定宽度并支持响应式布局的容器。

container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

表单布局

https://v3.bootcss.com/css/#forms-example

栅格系统

栅格类 .col-xs-* 必须放在 row 内使用。

所有列(column)必须放在 .row 内:

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
  • 列(column)必须放在 .row 内。
  • .row 必须放在 container-fluidcontainer 内。

实践记录:

  • container 和嵌套 container 使用。
  • container 和嵌套 container-fluid 使用?

因为 列(column) 都是 float 的,所以 .row 的高度是 0,为了解决这个问题,Bootstrap 使用伪类,添加了清除浮动的代码。

.rowcontainercontainer-fluid 等(还有其他类)都有清除浮动的代码:

.clearfix:before, .clearfix:after,
.container:before, .container:after, 
.container-fluid:before, .container-fluid:after, 
.row:before, .row:after,
.form-horizontal .form-group:before, 
.form-horizontal .form-group:after {
  display: table;
  content: " ";
}

常见布局是

  1. .form-horizontal 嵌套 .form-group 嵌套 列(column)
  2. .container.container-fluid) 嵌套 .row 嵌套 列(column)

定制使用 bootstrap 的方式

css 覆盖

<!-- bootstrap -->
<link href="/css/bootstrap/bootstrap.css" rel="stylesheet" />
<link href="/css/bootstrap/bootstrap-overrides.css" type="text/css" rel="stylesheet" />

从 less 或 sass 源码定制

理解 Bootstrap

AO 模式:

  • A, 表示 Append, 即 "附加"的意思.
  • O, 表示 Overwrite, 即 "重写" 的意思.

所有的 CSS 组件都是沿用这种思想来设计的.这也是 CSS 的特性, 不同名的样式可以叠加在一起使用;同名的样式,优先级高的会覆盖优先级低的,优先级相同时后面的会覆盖前面的,从而达到组合应用的效果.

  1. 基础样式, 例如: btn, alert
  2. 颜色样式, 例如: btn-info, alert-success
  3. 尺寸样式, 例如: btn-ns, btn-sm, btn-lg
  4. 状态样式, 例如: active, disabled
  5. 特殊元素样式, 例如: dropdown-menu>li>a:hover
  6. 并列元素样式, 例如: btn-group.btn+.btn
  7. 嵌套子元素样式, 例如: btn-group.btn-group
  8. 动画样式, 例如: progress.active

bootstrap-sass

.navbar-btn {
  @include navbar-vertical-align($input-height-base);

  &.btn-sm {
    @include navbar-vertical-align($input-height-small);
  }
  &.btn-xs {
    @include navbar-vertical-align(22);
  }
}

.navbar-form {
  margin-left: -$navbar-padding-horizontal;
  margin-right: -$navbar-padding-horizontal;
  padding: 10px $navbar-padding-horizontal;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  $shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
  @include box-shadow($shadow);

  // Mixin behavior for optimum display
  @include form-inline;

  .form-group {
    @media (max-width: $grid-float-breakpoint-max) {
      margin-bottom: 5px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  // Vertically center in expanded, horizontal navbar
  @include navbar-vertical-align($input-height-base);

  // Undo 100% width for pull classes
  @media (min-width: $grid-float-breakpoint) {
    width: auto;
    border: 0;
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    @include box-shadow(none);
  }
}

.navbar-nav {
  margin: ($navbar-padding-vertical / 2) (-$navbar-padding-horizontal);

  > li > a {
    padding-top:    10px;
    padding-bottom: 10px;
    line-height: $line-height-computed;
  }

  @media (max-width: $grid-float-breakpoint-max) {
    // Dropdowns get custom display when collapsed
    .open .dropdown-menu {
      position: static;
      float: none;
      width: auto;
      margin-top: 0;
      background-color: transparent;
      border: 0;
      box-shadow: none;
      > li > a,
      .dropdown-header {
        padding: 5px 15px 5px 25px;
      }
      > li > a {
        line-height: $line-height-computed;
        &:hover,
        &:focus {
          background-image: none;
        }
      }
    }
  }

  // Uncollapse the nav
  @media (min-width: $grid-float-breakpoint) {
    float: left;
    margin: 0;

    > li {
      float: left;
      > a {
        padding-top:    $navbar-padding-vertical;
        padding-bottom: $navbar-padding-vertical;
      }
    }
  }
}

css 口诀

width: 100%; /* 宽度充满父元素 */
heigt: auto; /* 高度自适应 */

/* 水平居中 */
margin-left: auto;
margin-right: auto;