Bootstrap EP.2 จัดการกับ navbar ให้เหมาะสม
Bootstrap EP.2 จัดการกับ navbar ให้เหมาะสม
จัดการกับ navbarให้เหมาะสม โดย
กำหนดได้ตามความต้องการของผู้ใช้
คลิ๊กดูคลิปวีดีโอได้เลย
navbar
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href=""><img id="" src="" width="120" height="50" /></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="font22"><a href=""> Home</a></li> <li><a href="">Link2</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </div> </nav> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
@charset "utf-8"; /* CSS Document */ /*แทบเมนูด้านบน*/.navbar { background: #39F; border-color: #999; } /*สีและเส้นขอบปุ่มสี่เหลี่ยม*/.navbar-default .navbar-toggle { border-color: #FFF; background:#FFF; } /*สีแถบเวลาชี้ลิงค์*/#bs-example-navbar-collapse-1 li:hover{ background:#FFF; box-shadow: 0px 5px #000 inset; /*เส้นข้างบนแถบ*/ } /*สีและขนาดตัวหนังสือตอนยังไม่ชี้ลิงค์ ความกว้างจากขอบต่าง ๆ */.navbar-default .navbar-nav>li>a { font-size:16px; color: #fff; /*padding-top: 15px; padding-bottom: 1px; text-transform: uppercase;*/ } #logo{ height:100%; margin-top:1px; margin-right:5px; } |
