Bootstrap คือไฟล์ กรอบ CSS ที่ได้รับความนิยมอย่างมากทั่วทั้งเครือข่าย สไตล์ของพวกเขา การตอบสนอง มีให้เห็นบนโซเชียลเน็ตเวิร์ก ตุนตี y Twitter. การใช้สิ่งนี้ช่วยให้เราประหยัดเวลาได้มากในการพัฒนาเว็บแอปพลิเคชันเนื่องจากช่วยให้เราประหยัดงานและความพยายามทั้งหมดที่เกี่ยวข้องกับการสร้างรูปแบบหน้าที่สะอาดที่เหมาะสมกับอุปกรณ์ทั้งหมด เมื่อพิจารณาถึงรูปแบบที่ใช้ในกรอบนี้เราจะรู้ว่าพวกเขาคุ้นเคยกับเราเนื่องจากทุกวันนี้เว็บไซต์จำนวนมากได้นำไปใช้
โครงสร้าง
โครงสร้างของไหล Bootstrap
เพื่อให้เว็บไซต์ของเราสามารถเข้าถึงได้จากโทรศัพท์มือถือและแท็บเล็ตเราจะต้องใช้โครงสร้างของเหลวที่ Bootstrap เสนอให้เรา การใช้โครงสร้างนี้ง่ายมากทุกอย่างขึ้นอยู่กับองค์ประกอบ ระยะ ที่จะช่วยเรา เค้าโครง การออกแบบเว็บไซต์ของเรา ต่อมาเมื่อเราเข้าถึงการออกแบบนี้จากไฟล์ มาร์ทโฟน o ยาเม็ดสิ่งนี้จะปรับให้เข้ากับอุปกรณ์ดังกล่าวโดยอัตโนมัติซึ่งช่วยปรับปรุงคุณภาพของการนำทางอย่างมาก เราจะใช้ไฟล์ ระยะ กับคลาสในแผนกลอจิคัลภายในโครงสร้างของไหลเช่น:
<div class="row-fluid"> <div class="span2">Contenido</div> </div>
โดยที่ตัวเลข 2 แทนขนาดของช่วง แต่ละแถวมีพื้นที่เพียงพอสำหรับ 12 ช่วงของขนาด 1 หรือ 2 ของขนาด 6 ซึ่งสามารถกระจายได้ตามที่คุณต้องการ เมื่อเกินที่ว่างของแถวมันจะลงไปที่ถัดไปโดยอัตโนมัติทำให้เราสามารถใช้ไฟล์ ระยะ ขนาด 12 เพื่อสร้างตัวแบ่งบรรทัด หากเราต้องการข้ามไปบ้าง ระยะ เมื่อสร้างขึ้นมานั่นคือเริ่มจาก 4 ระยะและใช้ขนาด 3 เราจะใช้รหัสนี้:
<div class="span2 offset4">Contenido</div>
สิ่งนี้ช่วยให้การหารสามารถกระโดดได้สี่ครั้ง ครอบคลุม ก่อนที่จะแสดงเนื้อหา เราสามารถใช้สิ่งนี้ตามเจตจำนงเสรีของเราโดยข้ามสิ่งที่เราต้องการด้วยรหัสของเรา
การข้ามช่วงด้วยคลาสออฟเซ็ต
การออกแบบที่แตกต่างกันสำหรับแต่ละอุปกรณ์
คลาส CSS เพื่อแยกความแตกต่างของแต่ละอุปกรณ์
ในการใช้การออกแบบที่แตกต่างกันสำหรับอุปกรณ์แต่ละประเภทเราจะบอกแผนกลอจิคัลแต่ละส่วนสำหรับอุปกรณ์นั้น ๆ โดยใช้คลาสต่อไปนี้:
ด้วยวิธีนี้เราสามารถแสดงการออกแบบที่แตกต่างกันโดยสิ้นเชิงสำหรับแต่ละอุปกรณ์ที่มี URL เดียวกัน
ปุ่ม
รายการปุ่มที่เสนอโดย Bootstrap
Bootstrap นำเสนอปุ่มสีที่สะอาดตาการใช้งานนั้นง่ายมาก:
<a class="btn btn-success" href="URL"> Nombre del Botón </a>
ที่ไหน btn btn-success หมายถึงสีของปุ่มหากต้องการเปลี่ยนเราจะต้องแทนที่ด้วยคลาสที่แสดงในภาพก่อนหน้าเท่านั้น
การติดตั้ง Bootstrap
สำหรับการติดตั้ง CSS framework นี้เราจะดาวน์โหลด zip จากลิงค์ที่ฉันจะทิ้งไว้ตอนท้ายของโพสต์และเราจะเขียนโค้ดต่อไปนี้ ในส่วนหัวของไฟล์ HTML ของเรา.
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="./css/bootstrap.css" rel="stylesheet" type="text/css" /> <link href="./css/bootstrap-responsive.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="./js/bootstrap.js"></script> <script type="text/javascript" src="./js/bootstrap.min.js"></script>
เมื่อเราแน่ใจแล้วว่าไฟล์ CSS และ JS อยู่ในโฟลเดอร์เดียวกันกับไฟล์ HTML ของเราเราสามารถเริ่มออกแบบเว็บไซต์ที่ตอบสนองได้
ข้อมูลมากกว่านี้ - การตรวจสอบแบบฟอร์ม
ดาวน์โหลด - Bootstrap: CSS Framework
คุณไม่มีบทเรียนเพิ่มเติมเกี่ยวกับกรอบนี้ ???