bootstrap คืออะไร ?

bootstrap-social(bootstrap คืออะไร)

Written by admin

28 มีนาคม 2021

bootstrap คืออะไร ?

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 เข้ากันได้กับเบราว์เซอร์ที่ทันสมัยทั้งหมด (ChromeFirefox , Internet Explorer 10+EdgeSafari และ 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 ต้องใช้องค์ประกอบที่มีอยู่เพื่อบรรจุหาในไซต์

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

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

.

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

Aoo Studio Digital 2U ให้บริการรับวางระบบ ไอที ซัพพอร์ต การตลาดดิจิตอล ทำเว็บไซต์ One Page ทำเว็บไซต์บริษัท

zixzax ทำเว็บไซต์ - ออกแบบเว็บไซต์ - ตัวอย่างเว็บไซต์

บทความที่เกี่ยวข้อง

Api (Application programming interface) คืออะไร

Api (Application programming interface) คือ ส่วนต่อประสานโปรแกรมประยุกต์ หมายถึง วิธีการที่ระบบปฏิบัติการ ไลบรารี...

วิธีติดตั้ง Bootstrap CDN

วิธีติดตั้ง Bootstrap CDN โดยติดตั้งสคริปท์เพื่อทำการดึงข้อมูลแพคเกจ Bootstrap แบบออนไลน์ ซึ่งจัดไว้ให้ฟรีโดย folks ที่ StackPath ใช้สำหรับ

คำสั่ง php info คือ

คำสั่ง php info คือ คำสั่งที่ใช้เพื่อดูเวอร์ชั่น PHP และดูข้อมูลของ Hosting ง่ายๆ ด้วยการสร้างไฟล์ phpinfo.php จากนั้น เมื่อเราทำการสร้างไฟล์

วิธีจัดรูปแบบข้อความภาษา HTML

องค์ประกอบ การจัดรูปแบบข้อความภาษา HTML เพื่อแสดงข้อความประเภทพิเศษ HTML ใช้องค์ประกอบเช่นและสำหรับการส่งออกการจัดรูปแบบเช่นตัวหนาหรือตัวเอีย

PHP คืออะไร ?

ภาษา php คืออะไร  PHP เป็นตัวย่อสำหรับ "PHP: Hypertext Preprocessor"PHP...

ภาษา html คืออะไร ?

ภาษา html คืออะไร สำหรับภาษา html เป็นภาษามาร์คอัปมาตรฐานสำหรับการสร้างเว็บเพจ หรือการทำเว็บไซต์ HTML ย่อมาจาก Hyper...

บทความอื่นๆ ที่คุณอาจสนใจ

Non-Fungible Token (NFT) คืออะไร

Non-Fungible Token (NFT) คืออะไร

NFT (Non-Fungible Token) คือสินทรัพย์ดิจิทัลที่แสดงถึงวัตถุในโลกแห่งความเป็นจริง เช่น ศิลปะ ดนตรี...

P2P (Peer-To-Peer) คืออะไร

P2P (Peer-To-Peer) คืออะไร

peer to peer network (P2P) เป็นเครือข่ายคอมพิวเตอร์ธรรมดา เกิดขึ้นครั้งแรกในปลายทศวรรษ...

Internet of Things (IOT) คืออะไร?

Internet of Things (IOT) คืออะไร?

บทนำสั้นๆ เกี่ยวกับ Internet of Things (IOT) อนาคตของ IOT : สิ่งที่เราคาดหวังได้จากมัน Internet of Things คือ...

Phishing (ฟิชชิ่ง) คืออะไร

Phishing (ฟิชชิ่ง) คืออะไร

Phishing (ฟิชชิ่ง) คือการหลอกลวงทางอินเทอร์เน็ต โดยผู้กระทำความผิดจะหลอกให้ผู้ใช้เปิดเผยข้อมูลส่วนตัว เช่น รหัสผ่าน...

VPN คืออะไร ?

VPN คืออะไร ?

VPN หรือ Virtual Private Network หรือ เครือข่ายเสมือน คือตัวขยายเครือข่ายส่วนตัวผ่านเครือข่ายสาธารณะ...

Time to live (TTL) คืออะไร

Time to live (TTL) คืออะไร

Time to live (TTL) คือ ระยะเวลาหรือ "hops" ที่แพ็กเก็ตถูกตั้งค่าให้อยู่ภายในเครือข่ายก่อนที่จะทิ้งโดยเราเตอร์ TTL...

Traceroute คืออะไร

Traceroute คืออะไร

Traceroute เป็นเครื่องมือวินิจฉัยเครือข่ายที่ใช้ในการติดตามเส้นทางแบบเรียลไทม์ที่ส่งโดยแพ็กเก็ตบนเครือข่าย IP...

Mac Address คืออะไร

Mac Address คืออะไร

MAC ADDRESS คือ หมายเลขประจำตัวฮาร์ดแวร์ที่ระบุอุปกรณ์แต่ละเครื่องบนเครือข่ายโดยไม่ซ้ำกัน Mac Address ย่อมาจาก "Media...

0 ความคิดเห็น