ฟอรั่ม | ล่าสุดการพัฒนาเว็บบทเรียน
×

Bootstrap เกี่ยวกับการสอน

BS บ้าน BS เริ่ม BS กินกัน BS การเรียงพิมพ์ BS ตาราง BS ภาพ BS jumbotron BS Wells BS การแจ้งเตือน BS ปุ่ม BS กลุ่มปุ่ม BS Glyphicons BS ป้าย / ป้าย BS แถบความคืบหน้า BS การให้เลขหน้า BS Pager BS กลุ่มรายการ BS แผง BS เมนูแบบเลื่อนลง BS Collapse BS แท็บ / ยา BS Navbar BS ฟอร์ม BS Inputs BS Inputs 2 BS Input Sizing BS ม้าหมุน BS เป็นกิริยาช่วย BS เคล็ดลับ BS Popover BS Scrollspy BS ติด

Bootstrap ระบบกริด

BS ระบบกริด BS ซ้อนกัน / แนวนอน BS ตารางขนาดเล็ก BS ตารางขนาดกลาง BS ตารางขนาดใหญ่ BS ตัวอย่างตาราง

Bootstrap ธีม

BS แม่แบบ BS กระทู้ "Simply Me" BS กระทู้ "Company" BS กระทู้ "Band"

Bootstrap Exam

BS ทดสอบ

Bootstrap CSS Ref

CSS การเรียงพิมพ์ CSS ปุ่ม CSS ฟอร์ม CSS ผู้ช่วย CSS ภาพ CSS ตาราง CSS เมนูแบบเลื่อนลง CSS Navs Glyphicons

Bootstrap JS Ref

JS ติด JS เตือนภัย JS ปุ่ม JS Carousel JS Collapse JS เลื่อนลง JS Modal JS Popover JS Scrollspy JS แถบ JS เคล็ดลับ

 

Bootstrapธีม "วงดนตรี"


สร้างธีม "วงดนตรี"

หน้านี้จะแสดงวิธีการสร้างรูปแบบเงินทุนจากรอยขีดข่วน

เราจะเริ่มต้นด้วยหน้า HTML ง่ายๆแล้วเพิ่มส่วนประกอบมากขึ้นและมากขึ้นจนกว่าเราจะมีการทำงานอย่างเต็มที่ส่วนบุคคลและการตอบสนองต่อการเว็บไซต์

ผลที่ได้จะมีลักษณะเช่นนี้และคุณมีอิสระในการปรับเปลี่ยนการบันทึกแบ่งปันการใช้หรือการทำสิ่งที่คุณต้องการด้วย:


HTML หน้าเริ่มต้น

เราจะเริ่มต้นด้วยหน้า HTML ต่อไปนี้:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Theme The Band</title>
  <meta charset="utf-8">
</head>
<body>

<div>
  <h3>THE BAND</h3>
  <p>We love music!</p>
  <p>We have created a fictional band website. Lorem ipsum..</p>
</div>

</body>
</html>

เพิ่มเงินทุนและเพิ่ม CDN ภาชนะ

เพิ่มเงินทุน CDN และเชื่อมโยงไป jQuery และวางองค์ประกอบ HTML ภายในภาชนะ ( .container ):

ตัวอย่าง

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Theme The Band</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>THE BAND</h3>
  <p>We love music!</p>
  <p>We have created a fictional band website. Lorem ipsum..</p>
</div>

</body>
</html>

ผล:

วงดนตรี

เรารักเพลง!

เราได้สร้างเว็บไซต์สมมุติผม Lorem Ipsum ..

ลองตัวเอง»

ศูนย์ข้อความ

เพิ่ม .text-center ระดับไปยังศูนย์ข้อความที่อยู่ภายในภาชนะและใช้ <em> องค์ประกอบที่จะทำให้ "เรารักเสียงเพลง" ตัวเอียงข้อความ:

ตัวอย่าง

