bootstrap bootstraptable 固定列_BootStrap概述（一）

最新推荐文章于 2023-09-07 16:53:29 发布

weixin_39684898

最新推荐文章于 2023-09-07 16:53:29 发布

阅读量172

点赞数

文章标签： bootstrap bootstraptable 固定列 bootstrap元素宽度 bootstrap左右布局模板 bootstrap文件不能被识别 bootstrap是什么 bootstrap框架概述

@[toc]

BootStrap概述（一）

1、什么是BootStrap

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

图解：

2、BootStrap的好处是什么

传统的使用HTML+CSS+JavaScript开发的网站兼容性差，当使用移动设备打开对应的网页的时候，会因为分辨率的不同，导致出现显示效果极其的差。比如下图：

当把它进行缩放的时候：

可以发现，一些部件都叠在一起了。导致了显示的效果极差。而BootStrap的出现就解决了这样的问题，因为它实现了响应式的布局效果：

大大改善了开发的效率和降低了维护成本。上面使用的BootStrap改写上面的黑马商城，使用电脑打开：

下面缩放到ipad的大小和手机的大小来看：

1、ipad的大小：

2、手机的大小：

所以其中的好处我们是可以看得见的。

总结好处就是：

让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。
响应式布局，使得开发成本和维护成本都降低

3、搭建BootStrap的开发环境

下载BootStrap（https://v3.bootcss.com/）

导入相关文件(bootstrap.js、bootstrap.css、jquery.js即可)

导入完成以后，我们以后使用BootStrap都是使用基本模板了。

基本模板

```html <!DOCTYPE html> <!--这个标记很重要，分开讲： viewport：指的是浏览器网页的视口， width=device-width：表示移动设备生效 initial-scale：页面的缩放比例，通常默认为1，数值从1~5，即100%到500%的比例。分正负数

除了这上面的标记属性，还有三个属性：
      1、minimum-scale：最小允许的缩放比例
      2、maximum-scale：最大的允许缩放比例
      3、user-scalable:no ,不允许缩放，一旦设置，则上面的1，2，属性失效。

  -->

  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>使用BootStrap的基本模板</title>

  <!-- Bootstrap -->
  <link href="../css/bootstrap.css" rel="stylesheet">
  <script src="../js/jquery-1.12.0.js"></script>
  <script src="../js/bootstrap.min.js"></script>

  <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
  <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
  <!--[if lt IE 9]>
  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>-->
  <!--[endif]-->

你好，世界！

```

## 4、BootStrap布局容器

BootStrap的使用必须需要至少一个**布局容器**，才能为页面进行封装和方便的样式控制。它相当于一个画板。

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。

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

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

| 容器类样式 | 描述 | | --------------- | ------------------------------------------------------------ | | contianer | 类用于固定宽度并支持响应式布局的容器。【特点：居中，两端留白】实际例子<div class="container">....</div>| | container-fluid | 类用于100%的宽度，占据全部的视口（viewport）。<div class="container-fluid">..</div>|

**实战例子**

打开idea，新建一个文档，代码如下：

```html <!DOCTYPE html>

<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery-1.12.0.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
  </head>
<body>  
      <div class="container" style="border: 1px double red">11111</div>     
</body>
</html>

```

实际效果，1111居中且两端留白：

下面使用container-fluid：

html <div class="container-fluid" style="border:1px double red">11111</div>

实际效果，100% 宽度，占据全部视口（viewport）的容器：

更加详细的用法我们可以查询帮助手册：官网——全局CSS样式——布局容器

## 5、栅格系统

### 5.1、BootStrap的栅格系统

打开全局CSS样式——栅格系统，介绍如下：

一个效果图：

### 5.2、BootStrap的栅格系统入门案例

代码 html <div class="container-fluid" style="border: 1px double red"> <div class="row"> <div class="col-lg-4">第一个元素占据4列</div> <div class="col-lg-4">第二个元素占据4列</div> <div class="col-lg-4">第三个元素占据4列</div> </div> </div>

可以看见，一行12列，放了三个div，每个div占据了4列。

下面，我们对上面的视口缩放：

可以发现，一旦缩放，由于对应的屏幕尺寸的显示方式没有设置，导致我们的每个元素独自显示一行。

### 5.3、BootStrap的栅格系统的特点及深入分析

栅格特点

行（row）必须包含在container（固定宽度）或container-fluid中。
行使用的样式是：.row，列使用的样式是：.col，元素应当放在列（column）内。
基本的书写方式同表格form，先定义容器-行-列-元素

