บทแนะนำ Bootstrap

Twitter Bootstrap เป็นเฟรมเวิร์กส่วนหน้าที่ได้รับความนิยมมากที่สุดในช่วงเวลาที่ผ่านมา เป็นเฟรมเวิร์กฟรอนต์เอนด์ที่ทันสมัยใช้งานง่ายและทรงพลังเพื่อการพัฒนาเว็บที่รวดเร็วและง่ายขึ้น ใช้ HTML, CSS และ Javascript บทช่วยสอนนี้จะสอนพื้นฐานของ Bootstrap Framework ซึ่งคุณสามารถสร้างโครงการเว็บได้อย่างง่ายดาย บทช่วยสอนแบ่งออกเป็นส่วนต่างๆเช่น Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components และ Bootstrap Plugins แต่ละส่วนเหล่านี้ประกอบด้วยหัวข้อที่เกี่ยวข้องพร้อมตัวอย่างง่ายๆและมีประโยชน์

ทำไมต้องเรียนรู้ Bootstrap?

Mobile first approach - Bootstrap 3 เฟรมเวิร์กประกอบด้วยรูปแบบแรกสำหรับมือถือทั่วทั้งไลบรารีแทนที่จะเป็นไฟล์แยก
Browser Support - รองรับโดยเบราว์เซอร์ยอดนิยมทั้งหมด

Easy to get started- ด้วยความรู้เกี่ยวกับ HTML และ CSS ทุกคนสามารถเริ่มต้นกับ Bootstrap ได้ นอกจากนี้เว็บไซต์อย่างเป็นทางการของ Bootstrap ยังมีเอกสารประกอบที่ดี
Responsive design- CSS ที่ตอบสนองของ Bootstrap ปรับเป็นเดสก์ท็อปแท็บเล็ตและโทรศัพท์มือถือ ข้อมูลเพิ่มเติมเกี่ยวกับการออกแบบที่ตอบสนองได้ในบทBootstrap Responsive Design

นำเสนอโซลูชันที่สะอาดและสม่ำเสมอสำหรับการสร้างอินเทอร์เฟซสำหรับนักพัฒนา
ประกอบด้วยส่วนประกอบในตัวที่สวยงามและใช้งานได้ซึ่งปรับแต่งได้ง่าย
นอกจากนี้ยังมีการปรับแต่งตามเว็บ
และที่ดีที่สุดก็คือโอเพ่นซอร์ส

สวัสดีชาวโลกโดยใช้ Bootstrap

เพื่อให้คุณรู้สึกตื่นเต้นเล็กน้อยเกี่ยวกับ Bootstrap ฉันจะให้โปรแกรม Bootstrap Hello World แบบธรรมดาขนาดเล็กคุณสามารถทดลองใช้โดยใช้ลิงก์สาธิต

<!DOCTYPE html>
<html>
   
   <head>
      <title>Bootstrap 101 Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      
      <!-- Bootstrap -->
      <link href = "css/bootstrap.min.css" rel = "stylesheet">
      
      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
      <!--[if lt IE 9]>
      <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      
   </head>
   
   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://code.jquery.com/jquery.js"></script>
      
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src = "js/bootstrap.min.js"></script>
      
   </body>
</html>

การใช้งาน Bootstrap

Scaffolding- Bootstrap จัดเตรียมโครงสร้างพื้นฐานด้วยระบบกริดรูปแบบลิงก์และพื้นหลัง นี่คือรายละเอียดในส่วนนี้Bootstrap Basic Structure
CSS- Bootstrap มาพร้อมกับคุณสมบัติของการตั้งค่า CSS ทั่วโลกองค์ประกอบ HTML พื้นฐานที่ออกแบบและปรับปรุงด้วยคลาสที่ขยายได้และระบบกริดขั้นสูง นี่คือรายละเอียดในส่วนนี้Bootstrap with CSS.
Components- Bootstrap มีส่วนประกอบที่สามารถนำกลับมาใช้ใหม่ได้กว่าโหลที่สร้างขึ้นเพื่อให้การแสดงสัญลักษณ์เมนูแบบเลื่อนลงการนำทางการแจ้งเตือนป๊อปโอเวอร์และอื่น ๆ อีกมากมาย นี่คือรายละเอียดในส่วนนี้Layout Components.
JavaScript Plugins- Bootstrap มีปลั๊กอิน jQuery แบบกำหนดเองมากกว่าโหล คุณสามารถรวมไว้ทั้งหมดหรือทีละรายการ นี่คือรายละเอียดในส่วนนี้Bootstrap Plugins.
Customize - คุณสามารถปรับแต่งส่วนประกอบของ Bootstrap ตัวแปร LESS และปลั๊กอิน jQuery เพื่อรับเวอร์ชันของคุณเอง

ผู้ชม

บทช่วยสอนนี้จัดทำขึ้นสำหรับทุกคนที่มีความรู้พื้นฐานเกี่ยวกับ HTML และ CSS และมีความต้องการที่จะพัฒนาเว็บไซต์ หลังจากจบบทช่วยสอนนี้คุณจะพบว่าตัวเองมีความเชี่ยวชาญระดับปานกลางในการพัฒนาโครงการเว็บโดยใช้ Twitter Bootstrap

ข้อกำหนดเบื้องต้น

ก่อนที่คุณจะเริ่มดำเนินการตามบทช่วยสอนนี้เราสมมติว่าคุณทราบพื้นฐานของ HTML และ CSS แล้ว หากคุณไม่ทราบถึงแนวคิดเหล่านี้เป็นอย่างดีเราขอแนะนำให้คุณอ่านบทแนะนำสั้น ๆ ของเราเกี่ยวกับการสอน HTML และการสอน CSS