บูต 3 ภาพรวม CSS

เป้า

ในการกวดวิชานี้เราได้กล่าวถึงจุด CSS Bootstrap 3 ต่อไปเราจะอธิบาย Bootstrap 3 ทำงานปัจจัยสำคัญหลายประการ

HTML 5 ประเภทเอกสาร (Doctype)

บูต 3 ใช้องค์ประกอบบางส่วนของ HTML5 และ CSS แอตทริบิวต์ เพื่อให้การทำงานเหล่านี้คุณจะต้องใช้ชนิดเอกสาร HTML5 (Doctype)

<! DOCTYPE html>
<html lang = "th">
  ...
</ html>

หากจุดเริ่มต้นของหน้าในเงินทุนสร้างไม่ได้ใช้ประเภทของเอกสาร HTML5 (Doctype) คุณอาจต้องเผชิญกับเบราว์เซอร์บางส่วนแสดงความไม่สอดคล้องกันปัญหาที่อาจเผชิญสถานการณ์บางอย่างที่ไม่สอดคล้องกันภายใต้ที่ไม่สามารถผ่านการตรวจสอบมาตรฐาน W3C ในรหัสของคุณ .

ลำดับความสำคัญของโทรศัพท์มือถือ

นี้น่าจะเป็นความเปลี่ยนแปลงที่สำคัญที่สุดใน Bootstrap 3 ในรุ่นก่อนหน้าของเงินทุน (จนถึง 2.x) คุณจะต้องพูดด้วยตนเอง CSS อื่นเพื่อที่จะทำให้โครงการร่วมกับ CSS อุปกรณ์ที่เหมาะสำหรับโทรศัพท์มือถือหลัก ไม่ได้อีกต่อไป Bootstrap CSS 3 เริ่มต้นตัวเองเป็นโทรศัพท์มือถือที่เป็นมิตร

บูต 3 ได้รับการออกแบบโทรศัพท์มือถือมีความสำคัญรองลงมาสก์ท็อป นี้เป็นจริงกะทันเวลามากเป็นคนมากขึ้นและใช้โทรศัพท์มือถือ

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

<ชื่อ Meta = "วิวพอร์ตเนื้อหา" = "width = อุปกรณ์ความกว้างเริ่มต้นขนาด = 1.0">

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

เริ่มต้นขนาด = 1.0 เพื่อให้แน่ใจว่าโหลดหน้าเว็บอัตราส่วน 1: 1 นำเสนอจะไม่มีการปรับ

เบราว์เซอร์บนโทรศัพท์มือถือโดยการเพิ่มผู้ใช้สามารถปรับขนาด = ไม่มีเมตาแท็กวิวพอร์ตการปิดใช้งานการปรับขนาดของมัน (ซูม) ฟังก์ชั่น โดยปกติมาตราส่วนสูงสุด = 1.0 และผู้ใช้สามารถปรับขยายได้ = ไม่ร่วมกัน หลังจากที่ฟังก์ชั่นซูมนี้ถูกปิดใช้งานผู้ใช้สามารถเลื่อนหน้าจอคุณสามารถทำให้เว็บไซต์ของคุณมีลักษณะเหมือนความรู้สึกที่โปรแกรมพื้นเมือง โปรดทราบว่าในวิธีนี้เราไม่แนะนำให้ใช้ของเว็บไซต์ทั้งหมดหรือขึ้นอยู่กับสถานการณ์ของคุณเอง!

ภาพที่ตอบสนองต่อ

โดยการเพิ่ม img ตอบสนองระดับช่วยให้เงินทุน 3 ภาพที่จะสนับสนุนรูปแบบการตอบสนองที่เป็นมิตรมากขึ้น ลองดูที่ชั้นนี้มีคุณสมบัติ CSS สิ่งที่ สาระสำคัญของมันคือการให้ภาพความกว้างสูงสุด: 100% และสูงอัตโนมัติคุณสมบัติช่วยให้การปรับขนาดของภาพไม่เกินขนาดขององค์ประกอบหลักที่

.img ตอบสนอง {
  จอแสดงผล: อินไลน์บล็อก
  ความสูง: อัตโนมัติ
  ความกว้างสูงสุด: 100%;
}

นี้แสดงให้เห็นว่าภาพที่เกี่ยวข้องแสดงผลเป็นแบบอินไลน์บล็อก เมื่อคุณตั้งค่าคุณสมบัติการแสดงผลขององค์ประกอบเป็นบล็อกแบบอินไลน์องค์ประกอบแบบอินไลน์ที่เกี่ยวกับเนื้อหาในรูปแบบการนำเสนอที่อยู่รอบ ๆ แต่มีความแตกต่างแบบอินไลน์ที่อยู่ในกรณีนี้เราสามารถตั้งค่าความกว้างและความสูง

การตั้งค่าความสูง: ความสูงอัตโนมัติองค์ประกอบที่เกี่ยวข้องขึ้นอยู่กับเบราว์เซอร์

