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

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 Company</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h1>Company</h1>
<p>We specialize in blablabla</p>

</body>
</html>

เพิ่มเงินทุนและเพิ่ม CDN Jumbotron

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

ตัวอย่าง

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Theme Company</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="jumbotron">
  <h1>Company</h1>
  <p>We specialize in blablabla</p>
</div>

</body>
</html>

ผล:

บริษัท

เรามีความเชี่ยวชาญใน blablabla

ลองตัวเอง»

เพิ่มสีพื้นหลังและศูนย์ข้อความ

1. เพิ่มสีพื้นหลังสีส้มเพื่อ jumbotron

2. เพิ่ม .text-center ระดับไปยังศูนย์ข้อความภายใน jumbotron นี้:

ตัวอย่าง

<style>
.jumbotron {
    background-color: #f4511e; /* Orange */
    color: #ffffff;
}
</style>

<body>
  <div class="jumbotron text-center">
    <h1>Company</h1>
    <p>We specialize in blablabla</p>
  </div>
</body>

ผล:

บริษัท

เรามีความเชี่ยวชาญใน blablabla

ลองตัวเอง»

เพิ่มรูปแบบ

เพิ่มรูปแบบที่มีช่องใส่และปุ่ม:

ตัวอย่าง

<div class="jumbotron text-center">
  <h1>Company</h1>
  <p>We specialize in blablabla</p>
  <form class="form-inline">
    <input type="email" class="form-control" size="50" placeholder="Email Address">
    <button type="button" class="btn btn-danger">Subscribe</button>
  </form>

</div>

ผล:

บริษัท

เรามีความเชี่ยวชาญใน blablabla

ลองตัวเอง»

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

เพิ่มสองภาชนะ ( .container-fluid ) และเพิ่มระดับที่กำหนดเองเพื่อภาชนะที่สอง ( .bg-grey - เพิ่มสีพื้นหลังสีเทา):

ตัวอย่าง

<style>
.bg-grey {
    background-color: #f6f6f6;
}
</style>

<div class="container-fluid">
  <h2>About Company Page</h2>
  <h4>Lorem ipsum..</h4>
  <p>Lorem ipsum..</p>
  <button class="btn btn-default btn-lg">Get in Touch</button>
</div>

<div class="container-fluid bg-grey">
  <h2>Our Values</h2>
  <h4><strong>MISSION:</strong> Our mission lorem ipsum..</h4>
  <p><strong>VISION:</strong> Our vision Lorem ipsum..
</div>

ผล:

เกี่ยวกับ บริษัท หน้า

Lorem Ipsum ..

Lorem Ipsum ..

ค่านิยมของเรา

Mission: Ipsum Lorem ภารกิจของเรา ..

วิสัยทัศน์: Ipsum Lorem วิสัยทัศน์ของเรา ..

ลองตัวเอง»

เพิ่ม Padding

ช่วยทำให้ jumbotron และภาชนะบรรจุที่ดูดีโดยการเพิ่มช่องว่างบางส่วน:

ตัวอย่าง

<style>
.jumbotron {
    background-color: #f4511e;
    color: #fff;
    padding: 100px 25px;
}

.container-fluid {
    padding: 60px 50px;
}
</style>

ผล:

บริษัท

เรามีความเชี่ยวชาญใน blablabla

เกี่ยวกับ บริษัท หน้า

Lorem Ipsum ..

Lorem Ipsum ..

ค่านิยมของเรา

Mission: Ipsum Lorem ภารกิจของเรา ..

วิสัยทัศน์: Ipsum Lorem วิสัยทัศน์ของเรา ..

ลองตัวเอง»

เพิ่มกริด

1. เพิ่มไอคอน (หรือโลโก้ของ บริษัท ) เพื่อแต่ละภาชนะ

2. เฉพาะกิจไอคอนและ "เกี่ยวกับข้อความที่" โดยการสร้างสองคอลัมน์ ( .col-sm-8 และ .col-sm-4 )

