Bootstrap--入门

最新推荐文章于 2021-08-04 09:07:32 发布

嫌疑-人

最新推荐文章于 2021-08-04 09:07:32 发布

阅读量136

点赞数 1

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_39396275/article/details/81072972

版权

bootstrap 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

这是我在工作中第一次遇到的技术点，我一定要好好学习。
bootstrap框架真的很方便，也能很好的适应移动端的像素
学习bootstrap主要有以下几步，这篇文章，主要讲第一步：
1.安装bootstrap
在bootstrap官网下载最新的bootstrap文档，然后将相应的bootstrap文档导入要写的界面代码中，如下：

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

必须是html5文档类型

<!doctype html>

匹配移动端的真实高度：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

布局容器（bootstrap自带居中容器）：.container 自适应屏幕大小

栅格参数：
在bootstrap框架里面，一个.row里面包含12个栅格，这些栅格通过设置参数：col-md-参数 来设置一个元素占用几个栅格，来设置排版。
col-md-offset-参数，来设置左边空几个栅格再放置元素。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<style type="text/css">
    .container{
        background: #ccc;
    }
    .row{
        margin-bottom: 15px;
    }
</style>
<body>
<div class="container">
    <div class="row">
    <div class="col-md-4">
        <img src="logo.png" width=100%>
    </div>
    <div class="col-md-4">
        <img src="logo.png" width=100%>
    </div>
    <div class="col-md-4">
        <img src="logo.png" width=100%>
    </div>
    </div>

    <div class="row">
    <div class="col-md-3">
        <img src="logo.png" width=100%>
    </div>
    <div class="col-md-3">
        <img src="logo.png" width=100%>
    </div>
    <div class="col-md-3">
        <img src="logo.png" width=100%>
    </div>
    <div class="col-md-3">
        <img src="logo.png" width=100%>
    </div>

    <div class="row">
    <div class="col-md-4 col-md-offset-8">
        <img src="logo.png" width=100%>
    </div>

    </div>

</div>
</body>
</html>

这里写图片描述

嫌疑-人

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap--入门

这是我在工作中第一次遇到的技术点，我一定要好好学习。 bootstrap框架真的很方便，也能很好的适应移动端的像素学习bootstrap主要有以下几步，这篇文章，主要讲第一步： 1.安装bootstrap 在bootstrap官网下载最新的bootstrap文档，然后将相应的bootstrap文档导入要写的界面代码中，如下：&amp;amp;amp;lt;link rel=&amp;amp;quot;stylesheet&amp;amp;quot; hr...
复制链接

扫一扫