ตั้งค่าความกว้างสูงสุดเป็น 100% แทนที่ความกว้างใด ๆ ที่ระบุไว้กว้าง จะช่วยให้ภาพที่จะสนับสนุนรูปแบบการตอบสนองที่เป็นมิตรมากขึ้น

การแสดงทั่วโลก, รูปแบบและการเชื่อมโยง

บูต 3 ใช้ร่างกาย {margin: 0;} ให้นำร่างของอัตรากำไรขั้นต้น

พิจารณาชุดต่อไปของร่างกายที่เกี่ยวข้อง

ร่างกาย {
  font-family: "Helvetica Neue", Helvetica, Arial, Sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: # 333333;
  สีพื้นหลัง: #FFFFFF;
}

กฎข้อแรกในการตั้งค่ารูปแบบตัวอักษรเริ่มต้นสำหรับร่างกาย "Helvetica Neue", Helvetica, Arial , Sans-serif

กฎข้อที่สองของข้อความของขนาดตัวอักษรเริ่มต้นของ 14 พิกเซล

กฎข้อที่สามคือการตั้งค่าความสูงของแถวเริ่มต้นคือ 1.428571429

กฎข้อที่สี่ชุดสีข้อความเริ่มต้นที่ # 333333

กฎสุดท้ายตั้งค่าสีพื้นหลังเริ่มต้นเป็นสีขาว

รูปแบบเริ่มต้นสำหรับการเชื่อมโยงการตั้งค่าดังต่อไปนี้

A: เลื่อน
A: โฟกัส {
  color: # 2a6496;
  ตกแต่งข้อความ: ขีดเส้นใต้;
}

A: โฟกัส {
  ร่าง: บางประ # 333;
  เค้าร่าง: 5px อัตโนมัติ -webkit โฟกัสแหวนสี;
  ร่างชดเชย: -2px;
}

ดังนั้นเมื่อเลื่อนเมาส์ผ่านการเชื่อมโยงหรือลิงค์ที่คุณคลิกสีที่ถูกกำหนดเป็น # 2a6496 ในขณะเดียวกันจะมีการขีดเส้นใต้

นอกจากนี้การเชื่อมโยงที่คุณคลิกจะมีรหัสสีสำหรับบางประร่าง # 333 กฎก็คือการกำหนดร่าง 5 พิกเซลกว้างและเบราว์เซอร์ที่ใช้ WebKit มีส่วนขยายเบราว์เซอร์ -webkit โฟกัสแหวนสี Contour ชดเชยถูกตั้งค่าให้ -2 พิกเซล

ทุกรูปแบบเหล่านี้สามารถพบได้ใน scaffolding.less

หลีกเลี่ยงความไม่สอดคล้องกันข้ามเบราว์เซอร์

บูต 3 เช่นเดียวกับรุ่นก่อนหน้านี้ใช้ทำให้ปกติเพื่อสร้างความสอดคล้องข้ามเบราว์เซอร์

ภาชนะ

ระดับเงินทุนคอนเทนเนอร์ที่ 3 สำหรับเนื้อหาในหน้าแพคเกจ ลองมาดูที่ชั้นต่อไปนี้

.container {
  ขอบขวา: อัตโนมัติ
  ขอบซ้าย: อัตโนมัติ
}

รหัสผ่านข้างต้นขอบด้านซ้ายและขวาของภาชนะโดยเบราเซอร์ตัดสินใจ

.container: ก่อน
.container: หลังจาก {
  จอแสดงผล: ตาราง;
  เนื้อหา: "";
}

นี้สร้างหลอกองค์ประกอบ การตั้งค่าการแสดงผลตารางก็จะสร้างที่ไม่ระบุชื่อตารางมือถือและบริบทบล็อกรูปแบบใหม่ ก่อนหลอกองค์ประกอบเพื่อป้องกันการล่มสลายขอบ ,: หลังจากหลอกองค์ประกอบเพื่อล้างลอย

ถ้าแอตทริบิวต์ conteneditable ปรากฏใน HTML เนื่องจากบางส่วนของข้อผิดพลาดโอเปร่าสร้างพื้นที่รอบองค์ประกอบเหล่านี้ ซึ่งสามารถทำได้โดยใช้เนื้อหา: "" เพื่อซ่อมแซม

.container: หลังจาก {
  ชัดเจนทั้งสอง
}

มันจะสร้างองค์ประกอบหลอกและสร้างความมั่นใจว่าทุกเรือลอยที่มีองค์ประกอบทั้งหมด

บูต 3 CSS มีการประยุกต์ใช้ในการตอบสนองต่อคำสั่งสื่อที่คำสั่งสื่อในเกณฑ์ค่าที่แตกต่างกันมีการตั้งค่าความกว้างสูงสุดสำหรับภาชนะเพื่อให้ตรงกับระบบกริด

ก่อนหน้านี้: เงินทุนส่วนตัว

ถัดไป: Bootstrap ระบบกริด

Bootstrap หลักสูตร

Bootstrap CSS

Bootstrap ส่วนประกอบเค้าโครง

Bootstrap วิดเจ็ต

Bootstrap อื่น ๆ