<div class="container text-center">
  <h3>THE BAND</h3>
  <p><em>We love music!</em></p>
  <p>We have created a fictional band website. Lorem ipsum..</p>
</div>

ผล:

วงดนตรี

เรารักเพลง!

เราได้สร้างเว็บไซต์สมมุติผม Lorem Ipsum ..

ลองตัวเอง»

เพิ่ม Padding

ใช้ CSS ที่จะทำให้ภาชนะที่ดูดีกับ padding:

ตัวอย่าง

.container {
    padding: 80px 120px;
}

ผล:

วงดนตรี

เรารักเพลง!

เราได้สร้างเว็บไซต์สมมุติผม Lorem Ipsum ..

ลองตัวเอง»

เพิ่มกริด

สร้างคอลัมน์ที่สามของความกว้างเท่ากับ ( .col-sm-4 ), เพิ่มข้อความและภาพและใส่ไว้ในภาชนะไปนี้:

ตัวอย่าง

<div class="container text-center">
  <h3>THE BAND</h3>
  <p><em>We love music!</em></p>
  <p>We have created a fictional band website. Lorem ipsum..</p>
  <br>
  <div class="row">
    <div class="col-sm-4">
      <p><strong>Name</strong></p><br>
      <img src="bandmember.jpg" alt="Random Name">
    </div>
    <div class="col-sm-4">
      <p><strong>Name</strong></p><br>
      <img src="bandmember.jpg" alt="Random Name">
    </div>
    <div class="col-sm-4">
      <p><strong>Name</strong></p><br>
      <img src="bandmember.jpg" alt="Random Name">
    </div>
  </div>
</div>

ผล:

วงดนตรี

เรารักเพลง!

เราได้สร้างเว็บไซต์สมมุติผม Lorem Ipsum ..


ชื่อ


ชื่อสุ่ม

ชื่อ


ชื่อสุ่ม

ชื่อ


ชื่อสุ่ม
ลองตัวเอง»

ภาพวงกลม

รูปร่างที่ภาพเพื่อวงกลมที่มีการ .img-circle ชั้น

เรายังได้เพิ่ม CSS บางอย่างเพื่อให้ภาพดูดี:

ตัวอย่าง

.person {
    border: 10px solid transparent;
    margin-bottom: 25px;
    width: 80%;
    height: 80%;
    opacity: 0.7;
}
.person:hover {
    border-color: #f1f1f1;
}

<img src="bandmember.jpg" class="img-circle person" alt="Random Name">
<img src="bandmember.jpg" class="img-circle person" alt="Random Name">
<img src="bandmember.jpg" class="img-circle person" alt="Random Name">

ผล:

ชื่อ


ชื่อสุ่ม

ชื่อ


ชื่อสุ่ม

ชื่อ


ชื่อสุ่ม
ลองตัวเอง»

Collapsibles

ทำให้ภาพที่พับ; แสดงเนื้อหาพิเศษเมื่อคุณคลิกที่ภาพแต่ละภาพ:

ตัวอย่าง

<div class="row">
  <div class="col-sm-4">
    <p class="text-center"><strong>Name</strong></p><br>
    <a href="#demo" data-toggle="collapse">
      <img src="bandmember.jpg" class="img-circle person" alt="Random Name">
    </a>
    <div id="demo" class="collapse">
      <p>Guitarist and Lead Vocalist</p>
      <p>Loves long walks on the beach</p>
      <p>Member since 1988</p>
    </div>
  </div>
  <div class="col-sm-4">
    <p class="text-center"><strong>Name</strong></p><br>
    <a href="#demo2" data-toggle="collapse">
      <img src="bandmember.jpg" class="img-circle person" alt="Random Name">
    </a>
    <div id="demo2" class="collapse">
      <p>Drummer</p>
      <p>Loves drummin'</p>
      <p>Member since 1988</p>
    </div>
  </div>
  <div class="col-sm-4">
    <p class="text-center"><strong>Name</strong></p><br>
    <a href="#demo3" data-toggle="collapse">
      <img src="bandmember.jpg" class="img-circle person" alt="Random Name">
    </a>
    <div id="demo3" class="collapse">
      <p>Bass player</p>
      <p>Loves math</p>
      <p>Member since 2005</p>
    </div>
  </div>
