bootstrap中的栅格系统

最新推荐文章于 2019-10-09 22:33:07 发布

余木尘

最新推荐文章于 2019-10-09 22:33:07 发布

阅读量128

点赞数

分类专栏： HTML 文章标签： bootstrap栅格系统

本文链接：https://blog.csdn.net/weixin_45583017/article/details/100561670

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文详细探讨了Bootstrap中的栅格系统，包括样式的应用、实现的效果以及如何构建响应式的网页布局。通过学习，读者将能够掌握利用栅格系统创建灵活、适应不同设备屏幕的网页设计技巧。

摘要由CSDN通过智能技术生成

body部分

<body>
<!--导航部分参考(https://blog.csdn.net/weixin_45583017/article/details/100547387)-->

<!--正文部分-->
<div class="container">

        <div class="row">
            <!--左边附加导航-->
            <div class="col-md-2">
                <ul class="nav nav-tabs nav-stacked" id="myNav">
                    <li><a href="#section-1">推荐</a></li>
                    <li><a href="#section-2">热点</a></li>
                    <li><a href="#section-3">视频</a></li>
                    <li><a href="#section-4">科技</a></li>
                    <li><a href="#section-5">社会</a></li>
                    <li><a href="#section-6">娱乐</a></li>
                </ul>
            </div>
            <!--中间部分-->
            <div class="col-md-7 ">
                <div class="row one-of-body">
                    <!--图片-->
                    <div class="col-sm-3">
                        <a href="#"><img src="image/img1.jpg" height="159" width="284" class="img-responsive img-rounded"/></a>
                    </div>
                    <!--文字-->
                    <div class="col-sm-9 body-title">
                        <a href="#" class="title">**赵老师上课风格，严格中不失幽默，知识点丰富，形式多样……</a>
                        <div class="authur">作者：林中浪. 12000评论. 2小时前</div>
                    </div>
                </div>
                <div class="row one-of-body">
                    <!--图片-->
                    <div class="col-sm-3">
                        <a href="#"><img src="image/img2.jpg" height="159" width="284" class="img-responsive img-rounded"/></a>
                    </div>
                    <!--文字-->
                    <div class="col-sm-9 body-title">
                        <a href="#" class="title">**赵老师上课风格，严格中不失幽默，知识点丰富，形式多样……</a>
                        <div class="authur">作者：林中浪. 12000评论. 2小时前</div>
                    </div>
                </div>
                <div class="row one-of-body">
                    <!--图片-->
                    <div class="col-sm-3">
                        <a href="#"><img src="image/img3.jpg" height="159" width="284" class="img-responsive img-rounded"/></a>
                    </div>
                    <!--文字-->
                    <div class="col-sm-9 body-title">
                        <a href="#" class="title">**赵老师上课风格，严格中不失幽默，知识点丰富，形式多样……</a>
                        <div class="authur">作者：林中浪. 12000评论. 2小时前</div>
                    </div>
                </div>
                <div class="row one-of-body">
                    <!--图片-->
                    <div class="col-sm-3">
                        <a href="#"><img src="image/img4.jpg" height="159" width="284" class="img-responsive img-rounded"/></a>
                    </div>
                    <!--文字-->
                    <div class="col-sm-9 body-title">
                        <a href="#" class="title">**赵老师上课风格，严格中不失幽默，知识点丰富，形式多样……</a>
                        <div class="authur">作者：林中浪. 12000评论. 2小时前</div>
                    </div>
                </div>
                <div class="row one-of-body one-of-body-last">
                    <!--图片-->
                    <div class="col-sm-3">
                        <a href="#"><img src="image/img5.jpg" height="159" width="284" class="img-responsive img-rounded"/></a>
                    </div>
                    <!--文字-->
                    <div class="col-sm-9 body-title">
                        <a href="#" class="title">**赵老师上课风格，严格中不失幽默，知识点丰富，形式多样……</a>
                        <div class="authur">作者：林中浪. 12000评论. 2小时前</div>
                    </div>
                </div>
            </div>
            <!--右边广告部分-->
            <div class="col-md-3">
                <!--上面的搜索框-->
                <div class="input-group">
                    <input type="text" class="form-control">
                    <span class="input-group-btn">
                        <button class="btn btn-danger " type="button">搜索</button>
                    </span>
                </div>

                <!--中间的举报区-->
                <div class="row right-middle">
                    <div class="col-sm-4">
                        <div><img src="image/wj.png" height="100" width="114" class="img-responsive"/></div>
                    </div>
                    <div class="col-sm-8">
                        <div class="word">网上有害信息举报专区</div>
                        <div class="tel">举报电话：12377</div>
                    </div>
                </div>

                <!--最下面的文本内容-->
                <div class="right-bot">
                    <div class="header-word">最新热文</div>
                    <div class="body-word">
                        <p>**某赵姓老师授课风格幽默并且颜值爆表，学生竟然纷纷在课堂上...</p>
                        <p class="record">1500阅读.1000评论</p>
                    </div>
                    <div class="body-word">
                        <p>**某赵姓老师授课风格幽默并且颜值爆表，学生竟然纷纷在课堂上...</p>
                        <p class="record">1500阅读.1000评论</p>
                    </div>
                    <div class="body-word">
                        <p>**某赵姓老师授课风格幽默并且颜值爆表，学生竟然纷纷在课堂上...</p>
                        <p class="record">1500阅读.1000评论</p>
                    </div>
                    <div class="body-word">
                        <p>**某赵姓老师授课风格幽默并且颜值爆表，学生竟然纷纷在课堂上...</p>
                        <p class="record">1500阅读.1000评论</p>
                    </div>

                </div>
            </div>
        </div>

        <!--底部版权-->
        <div class="body-of-last">
            Copyright©1999-2019 **教育科技股份有限公司 All Rights Reserved
        </div>
    </div>
</body>

样式

.navbar-inverse .navbar-brand{
    color: #ff0101;
}

#myNav{
    border-bottom: none;
    text-align: center;
    background-color: #9d9d9d;
}

.nav-tabs li a:hover{
    background-color: #0f0f0f;
}

.body-of-last{
    border-top: 1px solid silver;
    padding-top: 10px;
    text-align: center;
    color: silver;
    margin-top: 50px;
}

.one-of-body{
    border-bottom: 1px solid silver;
    padding-bottom: 10px;
    padding-top: 10px;
}

.body-title .title{
    font-size: 16px;
    font-weight: 700;
}

.body-title .authur{
    margin-top: 15px;
    color: silver;
}

.one-of-body-last{
    border-bottom: none;
}

.right-middle{
    background-color: #9d9d9d;
    border-radius: 4px;
    padding:13px 0;
    margin:20px 0;
    padding-right: 0px;
}

.word{
    font-size: 14px;
    font-weight: 700;

}
.tel{
    font-size: 13px;
    color: #5e5e5e;
    padding-top: 15px;
}
.right-bot{
    background-color: #9d9d9d;
    border-radius: 4px;
    padding: 0 10px;
}
.right-bot .header-word{
    font-size: 16px;
    font-weight: 700;
    padding-top: 20px;
}

.right-bot .body-word{
    padding-top: 10px;
    padding-bottom: 10px;
}
.right-bot .body-word a{
    padding-bottom: 10px;
}

.record{
    font-size: 13px;
    color: #5e5e5e;
}

a{
    color: black;
}
a:hover{
    color: burlywood;
    text-decoration: none;
}

效果

在这里插入图片描述

栅格系统

在这里插入图片描述

余木尘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap中的栅格系统

body部分<body><div class="container"> <div class="row"> &...
复制链接

扫一扫