3. เพิ่มคำสั่งสื่อไปยังศูนย์ "โลโก้คอลัมน์" บนหน้าจอมีขนาดเล็กกว่า 768 พิกเซลกว้าง

ตัวอย่าง

<style>
.logo {
    font-size: 200px;
}
@media screen and (max-width: 768px) {
    .col-sm-4 {
        text-align: center;
        margin: 25px 0;
    }
}
</style>


<div class="container-fluid">
  <div class="row">
    <div class="col-sm-8">
      <h2>About Company Page</h2>
      <h4>Lorem ipsum..</h4>
      <p>Lorem ipsum..</p>
      <button class="btn btn-default btn-lg">Get in Touch</button>
    </div>
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-signal logo"></span>
    </div>
  </div>
</div>

<div class="container-fluid bg-grey">
  <div class="row">
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-globe logo"></span>
    </div>
    <div class="col-sm-8">
      <h2>Our Values</h2>
      <h4><strong>MISSION:</strong> Our mission lorem ipsum..</h4>
      <p><strong>VISION:</strong> Our vision Lorem ipsum..</p>
    </div>
  </div>
</div>

ผล:

เกี่ยวกับ บริษัท หน้า

Lorem Ipsum ..

Lorem Ipsum ..

ค่านิยมของเรา

Mission: Ipsum Lorem ภารกิจของเรา ..

วิสัยทัศน์: Ipsum Lorem วิสัยทัศน์ของเรา ..

ลองตัวเอง»

เพิ่มบริการตู้คอนเทนเนอร์

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

ตัวอย่าง

<div class="container-fluid text-center">
  <h2>SERVICES</h2>
  <h4>What we offer</h4>
  <br>
  <div class="row">
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-off"></span>
      <h4>POWER</h4>
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-heart"></span>
      <h4>LOVE</h4>
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-lock"></span>
      <h4>JOB DONE</h4>
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
    </div>
    <br><br>
  <div class="row">
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-leaf"></span>
      <h4>GREEN</h4>
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-certificate"></span>
      <h4>CERTIFIED</h4>
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-wrench"></span>
      <h4>HARD WORK</h4>
      <p>Lorem ipsum dolor sit amet..</p>
    </div>
  </div>
</div>

ผล:

บริการ

สิ่งที่เรานำเสนอ


เพาเวอร์

Lorem Ipsum บังคับ Amet นั่ง ..

ความรัก

Lorem Ipsum บังคับ Amet นั่ง ..

ผลงานที่ทำได้

Lorem Ipsum บังคับ Amet นั่ง ..



สีเขียว

Lorem Ipsum บังคับ Amet นั่ง ..

ได้รับการรับรอง

Lorem Ipsum บังคับ Amet นั่ง ..

การทำงานอย่างหนัก

Lorem Ipsum บังคับ Amet นั่ง ..

ลองตัวเอง»

ไอคอนจัดแต่งทรงผม

เพิ่มชั้นเอง ( .logo-small ) แต่ละ glyphicon ใน "บริการ" ตู้คอนเทนเนอร์ ใช้ CSS สไตล์พวกเขา

ตัวอย่าง

/* Add an orange color to all icons and set the font-size */
.logo-small {
    color: #f4511e;
    font-size: 50px;
}

.logo {
    color: #f4511e;
    font-size: 200px;
}

ผล:

เกี่ยวกับ บริษัท หน้า

Lorem Ipsum ..

Lorem Ipsum ..


ค่านิยมของเรา

Mission: Ipsum Lorem ภารกิจของเรา ..

วิสัยทัศน์: Ipsum Lorem วิสัยทัศน์ของเรา ..

บริการ

สิ่งที่เรานำเสนอ


เพาเวอร์

Lorem Ipsum บังคับ Amet นั่ง ..

ความรัก

Lorem Ipsum บังคับ Amet นั่ง ..

ผลงานที่ทำได้

Lorem Ipsum บังคับ Amet นั่ง ..



สีเขียว

