Bootstrap框架用于开发响应式布局移动设备优先的-WEB-项目

JAY.LIN 收录于 Html

2024-12-28 约 1105 字预计阅读 3 分钟

https://bing.ee123.net/img/rand?artid=123467847

Bootstrap框架——用于开发响应式布局、移动设备优先的 WEB 项目

BootStrap框架

1. 下载

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

那怎么使用呢？进入，点击下载

选择处于生产环境的 Bootstrap 进行下载，第二个Bootstrap源码是没有解压过的。

下载后进行解压，引入css代码。可以引入 bootstrap.min.css ，或者 bootstrap.css 。

<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">

现在我们就可以使用CSS样式了

2. 使用

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。

.container 类用于固定宽度并支持响应式布局的容器（类似于版心类）。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<body>
    <div class="container">1</div> 
    <div class="container-fluid">2</div>
</body>

注意观察， container 和 .container-fluid 存在15px的左右内间距

如何消除呢？需要使用 row 。

<!-- row类作用就是抵消container类的15px的内边距, row有-15px的外边距 -->
 <div class="container">
     <div class="row">2</div>
 </div>

显式内容已经靠边

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统， 随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列 。

在多种屏幕设备上，Bootstrap 的栅格系统按如下工作：

不了解？举个例子!

在大屏幕时，我们在每个div中存在类名 col-lg-3 ，也就是占12栅格里面的3份，那么4个盒子都能排在一行（3 x 4 = 12）。
如果屏幕宽度为中等屏幕，一个div占6份，就是两个盒子排一行，一共两行。
同理，当屏幕宽度为小屏幕时，盒子的宽度占12个，那么就是一个盒子一行。

<body>
    <!-- 需求: 
        大屏: 一行排列4个内容; 
        中屏:一行排列2个内容
        小屏幕：一行一个 -->
    <div class="container">
        <div class="col-lg-3 col-md-6 col-sm-12">1</div>
        <div class="col-lg-3 col-md-6 col-sm-12">2</div>
        <div class="col-lg-3 col-md-6 col-sm-12">3</div>
        <div class="col-lg-3 col-md-6 col-sm-12">4</div>
    </div>
    
</body>

全局 CSS 样式

使用 Bootstrap 的样式，实际上就是使用封装好的类名。我们只需要在我们想要使用的盒子调用的类名就可以达到相同的效果。

比如这里，我想使用表格样式。在引入Bootstrap则直接复制下面的代码就可以

然后添加 .table-bordered 类为表格和其中的每个单元格增加边框，添加 .table-hover 类可以让表格中的每一行对鼠标悬停状态作出响应（这些类名官网都有）。

<body>
    <table class="table table-bordered table-hover">
        <tr>
            <th>数字1</th>
            <th>数字2</th>
            <th>数字3</th>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>

    
</body>

显示如下（鼠标悬停在了第二行）：

剩下的内容，大家可以根据官网文档找自己想要的CSS样式、组件！！！

但是注意，如果要使用JavaScript插件，需要引入 jQuery.js 和 Bootstrap.min.js 。需要注意， Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入！！！

<script src="./js/jquery.js"></script>
<script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>