bootstrap3 全局控制总结

代码整理

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
  margin: 0;
}
/*所有控件全部采用 border-box 怪异模型*/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 10px;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/*定义全局字体库、字体大小、行间距、颜色、背景色*/
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}

/*对a标签的全局控制*/
a {
  color: #337ab7;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #23527c;
  text-decoration: underline;
}
a:focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

/*图片显示是自适应,即宽度100%,高度等比例缩放*/
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}
/*图像使用圆形边框*/
.img-circle {
  border-radius: 50%;
}

/*设置文字对其方式*/
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
.text-justify {
  text-align: justify;
}
/*不换行*/
.text-nowrap {
  white-space: nowrap;
}
/*文字大小写、首字母大写的设置*/
.text-lowercase {
  text-transform: lowercase;
}
.text-uppercase {
  text-transform: uppercase;
}
.text-capitalize {
  text-transform: capitalize;
}

/*交互控件需要使用 pointer 鼠标,告诉用户是热点*/
button,
html input[type="button"], // 1
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; // 2
cursor: pointer; // 3
}

作用说明

以后我们的前端工程也需要参考 bootstrap 样式,对HTML控件的全局控制,然后基于这个大前提做样式修改

阅读更多

没有更多推荐了,返回首页