Lorem Ipsum บังคับ Amet นั่ง ..

ได้รับการรับรอง

Lorem Ipsum บังคับ Amet นั่ง ..

การทำงานอย่างหนัก

Lorem Ipsum บังคับ Amet นั่ง ..

ลองตัวเอง»

เพิ่มผลงานคอนเทนเนอร์

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

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

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

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

ตัวอย่าง

<div class="container-fluid text-center bg-grey">
  <h2>Portfolio</h2>
  <h4>What we have created</h4>
  <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>Yes, we built Paris</p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="newyork.jpg" alt="New York">
        <p><strong>New York</strong></p>
        <p>We built New York</p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="sanfran.jpg" alt="San Francisco">
        <p><strong>San Francisco</strong></p>
        <p>Yes, San Fran is ours</p>
      </div>
    </div>
</div>

ผล:

ผลงาน


สิ่งที่เราได้สร้างขึ้น

ปารีส

ปารีส

ใช่เราสร้างขึ้นในปารีส

นิวยอร์ก

นิวยอร์ก

เราสร้างนิวยอร์ก

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

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

ใช่ซานฟรานเป็นของเรา

ลองตัวเอง»

รูปภาพขนาดย่อจัดแต่งทรงผม

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

ตัวอย่าง

.thumbnail {
    padding: 0 0 15px 0;
    border: none;
    border-radius: 0;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
}

ผล:

ผลงาน


สิ่งที่เราได้สร้างขึ้น

ปารีส

ปารีส

ใช่เราสร้างขึ้นในปารีส

นิวยอร์ก

นิวยอร์ก

เราสร้างนิวยอร์ก

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

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

ใช่ซานฟรานเป็นของเรา

ลองตัวเอง»

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

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

ตัวอย่าง

<h2>What our customers say</h2>
<div id="myCarousel" class="carousel slide text-center" 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">
    <h4>"This company is the best. I am so happy with the result!"<br><span style="font-style:normal;">Michael Roe, Vice President, Comment Box</span></h4>
    </div>
    <div class="item">
      <h4>"One word... WOW!!"<br><span style="font-style:normal;">John Doe, Salesman, Rep Inc</span></h4>
    </div>
    <div class="item">
      <h4>"Could I... BE any more happy with this company?"<br><span style="font-style:normal;">Chandler Bing, Actor, FriendsAlot</span></h4>
    </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-control.right, .carousel-control.left {
    background-image: none;
    color: #f4511e;
}

.carousel-indicators li {
    border-color: #f4511e;
}

.carousel-indicators li.active {
    background-color: #f4511e;
}

.item h4 {
    font-size: 19px;
    line-height: 1.375em;
    font-weight: 400;
    font-style: italic;
    margin: 70px 0;
}

.item span {
    font-style: normal;
}

ผล:

สิ่งที่ลูกค้าของเราบอกว่า

ลองตัวเอง»

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

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

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

ตัวอย่าง

<div class="container-fluid">
  <div class="text-center">
    <h2>Pricing</h2>
    <h4>Choose a payment plan that works for you</h4>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <div class="panel panel-default text-center">
        <div class="panel-heading">
          <h1>Basic</h1>
        </div>
        <div class="panel-body">
          <p><strong>20</strong> Lorem</p>
          <p><strong>15</strong> Ipsum</p>
          <p><strong>5</strong> Dolor</p>
          <p><strong>2</strong> Sit</p>
          <p><strong>Endless</strong> Amet</p>
        </div>
        <div class="panel-footer">
          <h3>$19</h3>
          <h4>per month</h4>
          <button class="btn btn-lg">Sign Up</button>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="panel panel-default text-center">
        <div class="panel-heading">
          <h1>Pro</h1>
        </div>
        <div class="panel-body">
          <p><strong>50</strong> Lorem</p>
          <p><strong>25</strong> Ipsum</p>
          <p><strong>10</strong> Dolor</p>
          <p><strong>5</strong> Sit</p>
          <p><strong>Endless</strong> Amet</p>
        </div>
        <div class="panel-footer">
          <h3>$29</h3>
          <h4>per month</h4>
          <button class="btn btn-lg">Sign Up</button>
        </div>
      </div>
    </div>
   <div class="col-sm-4">
      <div class="panel panel-default text-center">
        <div class="panel-heading">
          <h1>Premium</h1>
        </div>
        <div class="panel-body">
          <p><strong>100</strong> Lorem</p>
          <p><strong>50</strong> Ipsum</p>
          <p><strong>25</strong> Dolor</p>
          <p><strong>10</strong> Sit</p>
          <p><strong>Endless</strong> Amet</p>
        </div>
        <div class="panel-footer">
          <h3>$49</h3>
          <h4>per month</h4>
          <button class="btn btn-lg">Sign Up</button>
        </div>
      </div>
    </div>
  </div>
