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

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 Get Started


คืออะไร Bootstrap ?

  • Bootstrap เป็นกรอบ front-end ฟรีสำหรับการพัฒนาเว็บได้เร็วขึ้นและง่ายขึ้น
  • Bootstrap รวมถึง HTML และ CSS ตามแม่แบบการออกแบบสำหรับการพิมพ์รูปแบบ, ปุ่ม, โต๊ะ, นำทาง, Modals, คิวภาพและอื่น ๆ เช่นเดียวกับปลั๊กอิน JavaScript ทางเลือกจำนวนมาก
  • Bootstrap ยังช่วยให้คุณสามารถได้อย่างง่ายดายสร้างการออกแบบที่ตอบสนองต่อ

การออกแบบเว็บที่ตอบสนองคืออะไร?

การออกแบบเว็บตอบสนองเป็นเกี่ยวกับการสร้างเว็บไซต์โดยอัตโนมัติซึ่งจะปรับตัวเองให้ดูดีบนอุปกรณ์ทั้งหมดจากโทรศัพท์ขนาดเล็กไปจนถึงขนาดใหญ่เดสก์ท็


Bootstrap ประวัติศาสตร์

Bootstrap ได้รับการพัฒนาโดย Mark อ็อตโตและจาค็อบทอร์นตันที่ Twitter และปล่อยออกมาเป็นผลิตภัณฑ์ที่มาเปิดในเดือนสิงหาคม 2011 บน GitHub

ในมิถุนายน 2014 Bootstrap เป็นโครงการที่ 1 บน GitHub!


ทำไมต้องใช้ Bootstrap ?

ข้อดีของ Bootstrap :

  • ใช้งานง่าย: ใครมีความรู้เพียงแค่พื้นฐานของ HTML และ CSS สามารถเริ่มใช้ Bootstrap
  • คุณสมบัติที่ตอบสนองต่อ: Bootstrap 's CSS ตอบสนองปรับให้เข้ากับโทรศัพท์มือถือแท็บเล็ตและเดสก์ท็
  • วิธีการมือถือครั้งแรก: ใน Bootstrap 3 รูปแบบมือถือครั้งแรกเป็นส่วนหนึ่งของกรอบหลัก
  • ความเข้ากันได้เบราเซอร์: Bootstrap เข้ากันได้กับเบราว์เซอร์ที่ทันสมัย (Chrome, Firefox, Internet Explorer, Safari และ Opera)

ที่จะได้รับ Bootstrap ?

มีสองวิธีที่จะเริ่มใช้เป็น Bootstrap ในเว็บไซต์ของคุณเอง

คุณสามารถ:

  • ดาวน์โหลด Bootstrap จาก getbootstrap.com
  • รวมถึง Bootstrap จาก CDN

ดาวน์โหลด Bootstrap

หากคุณต้องการที่จะดาวน์โหลดและโฮสต์ Bootstrap ตัวคุณเองไป getbootstrap.com และปฏิบัติตามคำแนะนำที่มี


Bootstrap CDN

หากคุณไม่ต้องการที่จะดาวน์โหลดและเป็นเจ้าภาพ Bootstrap ตัวคุณเองคุณสามารถรวมจาก CDN (เครือข่ายการจัดส่งเนื้อหา)

MaxCDN ให้การสนับสนุน CDN สำหรับ Bootstrap CSS 's และ JavaScript นอกจากนี้ยังรวมถึง jQuery:

MaxCDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

ข้อดีอย่างหนึ่งของการใช้ Bootstrap CDN :
ผู้ใช้หลายคนได้ดาวน์โหลดแล้วเงินทุนจาก MaxCDN เมื่อเข้าสู่เว็บไซต์อื่น เป็นผลให้มันจะถูกโหลดจากแคชเมื่อพวกเขาเข้าเยี่ยมชมเว็บไซต์ของคุณซึ่งจะนำไปสู่เวลาในการโหลดได้เร็วขึ้น นอกจากนี้ส่วนใหญ่ CDN's จะให้แน่ใจว่าเมื่อผู้ใช้ขอไฟล์จากนั้นก็จะมีการแสดงจากเซิร์ฟเวอร์ที่ใกล้เคียงกับพวกเขาซึ่งยังนำไปสู่เวลาในการโหลดได้เร็วขึ้น


สร้างหน้าเว็บแรกด้วย Bootstrap

1. เพิ่ม DOCTYPE HTML5

Bootstrap ที่ใช้องค์ประกอบ HTML CSS และคุณสมบัติที่ต้องการ DOCTYPE HTML5

เสมอรวมถึงประเภทเอกสาร HTML5 ที่จุดเริ่มต้นของหน้าพร้อมกับแอตทริบิวต์ Lang และชุดตัวอักษรที่ถูกต้อง:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 3 เป็นโทรศัพท์มือถือครั้งแรก

Bootstrap 3 ถูกออกแบบมาเพื่อตอบสนองกับอุปกรณ์มือถือ รูปแบบมือถือครั้งแรกเป็นส่วนหนึ่งของกรอบหลัก

เพื่อให้แน่ใจว่าการแสดงผลที่เหมาะสมและซูมสัมผัสเพิ่มต่อไปนี้ <meta> แท็กภายใน <head> องค์ประกอบ:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width ส่วนกำหนดความกว้างของหน้าไปตามหน้าจอที่มีความกว้างของอุปกรณ์ (ซึ่งจะแตกต่างกันไปขึ้นอยู่กับอุปกรณ์)

initial-scale=1 ส่วนกำหนดระดับการซูมเริ่มต้นเมื่อโหลดหน้าเว็บแล้วเป็นครั้งแรกโดยเบราว์เซอร์

3. ตู้คอนเทนเนอร์

Bootstrap ยังต้องมีองค์ประกอบที่มีการตัดเนื้อหาเว็บไซต์

มีสองชั้นภาชนะให้เลือกเป็น:

  1. .container ระดับให้ตอบสนองภาชนะกว้างคง
  2. .container-fluid ระดับให้ภาชนะที่เต็มความกว้างทอดกว้างทั้งหมดของวิวพอร์ต

หมายเหตุ: ตู้คอนเทนเนอร์ไม่ได้ Nestable (คุณไม่สามารถใส่ภาชนะในภาชนะอื่น)


สองขั้นพื้นฐาน Bootstrap หน้า

ตัวอย่างต่อไปนี้แสดงให้เห็นโค้ดสำหรับพื้นฐาน Bootstrap หน้า (ที่มีการตอบสนองภาชนะความกว้างคงที่):

ตัวอย่าง

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap Example</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">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>
ลองตัวเอง»

ตัวอย่างต่อไปนี้แสดงให้เห็นโค้ดสำหรับพื้นฐาน Bootstrap หน้า (กับภาชนะที่เต็มความกว้าง):

ตัวอย่าง

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap Example</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">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>
ลองตัวเอง»