</div>

ผล (คลิกที่ภาพเพื่อดูผล):

ชื่อ


ชื่อสุ่ม

มือกีตาร์และนักร้องนำ

รักยาวเดินบนชายหาด

เป็นสมาชิกตั้งแต่ปี 1988

ชื่อ


ชื่อสุ่ม

คนตีกลอง

รัก Drummin '

เป็นสมาชิกตั้งแต่ปี 1988

ชื่อ


ชื่อสุ่ม

เล่นเบส

รักคณิตศาสตร์

เป็นสมาชิกตั้งแต่ปี 2005

ลองตัวเอง»

เพิ่มม้าหมุน

สร้างม้าหมุนและเพิ่มก่อนภาชนะ:

ตัวอย่าง

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="ny.jpg" alt="New York">
      <div class="carousel-caption">
        <h3>New York</h3>
        <p>The atmosphere in New York is lorem ipsum.</p>
      </div>
    </div>

    <div class="item">
      <img src="chicago.jpg" alt="Chicago">
      <div class="carousel-caption">
        <h3>Chicago</h3>
        <p>Thank you, Chicago - A night we won't forget.</p>
      </div>
    </div>

    <div class="item">
      <img src="la.jpg" alt="Los Angeles">
      <div class="carousel-caption">
        <h3>LA</h3>
        <p>Even though the traffic was a mess, we had the best time.</p>
      </div>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

ผล:

ลองตัวเอง»

สไตล์ม้าหมุน

ใช้ CSS สไตล์ม้าหมุน:

ตัวอย่าง

.carousel-inner img {
    -webkit-filter: grayscale(90%);
    filter: grayscale(90%); /* make all photos black and white */
    width: 100%; /* Set width to 100% */
    margin: auto;
}

.carousel-caption h3 {
    color: #fff !important;
}

@media (max-width: 600px) {
    .carousel-caption {
        display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
    }
}

ผล:

ลองตัวเอง»

เพิ่มทัวร์คอนเทนเนอร์

เพิ่มภาชนะใหม่และเพิ่มรายการ ( .list-group และ .list-group-item ) ภายในของมัน

เพิ่มชั้นเอง ( .bg-1 ) เพื่อคอนเทนเนอร์ (สีพื้นหลังสีดำ) และรูปแบบบางอย่างเพื่อเด็ก:

ตัวอย่าง