</div>

ผล:

การตั้งราคา

เลือกแผนการชำระเงินที่เหมาะกับคุณ

ขั้นพื้นฐาน

20 Lorem

15 Ipsum

5 Dolor

2 นั่ง

ไม่มีที่สิ้นสุด Amet

มือโปร

50 Lorem

25 Ipsum

10 Dolor

5 นั่ง

ไม่มีที่สิ้นสุด Amet

เบี้ยประกันภัย

100 Lorem

50 Ipsum

25 Dolor

10 นั่ง

ไม่มีที่สิ้นสุด Amet

ลองตัวเอง»

แผงจัดแต่งทรงผม

ใช้ CSS สไตล์แผง:

ตัวอย่าง

.panel {
    border: 1px solid #f4511e;
    border-radius:0;
    transition: box-shadow 0.5s;
}

.panel:hover {
    box-shadow: 5px 0px 40px rgba(0,0,0, .2);
}

.panel-footer .btn:hover {
    border: 1px solid #f4511e;
    background-color: #fff !important;
    color: #f4511e;
}

.panel-heading {
    color: #fff !important;
    background-color: #f4511e !important;
    padding: 25px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.panel-footer {
    background-color: #fff !important;
}

.panel-footer h3 {
    font-size: 32px;
}

.panel-footer h4 {
    color: #aaa;
    font-size: 14px;
}

.panel-footer .btn {
    margin: 15px 0;
    background-color: #f4511e;
    color: #fff;
}

ผล:

การตั้งราคา

เลือกแผนการชำระเงินที่เหมาะกับคุณ

ขั้นพื้นฐาน

20 Lorem

15 Ipsum

5 Dolor

2 นั่ง

ไม่มีที่สิ้นสุด Amet

มือโปร

50 Lorem

25 Ipsum

10 Dolor

5 นั่ง

ไม่มีที่สิ้นสุด Amet

เบี้ยประกันภัย

100 Lorem

50 Ipsum

25 Dolor

10 นั่ง

ไม่มีที่สิ้นสุด Amet

ลองตัวเอง»

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

เพิ่มคอนเทนเนอร์ใหม่กับข้อมูลที่ติดต่อ:

ตัวอย่าง

<div class="container-fluid bg-grey">
  <h2 class="text-center">CONTACT</h2>
  <div class="row">
    <div class="col-sm-5">
      <p>Contact us and we'll get back to you within 24 hours.</p>
      <p><span class="glyphicon glyphicon-map-marker"></span> Chicago, US</p>
      <p><span class="glyphicon glyphicon-phone"></span> +00 1515151515</p>
      <p><span class="glyphicon glyphicon-envelope"></span> myemail@something.com</p>
    </div>
    <div class="col-sm-7">
      <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><br>
      <div class="row">
        <div class="col-sm-12 form-group">
          <button class="btn btn-default pull-right" type="submit">Send</button>
        </div>
      </div>
    </div>
  </div>
</div>

ผล:

ติดต่อ

ติดต่อเราและเราจะได้รับกลับมาให้คุณภายใน 24 ชั่วโมง

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

+00 1515151515

myemail@something.com


ลองตัวเอง»

เพิ่ม Google Maps

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

ตัวอย่าง

<!-- Set height and width with CSS -->
<div id="googleMap" style="height:400px;width:100%;"></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">
    <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="#about">ABOUT</a></li>
        <li><a href="#services">SERVICES</a></li>
        <li><a href="#portfolio">PORTFOLIO</a></li>
        <li><a href="#pricing">PRICING</a></li>
        <li><a href="#contact">CONTACT</a></li>
      </ul>
    </div>
  </div>
</nav>

ผล:

ลองตัวเอง»

บันทึก เคล็ดลับ: จัดขวาปุ่มลูกศรกับ navbar-right ระดับ


สไตล์ Navbar

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

ตัวอย่าง

.navbar {
    margin-bottom: 0;
    background-color: #f4511e;
    z-index: 9999;
    border: 0;
    font-size: 12px !important;
    line-height: 1.42857143 !important;
    letter-spacing: 4px;
    border-radius: 0;
}

.navbar li a, .navbar .navbar-brand {
    color: #fff !important;
}

.navbar-nav li a:hover, .navbar-nav li.active a {
    color: #f4511e !important;
    background-color: #fff !important;
}

.navbar-default .navbar-toggle {
    border-color: transparent;
    color: #fff !important;
}

ผล:

ลองตัวเอง»

เพิ่ม Scrollspy

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

ตัวอย่าง

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

<div id="about" class="container-fluid">
<div id="services" class="container-fluid">
<div id="portfolio" class="container-fluid">
<div id="pricing" class="container-fluid">
<div id="contact" class="container-fluid">
ลองตัวเอง»

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

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

ตัวอย่าง

<style>
footer .glyphicon {
    font-size: 20px;
    margin-bottom: 20px;
    color: #f4511e;
}
</style>

<footer class="container-fluid text-center">
  <a href="#myPage" title="To Top">
    <span class="glyphicon glyphicon-chevron-up"></span>
  </a>
  <p>Bootstrap Theme Made By <a href="http://www.w3ii.com" title="Visit w3ii">www.w3ii.com</a></p>
</footer>

ผล:

ลองตัวเอง»

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

ใช้ 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 Lato, sans-serif;
    line-height: 1.8;
    color: #818181;
}

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

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

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

