学习——Bootstrap网格（栅格）系统

最新推荐文章于 2023-06-28 09:24:43 发布

花生喂龙

最新推荐文章于 2023-06-28 09:24:43 发布

阅读量430

点赞数

分类专栏： HTML js jsp Bootstrap 文章标签： bootstrap 网格

本文链接：https://blog.csdn.net/qq_24435837/article/details/51203043

版权

js 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

jsp

7 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

Bootstrap

第1步，使用Bootstrap要引用的文件

    <link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" scr="jquery-1.10.2.min.js"></script>
    <script type="text/javascript" scr="bootstrap.min.js"></script>

第2步，HTML头部要加上<!DOCTYPE html>

<!DOCTYPE html>
<html>
....
</html>

第3步， Bootstrap网格系统

    <div class="row">
        <div class="col-xs-3">3</div>
        <div class="col-xs-6">6</div>
        <div class="col-xs-3">3</div>
    </div>

使用中遇到的问题和解决方法：

1，列中内容自动居左了：需要使其居中：在父级元素中加上style="TEXT-ALIGN: center" ，在子元素中加上margin-left: auto；margin-right: auto;

2， class="container-fluid"和class="container"的区别

参考资料：

1，Bootstrap <第一篇> - 逆心 - 博客园：http://www.cnblogs.com/kissdodog/p/3929903.html

2，Bootstrap3的栅格化样式-前端开发博客：http://caibaojian.com/bootstrap3-grid.html

3，如何使用Bootstrap创建垂直(默认)、内联及水平表单？掌握Bootstrap支持最常见的表单控件： http://edu.cnzz.cn/201511/98222d2d.shtml

4，Bootstrap教程：[1]下载与部署bootstrap_百度经验 http://jingyan.baidu.com/article/fdbd427719dbb4b89f3f4856.html

花生喂龙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习——Bootstrap网格（栅格）系统

使用Bootstrap
复制链接

扫一扫

专栏目录