Bootstrap - การตั้งค่าสภาพแวดล้อม

การติดตั้งและเริ่มใช้ Bootstrap นั้นง่ายมาก บทนี้จะอธิบายวิธีดาวน์โหลดและตั้งค่า Bootstrap นอกจากนี้เราจะกล่าวถึงโครงสร้างไฟล์ Bootstrap และสาธิตการใช้งานด้วยตัวอย่าง

ดาวน์โหลด Bootstrap

คุณสามารถดาวน์โหลด Bootstrap เวอร์ชันล่าสุดได้จาก https://getbootstrap.com/. เมื่อคุณคลิกที่ลิงค์นี้คุณจะเห็นหน้าจอด้านล่าง -

ที่นี่คุณจะเห็นปุ่มสองปุ่ม -

Download Bootstrap- เมื่อคลิกที่นี่คุณสามารถดาวน์โหลด Bootstrap CSS, JavaScript และฟอนต์เวอร์ชันที่คอมไพล์ไว้ล่วงหน้าและย่อขนาดได้ ไม่มีเอกสารประกอบหรือไฟล์ซอร์สโค้ดต้นฉบับรวมอยู่ด้วย
Download Source - เมื่อคลิกที่นี่คุณจะได้รับซอร์สโค้ด Bootstrap LESS และ JavaScript ล่าสุดจาก GitHub

หากคุณทำงานกับซอร์สโค้ดที่ไม่ได้คอมไพล์ของ Bootstrap คุณจะต้องคอมไพล์ไฟล์ LESS เพื่อสร้างไฟล์ CSS ที่ใช้งานได้ สำหรับการรวบรวมไฟล์น้อยลงใน CSS, เงินทุนอย่างเป็นทางการสนับสนุนเฉพาะ Recessซึ่งเป็นทวิตเตอร์ของ Hinter CSS ขึ้นอยู่กับ less.js

เพื่อความเข้าใจที่ดีขึ้นและใช้งานง่ายเราจะใช้ Bootstrap เวอร์ชันที่คอมไพล์ไว้ล่วงหน้าตลอดบทช่วยสอน เนื่องจากไฟล์ได้รับการปฏิบัติตามและลดขนาดคุณจึงไม่ต้องกังวลทุกครั้งรวมถึงไฟล์แยกต่างหากสำหรับการทำงานของแต่ละบุคคล ในขณะที่เขียนบทช่วยสอนนี้ได้ดาวน์โหลดเวอร์ชันล่าสุด (Bootstrap 3)

โครงสร้างไฟล์

Bootstrap ที่คอมไพล์แล้ว

เมื่อดาวน์โหลด Bootstrap เวอร์ชันคอมไพล์แล้วให้แตกไฟล์ ZIP และคุณจะเห็นโครงสร้างไฟล์ / ไดเร็กทอรีต่อไปนี้ -

อย่างที่คุณเห็นมี CSS และ JS ที่คอมไพล์แล้ว (bootstrap. *) รวมถึง CSS และ JS ที่คอมไพล์แล้วและย่อขนาด (bootstrap.min. *) ฟอนต์จาก Glyphicons รวมอยู่ด้วยเนื่องจากเป็นธีม Bootstrap ที่เป็นทางเลือก

ซอร์สโค้ด Bootstrap

หากคุณดาวน์โหลดซอร์สโค้ด Bootstrap โครงสร้างไฟล์จะเป็นดังนี้ -

ไฟล์ที่อยู่ภายใต้less / , js /และฟอนต์ /เป็นซอร์สโค้ดสำหรับ Bootstrap CSS, JS และฟอนต์ไอคอน (ตามลำดับ)
อ /โฟลเดอร์รวมถึงทุกอย่างที่ระบุไว้ในส่วนของการดาวน์โหลด precompiled ดังกล่าวข้างต้น
docs-assets / , ตัวอย่าง /และไฟล์* .htmlทั้งหมดเป็นเอกสาร Bootstrap

เทมเพลต HTML

เทมเพลต HTML พื้นฐานที่ใช้ Bootstrap จะมีลักษณะดังนี้ -

<!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>

คุณสามารถดูไฟล์ jquery.js, bootstrap.min.js และ bootstrap.min.cssไฟล์ที่รวมไว้เพื่อสร้างไฟล์ HTM ปกติไปยัง Bootstrapped Template อย่าลืมรวมไลบรารี jQuery ก่อนที่คุณจะรวมไลบรารี Bootstrap

รายละเอียดเพิ่มเติมเกี่ยวกับแต่ละองค์ประกอบในชิ้นส่วนดังกล่าวข้างต้นนี้ของรหัสที่จะได้รับการกล่าวถึงในบทBootstrap CSS ภาพรวม

ตัวอย่าง

ตอนนี้เรามาลองตัวอย่างโดยใช้เทมเพลตด้านบน ลองใช้ตัวอย่างต่อไปนี้โดยใช้ตัวเลือก Live Demo ที่มุมขวาบนของกล่องโค้ดตัวอย่างด้านล่างบนเว็บไซต์ของเรา -

<h1>Hello, world!</h1>

ในบทต่อ ๆ ไปเราได้ใช้ข้อความจำลองจากไซต์ https://www.lipsum.com/.