bootstrap頁面頭部使用者影象下拉選單
阿新 • • 發佈：2018-12-12
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;"/> </div> <div style="color: #323534;text-align: center;line-height: 36px;font-size: 15px"> <span>username</span> </div> </div> <div class="row" style="margin-left: 15px;margin-right: 15px;margin-top: 10px"> <div class="col-md-4 text-center grid"> <i class="fa fa-user" style="font-size: 25px;line-height: 45px;"></i> <p style="padding: 0px;margin-top: 6px;margin-bottom: 10px;font-size: 12px"> 個人中心</p> </div> <div class="col-md-4 text-center grid"> <i class="fa fa-gear" style="font-size: 25px;line-height: 45px;"></i> <p style="padding: 0px;margin-top: 6px;margin-bottom: 10px;font-size: 12px"> 賬號管理</p> </div> <div class="col-md-4 text-center grid"> <i class="fa fa-key" style="font-size: 25px;line-height: 45px;"></i> <p style="padding: 0px;margin-top: 6px;margin-bottom: 10px;font-size: 12px"> 密碼修改</p> </div> </div> <div class="row" style="margin-left: 15px;margin-right: 15px;margin-top: 10px"> <div class="col-md-4 text-center grid"> <i class="fa fa-user-circle" style="font-size: 25px;line-height: 45px;"></i> <p style="padding: 0px;margin-top: 6px;margin-bottom: 10px;font-size: 12px"> 修改頭像</p> </div> <div class="col-md-4 text-center grid"> <i class="fa fa-comments" style="font-size: 25px;line-height: 45px;"></i> <p style="padding: 0px;margin-top: 6px;margin-bottom: 10px;font-size: 12px"> 訊息</p> </div> <div class="col-md-4 text-center grid"> <i class="fa fa-heart-o" style="font-size: 25px;line-height: 45px;"></i> <p style="padding: 0px;margin-top: 6px;margin-bottom: 10px;font-size: 12px"> 幫助中心</p> </div> </div> <div class="row" style="margin-top: 20px"> <div class="text-center" style="padding: 15px;margin: 0px;background: #f6f5f5;color: #323534;"> <i class="fa fa-sign-out"></i> 退出登入介面 </div> </div> </div> </li> </ul> </div> </div> </div> </div> </div>
3.CSS樣式
- 樣式分為兩部分
- 一部分用於格式化CSS
- 一部分為介面佈局CSS
<style> /*淘寶CSS格式化程式碼*/ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; } body, button, input, select, textarea { font: 12px/1.5 tahoma, arial, \5b8b\4f53; } h1, h2, h3, h4, h5, h6 { font-size: 100%; } address, cite, dfn, em, var { font-style: normal; } code, kbd, pre, samp { font-family: couriernew, courier, monospace; } small { font-size: 12px; } ul, ol { list-style: none; } a { text-decoration: none; } a:hover { text-decoration: underline; } sup { vertical-align: text-top; } sub { vertical-align: text-bottom; } legend { color: #000; } fieldset, img { border: 0; } button, input, select, textarea { font-size: 100%; } table { border-collapse: collapse; border-spacing: 0; } body, html { background: #EAEEF2; width: 100%; height: 100%; } .container-fluid { background: aquamarine; height: 100%; } .logo { background: #354144; color: black; font-size: 40px; padding-left: 20px; height: 60px; min-height: 60px; position: fixed; top: 0; left: 0; z-index: 100; width: 100%; } .nav > li > a:hover { color: #262626; text-decoration: none; background-color: #354144; } .open > a { background-color: #354144 !important; } .right { float: right; } .grid:hover { background: #efefef; } </style>
4.JS程式碼
此JS用於將bootstrap下拉選單改為懸停顯示,不需要點選下拉按鈕(採用的是jquery)
<script> $(function () { $(".dropdown").mouseover(function () { $(this).addClass("open"); }); $(".dropdown").mouseleave(function () { $(this).removeClass("open"); }) }) </script>
5.需要引入的框架
- boostrap
- Font Awesome 圖示
//css引入
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
//js引入
<script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>6.操作方式
在每個div裡面加入響應的點選事件就可以使用