bootstrap页面头部用户图像下拉菜单

cxzlp0521

于 2018-09-26 18:13:29 发布

阅读量7k

点赞数 6

分类专栏：前端UI组件文章标签： bootstrap头部用户图像下拉菜单

本文链接：https://blog.youkuaiyun.com/cxzlp12345/article/details/82857022

版权

本文介绍了如何使用Bootstrap和jQuery创建一个在用户图像上悬停显示的下拉菜单，详细讲解了HTML结构、CSS样式和JS代码，包括界面布局、CSS格式化以及必要的框架引用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.界面展示

2.HTML代码

<div class="logo">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-10" style="background: #354144;color: white">logo</div>
            <div class="col-lg-2" style="background: #354144">
                <div class="right">
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle"
                               data-toggle="dropdown"
                               style="height: 60px">
                                <img alt="" class="img-circle" src="photo.jpg" width="38px" height="38px"/>
                                <span style="color: #FFFFFF;font-size: 15px">
                                <i>username</i>
                            </span>
                            </a>
                            <div class="dropdown-menu pull-right"
                                 style="background: #FFFFFF;width: 320px;overflow: hidden">
                                <div style="margin-top: 16px;border-bottom: 1px solid #eeeeee">
                                    <div style="text-align: center">
                                        <img class="img-circle" src="photo.jpg"
                                             style="width: 38px;height: 38px;"/>

最低0.47元/天解锁文章