ตัวอย่าง

h2 {
    font-size: 24px;
    text-transform: uppercase;
    color: #303030;
    font-weight: 600;
    margin-bottom: 30px;
}

h4 {
    font-size: 19px;
    line-height: 1.375em;
    color: #303030;
    font-weight: 400;
    margin-bottom: 30px;
}
ลองตัวเอง»

ภาพนิ่งในองค์ประกอบ

เรายังได้สร้างผลภาพเคลื่อนไหวที่จะเลื่อนในองค์ประกอบบนเลื่อน หากคุณต้องการที่จะใช้เพียงแค่เพิ่ม .slideanim ชั้นเรียนเพื่อองค์ประกอบที่คุณต้องการที่จะเลื่อนในและเพิ่มต่อไปนี้เพื่อ CSS และ jQuery คุณ (อย่าลังเลที่จะปรับเปลี่ยนระยะเวลาทึบว่าจะเริ่มต้นเมื่อมีการเลื่อนใน และอื่น ๆ ):

ตัวอย่าง CSS

.slideanim {visibility:hidden;}
.slide {
    /* The name of the animation */
    animation-name: slide;
    -webkit-animation-name: slide;
    /* The duration of the animation */
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    /* Make the element visible */
    visibility: visible;
}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
@-webkit-keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}

ตัวอย่าง jQuery

$(window).scroll(function() {
  $(".slideanim").each(function(){
    var pos = $(this).offset().top;

    var winTop = $(window).scrollTop();
    if (pos < winTop + 600) {
      $(this).addClass("slide");
    }
  });
});
ลองตัวเอง»

สมบูรณ์ " บริษัท " ธีม