รับทําเว็บไซต์ รับทําseo
 
รับทําเว็บไซต์ รับทําseo
บทความที่น่าสนใจ

บทความ ที่น่าสนใจ

การสร้าง Menubar ใน Bootstrap

    การสร้าง Menubar ใน Bootstrap เราจะใช้ Navbar ในการสร้าง Navbar คือ ฟิจเจอร์ที่ใช้สำหรับรองรับการสร้าง Menubar ให้มีความสะดวกและง่ายสำหรับผู้สร้างเว็บไซด์ อีกทั้งยังรองรับการแสดงผลแบบ Responsive อีกด้วย

     

    ขันตอนการสร้าง Navbar

     

    1. สร้างแท็ก "<div>" พร้อมกำหนดคลาสในแท็กดังกล่าวเป็น "navbar navbar-default"

     

    <div class="navbar navbar-default">
     
    </div>
     

    2. วางแท็ก "<div>" ข้างในแท็กด้านบน กำหนดคลาสเป็น "container-fluid"

     

    <div class="navbar navbar-default">
         <div class="container-fluid">
         </div>
    </div>
     

    3. สร้างแท็ก "<div>" พร้อมกำหนดชื่อคลาสเป็น "navbar-header" ต่อมาเราจะใส่ปุ่มเพื่อแสดงตอนที่ Navbars ของเราแสดงบนหน้าจอขนาดเล็ก โดยการแสดงปุ่มสำหรับหน้าจอขนาดเล็ก จะต้องใส่แท็ก "<button>"

     

    <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mymenu-content">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
       </button>
      <a class="navbar-brand" href="#">Sitepoint</a>
    </div>

     

    4. ใส่ลิงค์ที่เราต้องการใน Navbar โดยให้เราสร้างแท็ก "<div>" ที่อยู่ในลำดับเดียวกับแท็ก "<div class="navbar-header">" โดยแท็ก "<div>" ดังกล่าวให้กำหนดคลาสเป็น "collapse navbar-collapse"  ต่อมาเราจะใช้แท็ก "<ul>" และแท็ก "<li>" เพื่อใช้สร้างลิงค์บน Navbar โดยคลาสของแท็ก "<ul>" ต้องกำหนดเป็น "nav navbar-nav"

     

    <div class="navbar navbar-default">
     <div class="container-fluid">
       <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mymenu-content">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
       </button>
       <a class="navbar-brand" href="#">Sitepoint</a>
     </div>
     <div class="collapse navbar-collapse" id="mymenu-content">
      <ul class="nav navbar-nav">
       <li ><a href="#">Home</a></li>
       <li ><a href="#">About</a></li>
       <li ><a href="#">Product</a></li>
      </ul>
     </div>
         
     </div>
    </div>

     

     

     

     

บทความที่น่าสนใจ

บทความ ล่าสุด

บทความ ความรู้ด้านไอที, คอมพิวเตอร์ Techonlogy, Gadget, ความรู้เกี่ยวกับคอมพิวเตอร์ กับทาง SoftMelt.com