bootstrap栅格布局和常用案例

最新推荐文章于 2024-01-02 17:45:28 发布

yaya安若

最新推荐文章于 2024-01-02 17:45:28 发布

阅读量770

点赞数

文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_42056687/article/details/107701985

版权

1，bootstrap

中文网： http://www.bootcss.com/
英文网 : http://getbootstrap.com/

2，容器

2.1流体布局容器
容器的width为auto，只是两边加了15px的padding。

2.2固定布局
容器的width会随设备分辨率的不同而生产变化
分辨率阈值
w >=1200 容器的width为1170 左右padding为15 （注意是borderBox）
1200>w >=992 容器的width为970 左右padding为15 （注意是borderBox）
992 > w >=768 容器的width为750 左右padding为15 （注意是borderBox）
768 > w >=992 容器的width为auto 左右padding为15 （注意是borderBox）

3，栅格系统

col-lg-x ( >=1120px)
col-md-x (>=992px)
col-sm-x (>=768)
col-xs-x (<768)
x默认拥有12个等级

4，列偏移

.col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。
调整的是margin-left

5，列排序

.col-md-push-* 和 .col-md-pull-* 类的可以设置网格列的顺序，其中 * 范围是从 1 到 11。
push的时候调整的是left，分13个等级（0到12）
0时为auto

pull的时候调整的是right，分13个等级（0到12）
0时为auto

例：

<div class="container">
        <div class="row">
            <div class="col-md-4 col-md-push-8">
             左
            </div>
           <div class="col-md-8 col-md-pull-4" >
               右
           </div>
       </div>
</div>

bootstrap常用布局和插件

1，超大屏幕

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超大屏幕</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="jumbotron">
            <h1>请登录</h1>
            <p>超大屏幕</p>
            <button class="btn btn-primary btn-lg">返回</button>
        </div>
    </div>
</body>

</html>

2，导航栏

<!-- 顶部导航栏制作 -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <!-- 小屏幕导航按钮和logo -->
            <div class="navbar-header">
                <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <!-- 三条小横线制作 -->
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
                <a href="index.html" class="navbar-brand">网易学院</a>
            </div>
            <!-- 小屏幕导航按钮和logo结束 -->
            <!-- 导航 -->
            <div class="navbar-collapse collapse">
                <!-- navbar-right导航右对齐 -->
                <!-- nav取消ul的默认样式 -->
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="#home">首页</a>
                    </li>
                    <li>
                        <a href="#bbs">论坛</a>
                    </li>
                    <li>
                        <a href="#html5">前端开发</a>
                    </li>
                    <li>
                        <a href="#course">最新课程</a>
                    </li>
                    <li>
                        <a href="index.html">移动APP</a>
                    </li>
                    <li>
                        <a href="index.html">联系我们</a>
                    </li>
                </ul>

            </div>
            <!-- 导航结束 -->

3，分页

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
    <ul class="pagination">
        <li>
            <a href="#">&laquo;</a>
        </li>
        <li>
            <a href="#">1</a>
        </li>
        <li>
            <a href="#">2</a>
        </li>
        <li>
            <a href="#">3</a>
        </li>
        <li>
            <a href="#">4</a>
        </li>
        <li>
            <a href="#">&laquo;</a>
        </li>


</body>

</html>

4，徽章

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>徽章</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</head>

<body>

    <a href="#">Mailbox <span class="badge">50</span></a>

</body>

</html>

5，轮播图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</head>

<body>

    <div class="carousel slide" id="myCarousel">
        <div class="carousel-indicators">
            <ol class="carousel-indicators"></ol>
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
        </div>
        <div class="carousel-inner">
            <div class="item active">
                <img src="img/1.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/2.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/3.jpg" alt="">
            </div>
        </div>
        <a href="#myCarousel" class="carousel-control left" data-slide="prev">&lsaquo;
            </a>
                <a href="#myCarousel" class="carousel-control right" data-slide="next">&lsaquo;</a>
    </div>

</body>

</html>

6，模态框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模态框</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
    <h2>模态框</h2>
    <button class="btn btn-primary btn-lg" datd-toggle="modal" data-target="#myModal">模态框演示</button>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-content">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">模态框标题</h4>
                    <div class="modal-body">在这里添加一些文本</div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button>
                        <button type="button" class="btn btn-primary">提交更改</button>
                    </div>

                </div>
            </div>
<script>
                $(function() {
                    $('#myModal').modal({
                        keyboard: true
                    })
                });
</script>
</body>

</html>

yaya安若

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
bootstrap栅格布局和常用案例

1，bootstrap中文网： http://www.bootcss.com/英文网 : http://getbootstrap.com/2，容器2.1流体布局容器容器的width为auto，只是两边加了15px的padding。2.2固定布局容器的width会随设备分辨率的不同而生产变化分辨率阈值w >=1200 容器的width为1170 左右padding为15 （注意是borderBox）1200>w >=992 容器的width为970
复制链接

扫一扫