Bootstrap开发笔记

最新推荐文章于 2024-04-23 03:22:03 发布

空中追风sk

最新推荐文章于 2024-04-23 03:22:03 发布

阅读量160

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/weixin_43667990/article/details/92428549

版权

web前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

前端资源下载地址：https://www.bootcdn.cn/

1.导航栏

<div class="navbar navbar-default">    <!-- 顶部导航样式 -->
    <div class="container">             <!-- 加个container，这样两侧就会有padding，使用navbar-right时就不会顶边了 -->

        <div class="navbar-header">       <!-- 设置LOGO -->
            <a class="navbar-brand" href="index.html"></a>  <!-- 写文字或设置背景图片：background-image: url(../img/logo.png) -->
        </div>
        
        <!--visible-xs-inline: 设置在超小屏时才可见-->
        <label for="toggle-checkbox" id="toggle-label" class="visible-xs-inline">MEUN</label>
        <input type="checkbox" id="toggle-checkbox" class="hidden">    <!-- 设置小屏时导航栏的显示 -->
        
        <div class="hidden-xs">             <!-- 设置小屏时隐藏(适配手机) -->
            <ul class="nav navbar-nav">       <!-- 设置导航 -->
                <li><a href="">首页</a></li>   <!-- li元素里面套a标签，不然样式不对 -->
                <li><a href="">军事</a></li>
                <li><a href="">科技</a></li>
                <li><a href="">娱乐</a></li>
            </ul>
            
            <ul class="nav navbar-nav navbar-right">     <!-- 右侧登陆注册 -->
                <li><a href="">登陆</a></li>
                <li><a href="">注册</a></li>
            </ul>
        </div>
        
    </div>
</div>

2.新闻列表页

<div class="container">
    <!-- 左侧侧边栏 -->
    <div class="row">   <!-- row两侧有一个负的margin，可以让内容和上方的导航栏对齐(col有一个padding) -->
        <div class="col-sm-2">
            <div class="list-group side-bar hidden-xs">
                <a href="#" class="list-group-item active">综合</a>   <!-- active属性：选中状态 -->
                <a href="#" class="list-group-item">美女</a>
                <a href="#" class="list-group-item">电竞</a>
                <a href="#" class="list-group-item">直播</a>
                <a href="#" class="list-group-item">旅行</a>
            </div>
        </div>
        
        <!-- 中间内容 -->
        <div class="col-sm-7">
            <div class="news-list">
                <div class="news-list-item clearfix">      <!-- clearfix:清除浮动 -->
                    <div class="col-xs-4">           <!-- 中间区域分两份，左侧放图片，右侧写内容 -->
                        <img src="img/002.jpg" alt="">
                    </div>
                    <div class="col-xs-8">
                        <a class="title" href="#">新闻标题：王二狗大战赵铁柱，场面一度十分混乱，亲临现场，体验不一样的观感</a>
                        <div class="info">
                            <div class="avatar"><img src="img/logo.jpg"></div>
                            <span>作者</span> ·
                            <span>25K评论</span> ·
                            <span>7分钟前</span>
                        </div>
                    </div>

        <div class="col-sm-3">      <!-- 右侧的侧边栏 -->
            <div class="search-bar">
                <input type="text" class="form-control">     <!-- 输入框 -->
            </div>
            <div class="side-bar-card clearfix">
                <div class="col-xs-5"><img src="img/1-1.png"></div>
                <div class="col-xs-7">
                    <div class="text-lg">有害信息举报专区</div>
                    <div>电话：123456</div>
                </div>
            </div>
            <div class="side-bar-card">
                <div class="card-title">24小时热文</div>
                <div class="card-body">
                    <div class="list">
                        <div class="item">
                            <div class="title">IG惨遭8连跪，昔日冠军路在何方</div>
                            <div class="desc">2.5W阅读 2W评论</div>
                        </div>

3.注册

<div class="container container-small">     <!-- container-small:自定义标签，设置max-width: 500px; -->

    <h1>注册
        <small>已有账号，去 <a href="login.html">登陆</a></small>
    </h1>

    <form action="">

        <div class="form-group">
            <label>手机号</label>
            <input type="text" class="form-control">
        </div>

        <div class="form-group">
            <label>验证码</label>
            <div class="input-group">
                <input type="text" class="form-control">
                <div class="input-group-btn">      <!-- 设置组合按钮，按钮会跟在input后面 -->
                    <div class="btn btn-default">获取验证码</div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label>密码</label>
            <input type="text" class="form-control">
        </div>
        <div class="form-group">
            <label>再次输入密码</label>
            <input type="text" class="form-control">
        </div>
        <div class="form-group">
            <!--btn-primary:按钮会有主题色；btn-block：按钮占整行长度-->
            <button type="submit" class="btn btn-primary btn-block">注册</button>
        </div>
        <div class="form-group">
            注册即代表您同意：<a href="#">服务条款</a>
        </div>
    </form>
</div>

参考：https://study.163.com/course/courseMain.htm?courseId=1004046001&trace_c_p_k2=8f8aefe79aef450e98a45bde7ff80244

4.字体图标
依赖字体文件

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

<button type="button" class="btn btn-default btn-lg btn-success">
  <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 新增
</button>

在这里插入图片描述

5.三级导航栏菜单
bootstrap的下拉菜单默认要点击后显示，因此需自行设置hover属性
类名：

.dropdown：指定下拉菜单，下拉菜单都包裹在 .dropdown 里
.dropdown-menu：创建下拉菜单
.divider：下拉菜单中的分割线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/js/jquery.js"></script>
    <script src="../static/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <style>
        /* 设置鼠标悬停一级菜单时显示二级菜单(默认向下显示，此处单独写是为了和向右显示的菜单进行区分) */
        .dropdown:hover .menu-down{
            display: block;
        }
        /* 鼠标悬停二级菜单栏时显示三级菜单 */
        .submenu:hover .menu-left {
            display: block;
        }
        /* 设置三级菜单向右显示菜单栏 */
        .menu-left {
            top:0;
            left:100%;
        }
    </style>
</head>
<body>

<div class="container">
    <nav class="navbar navbar-default">
        <div class="navbar-header">
            <div class="navbar-brand">bootstrap三级导航</div>
        </div>
        <ul class="nav navbar-nav">
            <li><a href="#">一级菜单1</a></li>
            <li class="dropdown">
                <!-- 三角标要写在a标签里面 -->
                <a href="#">一级菜单2 <span class="caret"></span></a>
                <ul class="dropdown-menu menu-down">
                    <li><a href="#">二级菜单1</a></li>
                    <li class="dropdown submenu">
                        <a href="#">二级菜单2</a>
                        <ul class="dropdown-menu menu-left">
                            <li><a href="#">三级菜单1</a></li>
                            <li><a href="#">三级菜单2</a></li>
                            <li><a href="#">三级菜单3</a></li>
                            <li><a href="#">三级菜单4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">二级菜单3</a></li>
                </ul>
            </li>
            <li><a href="#">一级菜单3</a></li>
            <li><a href="#">一级菜单4</a></li>
        </ul>
    </nav>
</div>

</body>
</html>