บูตภาพรวม CSS

ก่อนหน้านี้: Bootstrap สภาพแวดล้อมการติดตั้ง

ในบทนี้เราจะอธิบายโครงสร้างพื้นฐานของเป็นส่วนสำคัญของเงินทุนรวมถึงการพัฒนาเว็บของเราให้ดีขึ้นเร็วขึ้นปฏิบัติที่ดีที่สุดที่แข็งแกร่ง

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

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

<!DOCTYPE html>
<html>
....
</html>

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

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

ลำดับความสำคัญของโทรศัพท์มือถือคือการเปลี่ยนแปลงอย่างมีนัยสำคัญมากที่สุดใน Bootstrap 3

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

ไม่ได้อีกต่อไป Bootstrap CSS 3 เริ่มต้นตัวเองคือการสนับสนุนที่เป็นมิตรสำหรับอุปกรณ์มือถือ

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

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

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

เบราว์เซอร์บนโทรศัพท์มือถือโดยการเพิ่มผู้ใช้สามารถปรับขนาด = ไม่มีเมตาแท็กวิวพอร์ตการปิดใช้งานการปรับขนาดของมัน (ซูม) ฟังก์ชั่น

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

โปรดทราบว่าในทางนี้เราไม่แนะนำให้ใช้เว็บไซต์ทั้งหมดจะขึ้นอยู่กับสถานการณ์ของคุณเอง!

<meta name="viewport" content="width=device-width, 
                                     initial-scale=1.0, 
                                     maximum-scale=1.0, 
                                     user-scalable=no">

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

<img src="..." class="img-responsive" alt="响应式图像">

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

ลองดูที่สิ่งที่ชั้นนี้มีคุณสมบัติแบบ CSS

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

.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 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

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

การเรียงพิมพ์

ใช้ @ font-family ฐาน @ font-size ฐานและ @ line-height ฐานคุณสมบัติเป็นตัวอักษร

รูปแบบการเชื่อมโยง

การตั้งค่าสีที่ผ่านการเชื่อมโยงทั่วโลกคุณสมบัติ @ เชื่อมโยงสี

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

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

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

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

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

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

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

บูตใช้ ทำให้ปกติ จะสร้างความสอดคล้องข้ามเบราว์เซอร์

Normalize.css เป็นไฟล์ CSS ขนาดเล็กที่มีความสอดคล้องข้ามเบราว์เซอร์ที่ดีขึ้นในองค์ประกอบ HTML รูปแบบเริ่มต้น

คอนเทนเนอร์ (Container)

<div class="container">
  ...
</div>

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

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

รหัสผ่านดังกล่าวข้างต้นของคอนเทนเนอร์ที่ขอบด้านซ้ายและขวา (ขอบขวาขอบซ้าย) ตัดสินใจโดยเบราว์เซอร์

โปรดทราบว่าเนื่องจากช่องว่าง (ช่องว่าง) มีความกว้างคงที่, ตู้คอนเทนเนอร์เริ่มต้นไม่สามารถซ้อนกัน

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

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

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

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

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

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

@media (นาทีความกว้าง: 768px) {
   .container {
      ความกว้าง: 750px;
}

เบราว์เซอร์บูต / สนับสนุนอุปกรณ์

บูตสามารถทำงานได้ดีในสก์ท็อปใหม่ล่าสุดและเบราว์เซอร์สถานีเคลื่อนที่

เบราว์เซอร์รุ่นเก่าอาจไม่ได้รับการสนับสนุนอย่างดี

ตารางต่อไปนี้บูตสนับสนุนรุ่นล่าสุดของเบราว์เซอร์และแพลตฟอร์ม:

	โครเมียม	Firefox	IE	อุปรากร	การแข่งรถวิบาก
หุ่นยนต์	ใช่	ใช่	ไม่ได้บังคับ	NO	ไม่ได้บังคับ
iOS	ใช่	ไม่ได้บังคับ	ไม่ได้บังคับ	NO	ใช่
Mac OS X	ใช่	ใช่	ไม่ได้บังคับ	ใช่	ใช่
หน้าต่าง	ใช่	ใช่	YES *	ใช่	NO

* การสนับสนุนเงินทุนสำหรับ Internet Explorer 8 และรุ่นที่ใหม่กว่า IE

ก่อนหน้านี้: Bootstrap สภาพแวดล้อมการติดตั้ง

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

Bootstrap หลักสูตร

Bootstrap CSS

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

Bootstrap วิดเจ็ต

Bootstrap อื่น ๆ