<style>
.bg-1 {
    background: #2d2d30;
    color: #bdbdbd;
}
.bg-1 h3 {color: #fff;}
.bg-1 p {font-style: italic;}
</style>

<div class="bg-1">
  <div class="container">
    <h3 class="text-center">TOUR DATES</h3>
    <p class="text-center">Lorem ipsum we'll play you some music.<br> Remember to book your tickets!</p>

    <ul class="list-group">
      <li class="list-group-item">September Sold Out!</li>
      <li class="list-group-item">October Sold Out!</li>
      <li class="list-group-item">November 3</li>
    </ul>
  </div>
</div>

ผล:

วันทัวร์

Lorem Ipsum เราจะเล่นเพลงที่คุณบาง
โปรดจำไว้ว่าการจองตั๋วของคุณ!

  • กันยายน Sold Out!
  • ตุลาคม Sold Out!
  • 3 พฤศจิกายน
ลองตัวเอง»

เพิ่มป้ายชื่อและป้าย

เพิ่มป้ายกำกับ ( .label ) และป้าย ( .badge ) เพื่อไฮไลตั๋วใช้ได้ / การขายออก:

ตัวอย่าง

<ul class="list-group">
  <li class="list-group-item">September <span class="label label-danger">Sold Out!</span></li>
  <li class="list-group-item">October <span class="label label-danger">Sold Out!</span></li>
  <li class="list-group-item">November <span class="badge">3</span></li>
</ul>

ผล:

วันทัวร์

Lorem Ipsum เราจะเล่นเพลงที่คุณบาง
โปรดจำไว้ว่าการจองตั๋วของคุณ!

  • กันยายน Sold Out!
  • ตุลาคม Sold Out!
  • 3 พฤศจิกายน
ลองตัวเอง»

เพิ่มภาพย่อ

ภายในภาชนะทัวร์เพิ่มคอลัมน์ที่สามของความกว้างเท่ากับ ( .col-sm-4 ):

ภายในแต่ละคอลัมน์เพิ่มภาพ

จากนั้นใช้ .img-thumbnail ระดับเพื่อรูปร่างที่ภาพเพื่อภาพขนาดย่อ

โดยปกติแล้วคุณจะต้องเพิ่ม .img-thumbnail ระดับโดยตรงไปยัง <img> องค์ประกอบ ในตัวอย่างนี้เราได้วางภาชนะขนาดย่อรอบภาพเพื่อให้เราสามารถระบุข้อความภาพเป็นอย่างดี

ตัวอย่าง

<div class="row text-center">
  <div class="col-sm-4">
    <div class="thumbnail">
      <img src="paris.jpg" alt="Paris">
      <p><strong>Paris</strong></p>
      <p>Fri. 27 November 2015</p>
      <button class="btn">Buy Tickets</button>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="thumbnail">
      <img src="newyork.jpg" alt="New York">
      <p><strong>New York</strong></p>
      <p>Sat. 28 November 2015</p>
      <button class="btn">Buy Tickets</button>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="thumbnail">
      <img src="sanfran.jpg" alt="San Francisco">
      <p><strong>San Francisco</strong></p>
      <p>Sun. 29 November 2015</p>
      <button class="btn">Buy Tickets</button>
    </div>
  </div>
</div>

ผล:

Moustiers Sainte Marie

ปารีส

ศุกร์ 27 พฤศจิกายน 2015

Moustiers Sainte Marie

นิวยอร์ก

วันเสาร์ 28 พฤศจิกายน 2015

Moustiers Sainte Marie

ซานฟรานซิสโก

ดวงอาทิตย์ 29 พฤศจิกายน 2015

ลองตัวเอง»

รายการรูปแบบย่อและปุ่ม

ใช้ CSS เพื่อรูปแบบรายการและภาพขนาดย่อที่ ในตัวอย่างของเราเราได้ลบเส้นขอบโค้งมนจากรายการและเราได้พยายามที่จะทำให้ภาพเล็กเช่นบัตรโดยการเอาชายแดนของพวกเขาและการตั้งค่าความกว้าง 100% ในแต่ละภาพ

เรายังมีการปรับเปลี่ยนรูปแบบเริ่มต้นของเงินทุนของ .btn ชั้นจะมีปุ่มสีดำ:

ตัวอย่าง

/* Remove rounded borders from list */
.list-group-item:first-child {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.list-group-item:last-child {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

/* Remove border and add padding to thumbnails */
.thumbnail {
    padding: 0 0 15px 0;
    border: none;
    border-radius: 0;
}

.thumbnail p {
    margin-top: 15px;
    color: #555;
}

/* Black buttons with extra padding and without rounded borders */
.btn {
    padding: 10px 20px;
    background-color: #333;
    color: #f1f1f1;
    border-radius: 0;
    transition: .2s;
}

/* On hover, the color of .btn will transition to white with black text */
.btn:hover, .btn:focus {
    border: 1px solid #333;
    background-color: #fff;
    color: #000;
}

ผล:

  • กันยายน Sold Out!
  • ตุลาคม Sold Out!
  • 3 พฤศจิกายน
Moustiers Sainte Marie

ปารีส

ศุกร์ 27 พฤศจิกายน 2015

Moustiers Sainte Marie

นิวยอร์ก

วันเสาร์ 28 พฤศจิกายน 2015

Moustiers Sainte Marie

ซานฟรานซิสโก

ดวงอาทิตย์ 29 พฤศจิกายน 2015

ลองตัวเอง»

เพิ่ม Modal

แรกเปลี่ยนปุ่มทั้งหมดภายในภาพขนาดย่อจาก <button class="btn">Buy Tickets</button> เพื่อ <button class="btn" data-toggle="modal" data-target="#myModal" >Buy Tickets</button> ปุ่มเหล่านี้จะใช้ในการเปิดกิริยาที่เกิดขึ้นจริง

เพื่อสร้างกิริยาดูที่รหัสต่อไปนี้:

ตัวอย่าง

<style>
/* Add a dark gray background color to the modal header and center text */
.modal-header, h4, .close {
    background-color: #333;
    color: #fff !important;
    text-align: center;
    font-size: 30px;
}

.modal-header, .modal-body {
    padding: 40px 50px;
}
</style>


<!-- Used to open the Modal -->
<button class="btn" data-toggle="modal" data-target="#myModal">Buy Tickets</button>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4><span class="glyphicon glyphicon-lock"></span> Tickets</h4>
      </div>
      <div class="modal-body">
        <form role="form">
          <div class="form-group">
            <label for="psw"><span class="glyphicon glyphicon-shopping-cart"></span> Tickets, $23 per person</label>
            <input type="number" class="form-control" id="psw" placeholder="How many?">
          </div>
          <div class="form-group">
            <label for="usrname"><span class="glyphicon glyphicon-user"></span> Send To</label>
            <input type="text" class="form-control" id="usrname" placeholder="Enter email">
          </div>
          <button type="submit" class="btn btn-block">Pay
            <span class="glyphicon glyphicon-ok"></span>
          </button>
        </form>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">
          <span class="glyphicon glyphicon-remove"></span> Cancel
        </button>
        <p>Need <a href="#">help?</a></p>
      </div>
    </div>
  </div>
</div>

ผล (คลิกที่ปุ่ม "ซื้อตั๋ว" เพื่อดูผลกระทบที่):

ลองตัวเอง»

เพิ่มผู้ติดต่อคอนเทนเนอร์

สร้างภาชนะใหม่ที่มีสองคอลัมน์ที่มีความกว้างไม่เท่ากัน ( .col-md-4 และ .col-md-8 )

เพิ่มไอคอนข้อมูลข้อความให้อยู่ในคอลัมน์และรูปแบบการควบคุมครั้งแรกในสอง:

ตัวอย่าง

<div class="container">
  <h3 class="text-center">Contact</h3>
  <p class="text-center"><em>We love our fans!</em></p>
  <div class="row test">
    <div class="col-md-4">
      <p>Fan? Drop a note.</p>
      <p><span class="glyphicon glyphicon-map-marker"></span>Chicago, US</p>
      <p><span class="glyphicon glyphicon-phone"></span>Phone: +00 1515151515</p>
      <p><span class="glyphicon glyphicon-envelope"></span>Email: mail@mail.com</p>
    </div>
    <div class="col-md-8">
      <div class="row">
        <div class="col-sm-6 form-group">
          <input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
        </div>
        <div class="col-sm-6 form-group">
          <input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
        </div>
      </div>
      <textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea>
      <div class="row">
        <div class="col-md-12 form-group">
          <button class="btn pull-right" type="submit">Send</button>
        </div>
      </div>
    </div>
  </div>
</div>

ผล:

ติดต่อ

เรารักแฟน ๆ ของเรา!

แฟน? วางโน้ต

ชิคาโกสหรัฐอเมริกา

โทรศัพท์: +00 1515151515

อีเมล์: mail@mail.com


ลองตัวเอง»

เพิ่ม Toggable แท็บ

เพิ่มแท็บ ( .nav nav-tabs ) ในภาชนะที่ติดต่อด้วย "คำพูด" จากกลุ่มสมาชิก:

ตัวอย่าง

<style>
.nav-tabs li a {
    color: #777;
}
</style>

<h3 class="text-center">From The Blog</h3>
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Mike</a></li>
  <li><a data-toggle="tab" href="#menu1">Chandler</a></li>
  <li><a data-toggle="tab" href="#menu2">Peter</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h2>Mike Ross, Manager</h2>
    <p>Man, we've been on the road for some time now. Looking forward to lorem ipsum.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h2>Chandler Bing, Guitarist</h2>
    <p>Always a pleasure people! Hope you enjoyed it as much as I did. Could I BE.. any more pleased?</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h2>Peter Griffin, Bass player</h2>
    <p>I mean, sometimes I enjoy the show, but other times I enjoy other things.</p>
  </div>
</div>

ผล:

จากบล็อก

ไมค์รอสส์ผู้จัดการ

มนุษย์เราได้รับบนท้องถนนครั้งนี้บาง มองไปข้างหน้าเพื่อ Lorem Ipsum

ลองตัวเอง»

Google Maps

เพิ่ม Google Maps (สำหรับข้อมูลเพิ่มเติมโปรดอ่านของเรา Google Maps Tutoria L)

ใช้ CSS เพื่อกำหนดความกว้างความสูงและสีของแผนที่:

ตัวอย่าง

<style>
#googleMap {
    width: 100%; /* Span the entire width of the screen */
    height: 400px; /* Set the height to 400 pixels */
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%); /* Change the color of the map to black and white * /
}
</style>


<div id="googleMap"></div>

<!-- Add Google Maps -->
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(41.878114, -87.629798);

function initialize() {
var mapProp = {
center:myCenter,
zoom:12,
scrollwheel:false,
draggable:false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker = new google.maps.Marker({
position:myCenter,
});

marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

ผล:

ลองตัวเอง»

เพิ่ม Navbar

เพิ่มแถบนำทางที่ด้านบนสุดของหน้าเว็บที่พังทลายลงมาบนหน้าจอที่มีขนาดเล็ก:

ตัวอย่าง

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#home">HOME</a></li>
        <li><a href="#band">BAND</a></li>
        <li><a href="#tour">TOUR</a></li>
        <li><a href="#contact">CONTACT</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Merchandise</a></li>
            <li><a href="#">Extras</a></li>
            <li><a href="#">Media</a></li>
          </ul>
        </li>
        <li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
      </ul>
    </div>
  </div>
</nav>

ผล:

ลองตัวเอง»

บันทึก เคล็ดลับ: ขวาจัดลิงค์การนำทางที่มี navbar-right ระดับ
หากคุณต้องการเป็นหนึ่งในการเชื่อมโยงในแถบนำทางที่จะทำตัวเหมือนเมนูแบบเลื่อนลงให้ใช้ .dropdown ระดับ


สไตล์ Navbar

ใช้ CSS ในการปรับแต่งแถบนำทาง:

ตัวอย่าง

/* Add a dark background color with a little bit see-through */
.navbar {
    margin-bottom: 0;
    background-color: #2d2d30;
    border: 0;
    font-size: 11px !important;
    letter-spacing: 4px;
    opacity:0.9;
}

/* Add a gray color to all navbar links */
.navbar li a, .navbar .navbar-brand {
    color: #d5d5d5 !important;
}

/* On hover, the links will turn white */
.navbar-nav li a:hover {
    color: #fff !important;
}

/* The active link */
.navbar-nav li.active a {
    color: #fff !important;
    background-color:#29292c !important;
}

/* Remove border color from the collapsible button */
.navbar-default .navbar-toggle {
    border-color: transparent;
}

/* Dropdown */
.open .dropdown-toggle {
    color: #fff ;
    background-color: #555 !important;
}

/* Dropdown links */
.dropdown-menu li a {
    color: #000 !important;
}

/* On hover, the dropdown links will turn red */
.dropdown-menu li a:hover {
    background-color: red !important;
}

ผล:

ลองตัวเอง»

เพิ่ม Scrollspy

เพิ่ม scrollspy เพื่อปรับปรุงการเชื่อมโยงแถบนำทางโดยอัตโนมัติเมื่อเลื่อน:

ตัวอย่าง

<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">

<div id="band" class="container">
<div id="tour" class="container">
<div id="contact" class="container">
ลองตัวเอง»

เพิ่มส่วนท้าย

1. สร้าง <footer> องค์ประกอบและเพิ่มข้อความบางส่วน

2. ใช้ CSS สไตล์ส่วนท้าย

3. เพิ่มไอคอน "ลูกศรขึ้น" ซึ่งจะนำผู้ใช้ไปยังด้านบนของหน้าเมื่อคลิก

4. ใช้ในการเริ่มต้น jQuery ปลั๊กอินคำแนะนำเครื่องมือ:

ตัวอย่าง

<style>
/* Add a dark background color to the footer */
footer {
    background-color: #2d2d30;
    color: #f5f5f5;
    padding: 32px;
}

footer a {
    color: #f5f5f5;
}

footer a:hover {
    color: #777;
    text-decoration: none;
}
</style>

<footer class="text-center">
  <a class="up-arrow" href="#myPage" data-toggle="tooltip" title="TO TOP">
    <span class="glyphicon glyphicon-chevron-up"></span>
  </a><br><br>
  <p>Bootstrap Theme Made By <a href="http://www.w3ii.com" data-toggle="tooltip" title="Visit w3ii">www.w3ii.com</a></p>
</footer>

<script>
$(document).ready(function(){
    // Initialize Tooltip
    $('[data-toggle="tooltip"]').tooltip();
})
</script>

ผล:

ลองตัวเอง»

เพิ่มเลื่อนเรียบ

ใช้ jQuery เพื่อเพิ่มเลื่อนเรียบ (เมื่อคลิกที่ลิงก์ในแถบนำทาง) ที่:

ตัวอย่าง

<script>
$(document).ready(function(){
  // Add smooth scrolling to all links in navbar + footer link
  $(".navbar a, footer a[href='#myPage']").on('click', function(event) {

  // Prevent default anchor click behavior
  event.preventDefault();

  // Store hash
  var hash = this.hash;

  // Using jQuery's animate() method to add smooth page scroll
  // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
  $('html, body').animate({
    scrollTop: $(hash).offset().top
  }, 900, function(){

    // Add hash (#) to URL when done scrolling (default click behavior)
    window.location.hash = hash;
    });
  });
})
</script>
ลองตัวเอง»

สัมผัสสุดท้าย

ปรับแต่งธีมของคุณโดยการเพิ่มตัวอักษรที่คุณชอบ เราได้ใช้ "มอนต์เซอร์รัต" และ "Lato" จากห้องสมุด font ของ Google

เชื่อมโยงไปยังตัวอักษรในส่วน <head> ส่วน:

<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">

<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">

จากนั้นคุณสามารถใช้พวกเขาในหน้านี้:

ตัวอย่าง

body {
    font: 400 15px/1.8 Lato, sans-serif;
    color: #777;
}

.navbar {
    font-family: Montserrat, sans-serif;
}

เรายังได้เพิ่มรูปแบบพิเศษบางอย่างกับองค์ประกอบบางอย่าง

ตัวอย่าง

/* Overwrite default styles of h3 and h4 */
h3, h4 {
    margin: 10px 0 30px 0;
    letter-spacing: 10px;
    font-size: 20px;
    color: #111;
}

/* Remove rounded borders on input fields */
.form-control {
    border-radius: 0;
}

/* Disable the ability to resize textareas */
textarea {
    resize: none;
}
ลองตัวเอง»

เสร็จสมบูรณ์ "วงดนตรี" ธีม