bootstrap คือ เทมเพลตการการจัดรูปแบบ HTML และ CSS สำหรับสำหรับเว็บไซต์ รวมทั้งปลั๊กอิน JavaScript โดย Bootstrap เป็นโครง front-end ฟรีสำหรับการพัฒนาเว็บ หรือทำเว็บไซต์ ที่รวดเร็วและง่ายขึ้น และ bootstrap ยังช่วยให้คุณสามารถสร้างการออกแบบที่ตอบสนองความต้องการได้อย่างง่ายดาย
Bootstrap 4
Bootstrap 4 เป็น Bootstrap รุ่นใหม่ล่าสุด ด้วยส่วนประกอบใหม่สไตล์ชีตที่เร็วขึ้นและการตอบสนองที่มากขึ้น
Bootstrap 4 สนับสนุนเวอร์ชันล่าสุดและเสถียรที่สุดของเว็บเบราว์เซอร์และแพลตฟอร์มที่สำคัญทั้งหมด อย่างไรก็ตาม Internet Explorer 9 และ Windows ไม่รองรับ
ทำไมต้องใช้ Bootstrap
ข้อดีของ Bootstrap:
- ใช้งานง่าย:ทุกคนที่มีความรู้พื้นฐานเกี่ยวกับ HTML และ CSS สามารถเริ่มใช้ Bootstrap ได้
- คุณลักษณะที่ตอบสนองได้: CSS ที่ตอบสนองต่อ Bootstrap จะปรับไปใช้กับโทรศัพท์แท็บเล็ตและเดสก์ท็อป
- แนวทาง Mobile-First ใน Bootstrap รูปแบบมือถือแรกเป็นส่วนหนึ่งของกรอบหลัก
- เข้ากันได้กับเบราว์เซอร์: Bootstrap 4 เข้ากันได้กับเบราว์เซอร์ที่ทันสมัยทั้งหมด (Chrome, Firefox , Internet Explorer 10+, Edge, Safari และ Opera)
ทำเว็บไซต์ด้วย Bootstrap 4
เพิ่ม doctype HTML5
Bootstrap ใช้องค์ประกอบ HTML และคุณสมบัติ CSS ที่ต้องใช้ doctype HTML5
ควรใส่หลักเกณฑ์ HTML5 ในตอนต้นของหน้ารวมทั้งแอตทริบิวต์ lang และชุดอักขระที่ถูกต้อง:
Bootstrap CDN v.3.3.7 // วิธีติดตั้งโดยการดึงข้อมูลแบบออนไลน์
เพียงแค่ใช้ลิงก์Bootstrap CDNเหล่านี้.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Bootstrap CDN v.4.1.3 // วิธีติดตั้งโดยการดึงข้อมูลแบบออนไลน์
CSS
คัดลอกและวางสไตล์ชีตในแท็ก
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
JS, Popper.js, and jQuery
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
คอมโพเนนต์จำนวนมากต้องการการใช้ JavaScript ในการทำงาน โดยเฉพาะ ต้องการ jQuery , Popper.js และปลั๊กอิน JavaScript วางตำแหน่งต่อไปนี้ไว้
Bootstrap mobile-first
Bootstrap ได้รับการออกแบบเพื่อตอบสนองต่ออุปกรณ์เคลื่อนที่ โดยเน้นที่การปรับรูปแบบมือถือเป็นอันดับแรก
เพื่อให้แน่ใจว่าการแสดงผลที่เหมาะสมและสัมผัสการซูมให้เพิ่มแท็กต่อไปนี้ภายใน
องค์ประกอบ
width=device-width ส่วนกำหนดความกว้างของหน้าไปตามหน้าจอที่มีความกว้างของอุปกรณ์ (ซึ่งจะแตกต่างกันไปขึ้นอยู่กับอุปกรณ์)
initial-scale=1 ส่วนกำหนดระดับการซูมเริ่มต้นเมื่อโหลดหน้าเว็บแล้วเป็นครั้งแรกโดยเบราว์เซอร์
Containers
Bootstrap ต้องใช้องค์ประกอบที่มีอยู่เพื่อบรรจุหาในไซต์
มีสองชั้นคอนเทนเนอร์ให้เลือก:
- .container ระดับให้ตอบสนองภาชนะกว้างคง
- .container-fluid ระดับให้เป็นภาชนะเต็มความกว้างทอดกว้างทั้งหมดของวิวพอร์ต
.
0 ความคิดเห็น