栅格的参数

col-屏幕尺寸-占用列数

例子

html <div class="container-fluid" style="border: 1px double red"> <div class="row"> <div class="col-lg-4" style="border: 1px solid red">111111</div> <div class="col-lg-4" style="border: 1px solid red">222222</div> <div class="col-lg-4" style="border: 1px solid red">333333</div> </div> </div>

下面我们来探究当列的和大于小于等于12时，会发生点什么？

1、当元素占据的列小于12

<div class="row"><!--第一个行，自动分割为12列-->
            <div class="col-lg-4" style="border: 1px solid red">111111</div>
            <div class="col-lg-4" style="border: 1px solid red">222222</div>
            <div class="col-lg-1" style="border: 1px solid red">333333</div>
        </div>

2、当元素占据的列的总和等于12html <div class="row"> <div class="col-lg-4" style="border: 1px solid red">111111</div> <div class="col-lg-4" style="border: 1px solid red">222222</div> <div class="col-lg-1" style="border: 1px solid red">333333</div> </div>

所以我们可以看到如果列元素的占据列的总和小于等于12，仍然排在一行上。

3、当元素占据的列的总和大于12html <div class="row"> <div class="col-lg-4" style="border: 1px solid red">111111</div> <div class="col-lg-4" style="border: 1px solid red">222222</div> <div class="col-lg-8" style="border: 1px solid red">333333</div> </div> 效果：大于12的列元素会单独占据新的一行。

### 5.4、BootStrap的栅格系统屏幕尺寸的设置及多个屏幕共同设置尺寸

栅格的参数

屏幕尺寸的大小

large ，lg 大屏幕，大桌面显示器
medium ，md，中等屏幕，桌面显示器
small，sm，小屏幕，平板
x small xs，超小屏幕，手机

关于xs： col-xs-* have been dropped in Bootstrap 4 in favor of col-*。BootStrap4里面，使用xs的正确姿势：如col-4；关于xl：超大屏幕 x large；关于xxl：更加大的屏幕

当设置的屏幕尺寸大的时候，这个时候通过缩放，导致每个元素单独成一行：

html <div class="row"> <div class="col-lg-4" style="border: 1px solid red">111111</div> <div class="col-lg-4" style="border: 1px solid red">222222</div> <div class="col-lg-4" style="border: 1px solid red">333333</div> </div>

原来的尺寸：

现在缩放：

当设置的屏幕尺寸为sm的时候，这个时候，会有一个继承属性，使得当屏幕尺寸大于sm的时候，能够正常显示一行：

html <div class="row"> <div class="col-sm-4" style="border: 1px solid red">111111</div> <div class="col-sm-4" style="border: 1px solid red">222222</div> <div class="col-sm-4" style="border: 1px solid red">333333</div> </div>

放大：

放大到lg的：

但是缩小到xm还是会变：

这种情况我们可以使用：（我这里使用了两个行来对比）

html <div class="row"> <div class="col-xs-4 col-sm-4 " style="border: 1px solid red">111111</div> <div class="col-xs-4 col-sm-4 " style="border: 1px solid red">222222</div> <div class="col-xs-4 col-sm-4 " style="border: 1px solid red">333333</div> </div> <div class="row"> <div class="col-xs-6 col-md-4" style="border: 1px solid red">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4" style="border: 1px solid red">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4" style="border: 1px solid red">.col-xs-6 .col-md-4</div> </div>

可以看出，设置了ms的，缩放到ms可以显示一行。而下面的只设置了sm的无法显示一行。这就是向上可以继承。下则需要设置。

### 5.5、栅格系统的列偏移

上面的设置偏移是通过设置一个空的div，这样不好。实际上是通过：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=4,user-scalable=no">

    <title>列偏移</title>

    <!-- Bootstrap -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery-1.12.0.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
<div class="row" style="border: 1px solid red">
    <div class="col-md-4" style="border: 1px solid red">.col-md-4</div>
    <div class="col-md-4 col-md-offset-4" style="border: 1px solid red">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
    <div class="col-md-3 col-md-offset-3" style="border: 1px solid red">.col-md-3 .col-md-offset-3</div>
    <div class="col-md-3 col-md-offset-3" style="border: 1px solid red">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
    <div class="col-md-6 col-md-offset-3" style="border: 1px solid red">.col-md-6 .col-md-offset-3</div>
</div>
</body>
</html>