bootstrap คืออะไร ?

Written by admin



28 มีนาคม 2021

bootstrap คืออะไร ?

Ads

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 ต้องใช้องค์ประกอบที่มีอยู่เพื่อบรรจุหาในไซต์

มีสองชั้นคอนเทนเนอร์ให้เลือก: