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

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 Theme "Simply Me"


สร้างธีม: "Simply Me"

หน้านี้จะแสดงวิธีการสร้าง Bootstrap ธีมจากรอยขีดข่วน

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

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


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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap Theme Simply Me</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h3>Who Am I?</h3>
<img src="bird.jpg" alt="Bird">
<h3>I'm an adventurer</h3>

</body>
</html>

เพิ่ม Bootstrap CDN และใส่องค์ประกอบในตู้คอนเทนเนอร์

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

ตัวอย่าง

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap Theme Simply Me</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-fluid">
  <h3>Who Am I?</h3>
  <img src="bird.jpg" alt="Bird">
  <h3>I'm an adventurer</h3>
</div>

</body>
</html>

ผล:

ฉันเป็นใคร?

นก

ผมเป็นนักผจญภัย

ลองตัวเอง»

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

1. เพิ่มชั้นเอง (.bg-1) ในคอนเทนเนอร์เพื่อเพิ่มสีพื้นหลัง

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

ตัวอย่าง

<style>
.bg-1 {
    background-color: #1abc9c; /* Green */
    color: #ffffff;
}
</style>

<body>
  <div class="container-fluid bg-1 text-center">
    <h3>Who Am I?</h3>
    <img src="bird.jpg" alt="Bird">
    <h3>I'm an adventurer</h3>
  </div>
</body>

ผล:

ฉันเป็นใคร?

นก

ผมเป็นนักผจญภัย

ลองตัวเอง»

ภาพวงกลม

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

ตัวอย่าง

<img src="bird.jpg" class="img-circle" alt="Bird">

ผล:

ฉันเป็นใคร?

นก

ผมเป็นนักผจญภัย

ลองตัวเอง»

เนื้อหาเพิ่มเติม

เพิ่มเนื้อหาเพิ่มเติมและใส่ไว้ในภาชนะบรรจุใหม่:

ตัวอย่าง

<style>
.bg-1 {
    background-color: #1abc9c; /* Green */
    color: #ffffff;
}
.bg-2 {
    background-color: #474e5d; /* Dark Blue */
    color: #ffffff;
}
.bg-3 {
    background-color: #ffffff; /* White */
    color: #555555;
}
</style>

<body>

<div class="container-fluid bg-1 text-center">
  <h3>Who Am I?</h3>
  <img src="bird.jpg" class="img-circle" alt="Bird">
  <h3>I'm an adventurer</h3>
</div>

<div class="container-fluid bg-2 text-center">
  <h3>What Am I?</h3>
  <p>Lorem ipsum..</p>
</div>

<div class="container-fluid bg-3 text-center">
  <h3>Where To Find Me?</h3>
  <p>Lorem ipsum..</p>
</div>

</body>

ผล:

ฉันเป็นใคร?

นก

ผมเป็นนักผจญภัย

สิ่งที่ฉัน?

Lorem Ipsum บังคับ Amet นั่ง, consectetur adipiscing Elit, sed ไม่ eiusmod tempor incididunt UT Labore et dolore Magna aliqua Ut enim โฆษณาขีดต่ำที่สุด veniam, โฟน nostrud exercitation ullamco laboris ค้างคา UT aliquip อดีต EA commodo consequat

ที่ต้องการหาฉัน?

Lorem Ipsum บังคับ Amet นั่ง, consectetur adipiscing Elit, sed ไม่ eiusmod tempor incididunt UT Labore et dolore Magna aliqua Ut enim โฆษณาขีดต่ำที่สุด veniam, โฟน nostrud exercitation ullamco laboris ค้างคา UT aliquip อดีต EA commodo consequat

ลองตัวเอง»

เพิ่ม Padding

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

ตัวอย่าง

<style>
.container-fluid {
    padding-top: 70px;
    padding-bottom: 70px;
}
</style>

ผล:

ฉันเป็นใคร?

นก

ผมเป็นนักผจญภัย

สิ่งที่ฉัน?

Lorem Ipsum บังคับ Amet นั่ง, consectetur adipiscing Elit, sed ไม่ eiusmod tempor incididunt UT Labore et dolore Magna aliqua Ut enim โฆษณาขีดต่ำที่สุด veniam, โฟน nostrud exercitation ullamco laboris ค้างคา UT aliquip อดีต EA commodo consequat

ที่ต้องการหาฉัน?

Lorem Ipsum บังคับ Amet นั่ง, consectetur adipiscing Elit, sed ไม่ eiusmod tempor incididunt UT Labore et dolore Magna aliqua Ut enim โฆษณาขีดต่ำที่สุด veniam, โฟน nostrud exercitation ullamco laboris ค้างคา UT aliquip อดีต EA commodo consequat

ลองตัวเอง»

เพิ่มปุ่ม

เพิ่มปุ่มไปภาชนะกลาง:

ตัวอย่าง

<div class="container-fluid bg-2 text-center">
  <h3>What Am I?</h3>
  <p>Lorem ipsum..</p>
  <a href="#" class="btn btn-default btn-lg">Search</a>
</div>

ผล:

