zoukankan      html  css  js  c++  java
  • bootstrap对HTML标签的默认样式有哪些修改?

     CSS Reset:重新设置HTML标签的默认样式。
      (1)重设了盒子模型的计算方法  * { box-sizing: border-box; }
      (2)重设了所有元素的默认字体   14px/1.42857143 "Helvetica Neue"
      (3)body {  margin: 0;   color: #333;    background-color: #fff;}
      (4)h1~h6 { font-size: xxpx;   margin-top: 20px/10px;  margin-botton: 10px;}
      (5)a { color: #xxxxx;   text-decoration: none;}
    CSS布局陷阱——子元素的margin-top越界:
    若父元素没有上边框/上margin,则第一个子元素的margin-top会越界!
    最佳解决方案:
    .parent2:before {
          content: '  ';
          display: table;
    }
    
    父元素中所有子元素由于浮动造成的影响,最佳解决方案:
    parent:after  {
      content: '  ';
      display: table;
      clear: both;
    }
    6.Boostrap提供的全局CSS样式——按钮相关样式
      提示:按钮相关的样式可以作用于button/input/a三种元素
      .btn              设置了按钮的padding、margin、font、border
      --------------------------------------------------------------------
      .btn-default    设置了按钮的color、background、border
      Bootstrap五种常用颜色:
      .btn-warning    警告色(橙黄色)的按钮
      .btn-danger    危险色(红色)的按钮
      .btn-info        提示色(浅蓝色)的按钮
      .btn-success    成功色(绿色)的按钮
      .btn-primary    基础色(深蓝色)的按钮
     Bootstrap四种大小:
      .btn-lg            大号按钮(large)
      默认            默认大小
      .btn-sm        小号按钮(small)
      .btn-xs            超小号按钮(extra small)
    1.全局CSS样式——图片
      .img-circle            border-radius:50%
      .img-rounded        border-radius:6px;
      .img-thumbnail        border padding
      .img-responsive        max-width  display
    2.全局CSS样式——文本
      .text-warning
      .text-success
      .text-danger
      .text-info
      .text-primary
      -------------------
      .text-lowercase
      .text-uppercase
      .text-capitalize
      -------------------
      .text-left
      .text-center
      .text-right        右对齐
      .text-justify    (两端)调整对齐
     ---------------------
      .bg-warning
      .bg-success
      .bg-danger
      .bg-info
      .bg-primary
    ----------------------
      .pull-left        float: left;
      .pull-right        float: right;
      .clearfix            clear:both;
    -----------------------
      .show            display:block;        
      .hidden            display:none;
    table全局样式
    .table          width   margin-bottom     .table>td
      .table-bordered      border:1px solid #ddd;
      .table-condensed        把单元格的padding有8px改为5px,内容看起来“紧凑”些
      .table-striped        条纹状表格,为奇数tr添加了一个浅色的背景色
      .table-hover            当鼠标悬停在tr上时,添加浅色的背景色
      .table-responsive        响应式表格——屏幕变小时,出现水平滚动条——该class不能用于<table>,只能用于其父元素<div>上!
      --------------------------------------------------------------
      用在tr和td上的class——WebStorm默认没有提示
    .danger        背景色淡红色,且悬停后变为深红色
    .warning        背景色淡黄色,且悬停后变为深黄色
    .info            背景色淡蓝色,且悬停后变为深蓝色
    .success        背景色淡绿色,且悬停后变为深绿色
    .active        背景色淡灰色,且悬停后变为深灰色


    6.全局CSS样式——栅格布局系统——重点

    
    

      两个容器类:

    
    

    .container  宽度固定的容器

    
    

    1170px; 屏幕宽度>=1200

    
    

    970px; 屏幕宽度>=992

    
    

    750px; 屏幕宽度>=768

    
    

    padding-left/right: 15px;

    
    

    margin-left/right: auto;

    
    

    .container:before:   防止第一个子元素的margin-top越界

    
    

    .container:after:  清除子元素浮动造成的影响

    
    

    .container-fluid  流式容器

    
    

     auto;

    
    

    padding-left/right: 15px;

    
    

    .container-fluid:before

    
    

    .container-fluid:after

    Bootstrap提供的响应式网格布局系统——Grid Layout System

    
    

    <div class="container/container-fluid">

    
    

    <div class="row">

    
    

    <div class="col"></div>

    
    

    <div class="col"></div>

    
    

    </div>

    
    

    <div class="row">

    
    

    <div class="col"></div>

    
    

    <div class="col"></div>

    
    

    <div class="col"></div>

    
    

    </div>

    
    

    </div>

    
    
    
    
    

    Bootstrap把屏幕分为四类:

    
    

    (1)xs-超小屏幕(手机):  <768px

    
    

    (2)sm-小屏幕(平板):  >768px    <=992px

    
    

    (3)md-中等屏幕(一般PC显示器):  >992px   <=1200

    
    

    (4)lg-大型屏幕(大型PC显示器):  >1200px

    
    
    
    
    

    .col-xs-1 ~ .col-xs-12 对超小、小、中等、超大屏幕有效

    
    

    .col-sm-1 ~ .col-sm-12 对小屏幕、中等、超大屏幕都有效

    
    

    .col-md-1 ~ .col-md-12 对中等屏幕、超大屏幕有效

    
    

    .col-lg-1 ~ .col-lg-12 只对超大屏幕有效

    
    

    .col-xs-offset-1 ~ .col-xs-offset-12   偏移量

    
    

    .col-sm-offset-1 ~ .col-sm-offset-12   偏移量

    
    

    .col-md-offset-1 ~ .col-md-offset-12   偏移量

    
    

    .col-lg-offset-1 ~ .col-lg-offset-12   偏移量

    
    

    .hidden-xs 在超小屏幕下隐藏

    
    

    .hidden-sm 在小屏幕下隐藏

    
    

    .hidden-md 在中等屏幕下隐藏

    
    

    .hidden-lg 在超大屏幕下隐藏

     
  • 相关阅读:
    计算机网络复习(二) 应用层
    JavaScript实战笔记(二) 数组去重
    计算机网络复习(一) 基本介绍
    计算机网络复习
    Git学习笔记(一) 常用命令
    Git学习笔记
    Python实战笔记(三) 多线程
    Python实战笔记(二) 网络编程
    Python学习笔记
    XBox360自制系统的更新(Update)
  • 原文地址:https://www.cnblogs.com/yexiangwang/p/5020342.html
Copyright © 2011-2022 走看看