บทช่วยสอน บูตภาพรวม CSS ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ HTML 5 ประเภทเอกสาร (Doctype),ลำดับความสำคัญของโทรศัพท์มือถือ,ภาพที่ตอบสนองต่อ,การแสดงทั่วโลก, รูปแบบและการเชื่อมโยง,หลีกเลี่ยงความไม่สอดคล้องกันข้ามเบราว์เซอร์,คอนเทนเนอร์ (Container),เบราว์เซอร์บูต / สนับสนุนอุปกรณ์,
ในบทนี้เราจะอธิบายโครงสร้างพื้นฐานของเป็นส่วนสำคัญของเงินทุนรวมถึงการพัฒนาเว็บของเราให้ดีขึ้นเร็วขึ้นปฏิบัติที่ดีที่สุดที่แข็งแกร่ง
บูตใช้บางส่วนองค์ประกอบ HTML5 และ CSS คุณสมบัติ เพื่อให้การทำงานเหล่านี้คุณจะต้องใช้ชนิดเอกสาร HTML5 (Doctype) ดังนั้นในจุดเริ่มต้นของการใช้เงินทุนโครงการมีส่วนรหัสต่อไปนี้
<!DOCTYPE html> <html> thth </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="th." 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 รูปแบบเริ่มต้น
<div class="container"> th. </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