bootstrap4选项卡如何布局

最新推荐文章于 2024-05-21 09:45:36 发布

原创最新推荐文章于 2024-05-21 09:45:36 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一个新闻网站的导航栏设计，包括不同新闻类型的图标和鼠标悬停效果。通过使用Flexbox布局和特定的CSS样式实现了标签的垂直排列及独特的图标显示。

内容：

<section id='news'>
        <div class='container news-content d-flex justify-content-center'>
            <div class='news-title'>
                <span>全部新闻</span>
            </div>
            <ul class="nav nav-tabs news-tablist" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#allnews" data-title="全部新闻">
                        <i class='icon-allnews'></i>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#meiti" data-title="媒体报道">
                        <i class='icon-meiti'></i>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#toutiao" data-title="头条">
                        <i class='icon-toutiao'></i>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#zixun" data-title="咨询">
                        <i class='icon-zixun'></i>
                    </a>
                </li>
            </ul>

css：

#news .news-tablist {
    display: flex;
    flex-direction:column;纵向排列
    border-bottom:none;
}
#news .news-tablist i.icon-allnews::before {
    content: '\e90e';
    font-size:30px;
    color: white;
}
#news .news-tablist i.icon-meiti::before {
    content: '\e90f';
    font-size:30px;
    color: white;
}
#news .news-tablist i.icon-toutiao::before {
    content: '\e910';
    font-size:30px;
    color: white;
}
#news .news-tablist i.icon-zixun::before {
    content: '\e911';
    font-size:30px;
    color: white;
}
#news .news-tablist li a:hover {
    background: #E9232C;
}
flex-direction:column;纵向排列
    border-bottom:none;
}
#news .news-tablist i.icon-allnews::before {
    content: '\e90e';
    font-size:30px;
    color: white;
}
#news .news-tablist i.icon-meiti::before {
    content: '\e90f';
    font-size:30px;
    color: white;
}
#news .news-tablist i.icon-toutiao::before {
    content: '\e910';
    font-size:30px;
    color: white;
}
#news .news-tablist i.icon-zixun::before {
    content: '\e911';
    font-size:30px;
    color: white;
}
#news .news-tablist li a:hover {
    background: #E9232C;
}

图示：