สิ่งที่ฉัน?

Lorem Ipsum บังคับ Amet นั่ง, consectetur adipiscing Elit, sed ไม่ eiusmod tempor incididunt UT Labore et dolore Magna aliqua Ut enim โฆษณาขีดต่ำที่สุด veniam, โฟน nostrud exercitation ullamco laboris ค้างคา UT aliquip อดีต EA commodo consequat

ค้นหา
ลองตัวเอง»

เพิ่มไอคอน

ไอคอนเพิ่มการค้นหาที่ปุ่ม "ค้นหา":

ตัวอย่าง

<a href="#" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-search"></span> Search
</a>

ผล:

ลองตัวเอง»

ปรับเปลี่ยนสามคอนเทนเนอร์ (เพิ่มกริด)

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

ตัวอย่าง

<div class="container-fluid bg-3 text-center">
  <h3>Where To Find Me?</h3>
  <div class="row">
    <div class="col-sm-4">
      <p>Lorem ipsum..</p>
      <img src="birds1.jpg" alt="Image">
    </div>
    <div class="col-sm-4">
      <p>Lorem ipsum..</p>
      <img src="birds2.jpg" alt="Image">
    </div>
    <div class="col-sm-4">
      <p>Lorem ipsum..</p>
      <img src="birds3.jpg" alt="Image">
    </div>
  </div>
</div>

ผล:

ที่ต้องการหาฉัน?

Lorem Ipsum บังคับ Amet นั่ง, consectetur adipisicing Elit, sed ไม่ eiusmod tempor incididunt UT Labore et dolore Magna aliqua

ภาพ

Lorem Ipsum บังคับ Amet นั่ง, consectetur adipisicing Elit, sed ไม่ eiusmod tempor incididunt UT Labore et dolore Magna aliqua

ภาพ

Lorem Ipsum บังคับ Amet นั่ง, consectetur adipisicing Elit, sed ไม่ eiusmod tempor incididunt UT Labore et dolore Magna aliqua

ภาพ
ลองตัวเอง»

ทำให้ภาพที่ตอบสนองต่อ

เพิ่ม .img-responsive ระดับภาพทั้งหมด

เพิ่ม display:inline กับภาพแรกที่จะบังคับให้เป็นศูนย์กลาง (คน .img-responsive ระดับเพิ่ม display:block ไปที่ภาพซึ่งทำให้มันข้ามไปทางด้านซ้ายของหน้าจอ)

ถ้าคุณต้องการที่ภาพเพื่อขยายความกว้างทั้งหมดของหน้าจอเมื่อมันเริ่มที่จะสแต็คเพิ่ม width:100% ไปยังภาพที่

เมื่อเปิดตัวอย่างอย่าลืมปรับขนาดหน้าจอเพื่อดูผลตอบสนอง:

ตัวอย่าง

<!-- The circular bird -->
<img src="bird.jpg" class="img-responsive img-circle" style="display:inline" alt="Bird">

<!-- The birds in our grid: -->
<img src="birds1.jpg" class="img-responsive" style="width:100%" alt="Image">
<img src="birds2.jpg" class="img-responsive" style="width:100%" alt="Image">
<img src="birds3.jpg" class="img-responsive" style="width:100%" alt="Image">
ลองตัวเอง»

เพิ่ม Navbar

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

ตัวอย่าง

<nav class="navbar navbar-default">
  <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="#">Me</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">WHO</a></li>
        <li><a href="#">WHAT</a></li>
        <li><a href="#">WHERE</a></li>
      </ul>
    </div>
  </div>
</nav>

ผล:

ลองตัวเอง»

สไตล์ Navbar

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

ตัวอย่าง

.navbar {
    padding-top: 15px;
    padding-bottom: 15px;
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
    font-size: 12px;
    letter-spacing: 5px;
}

.navbar-nav li a:hover {
    color: #1abc9c !important;
}

ผล:

ลองตัวเอง»

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

เพิ่มส่วนท้ายและใช้ CSS เพื่อจัดรูปแบบ:

ตัวอย่าง

<style>
.bg-4 {
    background-color: #2f2f2f;
    color: #ffffff;
}
</style>

<footer class="container-fluid bg-4 text-center">
  <p> Bootstrap Theme Made By <a href="http://www.w3ii.com">www.w3ii.com</a></p>
</footer>

ผล:

ลองตัวเอง»

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

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

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

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

จากนั้นคุณสามารถใช้งานได้ในหน้านี้:

ตัวอย่าง

body {
    font: 20px "Montserrat", sans-serif;
    line-height: 1.8;
    color: #f5f6f7;
}

p {font-size: 16px;}

เรายังได้สร้าง "ผู้ช่วย" ระดับอัตรากำไรขั้นต้นจะเพิ่มพื้นที่พิเศษที่เราคิดว่ามันจำเป็น มักจะหลังจากแต่ละ <h3> และ <img> องค์ประกอบ

ตัวอย่าง

.margin {margin-bottom: 45px;}
ลองตัวเอง»

สมบูรณ์ "Simply Me" ธีม