bootstrap3 第1课：简单使用bootstrap

最新推荐文章于 2023-10-29 05:29:20 发布

李书明

最新推荐文章于 2023-10-29 05:29:20 发布

阅读量614

点赞数 1

分类专栏： bootstrap3

本文链接：https://blog.csdn.net/lsmxx/article/details/100538484

版权

bootstrap3 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

bootstrap 最大的特点：响应式布局，可以根据终端设备的不同，呈现不同的效果。

学习bootstrap的网站：https://www.bootcss.com/

因为bootstrap依赖于jquery，所以事先也要准备好jquery，最好使用jquery-1.12.4

目前boostrap使用率最高的版本是3.3.7，从https://www.bootcss.com 网站下载到本地解压

我们主要使用bootstrap的两个文件：bootstrap.css 和 bootstrap.js

下面我们先看一个简单的案例，项目中各文件的位置关系

index.html文件代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="../static/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="../static/jquery-1.12.4.min.js"></script>
    <script src="../static/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <style>
        .box{
            border: solid 1px #f00;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-sm-4 col-xs-12 box">块一</div>
        <div class="col-md-6 col-sm-4 col-xs-12 box">块二</div>
        <div class="col-md-6 col-sm-4 col-xs-12 box">块三</div>
        <div class="col-md-6 col-sm-4 col-xs-12 box">块四</div>
    </div>
</div>
</body>
</html>

使用360浏览器运行上面的代码，结果如下

使用F12, 打开浏览器的调试工具,点击图标：，改变设备尺寸，你就会发现四个块的位置发生了变化。

上面的部分html代码需要讲解

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签

在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。

<div class="container"></div>
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。

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

它的宽度会因设备的不同而改变：

电脑：它的宽度1170px

手机：100%宽

另外还可以使用.container-fluid

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

<div class="row">
    <div class="col-md-6 col-sm-4 col-xs-12 box">块一</div>
    <div class="col-md-6 col-sm-4 col-xs-12 box">块二</div>
    <div class="col-md-6 col-sm-4 col-xs-12 box">块三</div>
    <div class="col-md-6 col-sm-4 col-xs-12 box">块四</div>
</div>
上面这段代码表示栅格

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

栅格系统将一行分为12个格，如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

不同的设备使用不同的类名

大屏幕大桌面显示器 (≥1200px)：使用col-lg-

中等屏幕桌面显示器 (≥992px)：使用col-md-

小屏幕平板 (≥768px)：使用col-sm-

超小屏幕手机 (<768px)：使用col-xs-

总结：这节课我们简单的使用了bootstrap，主要应用比较精典的栅格系统。