bootstrap如何使用

最新推荐文章于 2024-07-20 15:49:14 发布

和世界不一样，那就不一样！

最新推荐文章于 2024-07-20 15:49:14 发布

阅读量282

点赞数

文章标签： php

本文链接：https://blog.csdn.net/weixin_44834981/article/details/109163191

版权

bootstrap如何使用

工具：bootstrap-3.3.7包、jquery-1.12.2.js包
一、. download

https://v3.bootcss.com

2.点击下载bootstrp
压缩包结构目录
二、下载基本模板
官网https://v3.bootcss.com
点击缩略图
找到适合的模板，把代码复制出来

三、
把bootstrap-3.3.7, jquery1.12.2.js，07lol.html 放到同一个目录下
.
2.bootstrap-3.3.7, jquery1.12.2.js 文件引入

<script src="bootstrap-3.3.7/js/bootstrap.js"> </script>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7/css/bootstrap.css">
代码贴入：
  <div class="row">
    <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
            <img src="..." alt="...">
            <div class="caption">
                <h3>Thumbnail label</h3>
                <p>...</p>
                <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default"
                        role="button">Button</a></p>
            </div>
        </div>
    </div>
</div>
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201019163413247.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgzNDk4MQ==,size_16,color_FFFFFF,t_70#pic_center)

四、最后，看页面效果
在这里插入图片描述