bootstap V3框架总结

系统管理员 2021-09-17 14:56 274阅读 0赞

### **准备工作：使用Bootstap第一步：要导入bootstrap.css 和 bootstrap.js以外，必须在<head></head>标签内必须添加：（**不然显示窗口可能就不正常！） ###

### Bootstrap框架的三大核心：全局CSS样式，动态组件（静态组件，JavaScript插件） ###

### 第一部分：全局CSS样式总结： ###

**注：下图是bootstap-v3版本的尺寸图，V4版本的尺寸大小为，768px，992px，1200px**

## ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70][] ##

### ** 栅格布局总结：** ###

**1、栅格系统写在.row(<div class="row">)内，一行（row）= 12col(列)；**

**2、bootstrap把手机电脑平板屏幕大小尺寸分为四个档：**

**xs（0-768px）最大值为：xs屏幕下每一row下，col-xs-12（列）**

**sm（768-992px）最大值为：sm屏幕下每一row下，col-sm-12（列）**

**md（992-1200px）最大值为：md屏幕下每一row下，col-md-12（列）**

**lg（1200px->>）最大值为：lg屏幕下每一row下，col-lg-12（列）**

### **bootstrap栅格布局系统中，兼容原理是 向小尺寸兼容！** ###

**【比如：col-lg-6 col-xs-6】 那么sm和md没有设置的尺寸自动向前一个小尺寸自动兼容，相当于md和sm都是=xs的6列！**

## ##

### **栅格布局列偏移：.col-(xs/sm/md/lg)-offset-\* 【如：col-lg-offset-2】;** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70 1][]

### **栅格布局隐藏和显示（比如手机隐藏，电脑显示都可以设置）：** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70 2][]

## ##

### 其他标准： ###

### **bootstrap框架系统尺寸标准为四个档：xs、sm、md、lg；** ###

### **bootstrap框架系统颜色标准分五个档：** ###

通过这些状态类可以为行或单元格设置颜色。

<table> 
 <thead> 
  <tr> 
   <th>Class</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <th><code>.active</code></th> 
   <td>鼠标悬停在行或单元格上时所设置的颜色</td> 
  </tr> 
  <tr> 
   <th><code>.success</code></th> 
   <td>标识成功或积极的动作</td> 
  </tr> 
  <tr> 
   <th><code>.info</code></th> 
   <td>标识普通的提示信息或动作</td> 
  </tr> 
  <tr> 
   <th><code>.warning</code></th> 
   <td>标识警告或需要用户注意</td> 
  </tr> 
  <tr> 
   <th><code>.danger</code></th> 
   <td>标识危险或潜在的带来负面影响的动作</td> 
  </tr> 
 </tbody> 
</table>

### 第二部分：bootstrap框架动态组件（静态组件+JavaScript插件调用） ###

### **两种调用方法：** ###

**A，不需要写一行js代码，完全用bootstrap框架的 data属性，内置调用js代码实现调用（官方推荐使用！！）**

**B，也可以自己添加静态组件，然后用jquery和bootstrap框架内置的一些js方法调用实现！**

js代码就太熟悉了，这里不总结，主要总结data属性的用法和注意事项！

**bootstrap框架通过data属性实现动态效果的三个核心属性：data-toggle 和 data-target (按钮) / href (<a> 标签)**

**开始js代码调用的属性：data-toggle="modal"**

**指定跳出的模块代码的属性：data-target="\#myModal"**

**特别注意：如果点击的不是按钮，而是<a>标签，那么没有data-target属性，而是设置href="\#myModal"**

//Button按钮为：data-toggle="modal" data-target="#myModal"
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
      Launch demo modal
    </button>
    
    //a标签为：data-toggle="modal" href="#myModal"
    <a class="btn btn-primary btn-lg" data-toggle="modal" href="#myModal">
              Launch demo modal
    </a>
    
    
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

### **注意事项：弹出框使用一定要初始化！** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70]: /images/20210812/4befcf01a1924156b4ed536f22b61cf4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70 1]: /images/20210812/2e14c82c8d1843e8b42c658099cb68f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70 2]: /images/20210812/cd50f2df589a400f9e93092ff9006416.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70 3]: /images/20210812/96598b5497e24078b70ddb7140ba99e5.png