เริ่มต้น
ภาพรวมของ Bootstrap วิธีดาวน์โหลดและใช้งาน เทมเพลตและตัวอย่างพื้นฐาน และอื่นๆ
ภาพรวมของ Bootstrap วิธีดาวน์โหลดและใช้งาน เทมเพลตและตัวอย่างพื้นฐาน และอื่นๆ
Bootstrap (ปัจจุบันคือ v3.4.1) มีวิธีง่ายๆ สองสามวิธีในการเริ่มต้นอย่างรวดเร็ว โดยแต่ละวิธีจะดึงดูดระดับทักษะและกรณีการใช้งานที่แตกต่างกัน อ่านเพื่อดูว่าอะไรเหมาะกับความต้องการเฉพาะของคุณ
CSS, JavaScript และฟอนต์ที่คอมไพล์แล้วย่อเล็กสุด ไม่มีเอกสารหรือไฟล์ต้นฉบับรวมอยู่ด้วย
ไฟล์ Source Less, JavaScript และฟอนต์ พร้อมกับเอกสารของเรา ต้องใช้คอมไพเลอร์น้อยและการตั้งค่าบางอย่าง
Bootstrap ถูกย้ายจาก Less to Sassเพื่อให้รวมได้ง่ายในโปรเจ็กต์ Rails, Compass หรือ Sass เท่านั้น
ผู้คนที่jsDelivrให้การสนับสนุน CDN สำหรับ CSS และ JavaScript ของ Bootstrap เพียงใช้ลิงก์jsDelivr เหล่านี้
คุณยังสามารถติดตั้งและจัดการ Less, CSS, JavaScript และฟอนต์ของ Bootstrap โดยใช้Bower :
คุณยังสามารถติดตั้ง Bootstrap โดยใช้npm :
require('bootstrap')
จะโหลดปลั๊กอิน jQuery ของ Bootstrap ทั้งหมดลงในวัตถุ jQuery ตัวbootstrap
โมดูลเองไม่ได้ส่งออกอะไรเลย คุณสามารถโหลดปลั๊กอิน jQuery ของ Bootstrap ด้วยตนเองโดยโหลด/js/*.js
ไฟล์ภายใต้ไดเร็กทอรีระดับบนสุดของแพ็คเกจ
Bootstrap package.json
มีข้อมูลเมตาเพิ่มเติมภายใต้คีย์ต่อไปนี้:
less
- พาธไปยัง ไฟล์ซอร์สLessหลักของ Bootstrapstyle
- เส้นทางไปยัง CSS ที่ไม่ย่อขนาดของ Bootstrap ที่ได้รับการคอมไพล์ล่วงหน้าโดยใช้การตั้งค่าเริ่มต้น (ไม่มีการปรับแต่ง)คุณยังสามารถติดตั้งและจัดการ Less, CSS, JavaScript และฟอนต์ของ Bootstrap โดยใช้Composer :
Bootstrap ใช้Autoprefixerเพื่อจัดการกับ คำนำ หน้าผู้ขาย CSS หากคุณกำลังรวบรวม Bootstrap จากแหล่ง Less/Sass และไม่ได้ใช้ Gruntfile ของเรา คุณจะต้องรวม Autoprefixer เข้ากับกระบวนการสร้างของคุณเอง หากคุณกำลังใช้ Bootstrap ที่คอมไพล์ล่วงหน้าหรือใช้ Gruntfile ของเรา คุณไม่จำเป็นต้องกังวลเกี่ยวกับเรื่องนี้เพราะ Autoprefixer ถูกรวมเข้ากับ Gruntfile ของเราแล้ว
Bootstrap สามารถดาวน์โหลดได้ในสองรูปแบบ ซึ่งคุณจะพบไดเร็กทอรีและไฟล์ต่อไปนี้ จัดกลุ่มทรัพยากรทั่วไปตามตรรกะ และจัดเตรียมรูปแบบที่คอมไพล์แล้วและย่อให้เล็กสุด
โปรดทราบว่าปลั๊กอิน JavaScript ทั้งหมดจำเป็นต้องรวม jQuery ตามที่แสดงในเทมเพลตเริ่มต้น ปรึกษาเราbower.json
เพื่อดูว่ารองรับ jQuery เวอร์ชันใด
เมื่อดาวน์โหลดแล้ว ให้คลายซิปโฟลเดอร์ที่บีบอัดเพื่อดูโครงสร้างของ Bootstrap (ที่คอมไพล์แล้ว) คุณจะเห็นสิ่งนี้:
นี่เป็นรูปแบบพื้นฐานที่สุดของ Bootstrap: ไฟล์ที่คอมไพล์ล่วงหน้าสำหรับการใช้งานดรอปอินอย่างรวดเร็วในเกือบทุกโครงการเว็บ เราจัดเตรียม CSS และ JS ที่คอมไพล์แล้ว ( bootstrap.*
) รวมถึง CSS และ JS ที่คอมไพล์แล้วและย่อ ( bootstrap.min.*
) ซอร์สแมป CSS ( bootstrap.*.map
) สามารถใช้ได้กับเครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์บางตัว รวมแบบอักษรจาก Glyphicons เช่นเดียวกับธีม Bootstrap ที่เป็นตัวเลือก
การดาวน์โหลดซอร์สโค้ด Bootstrap ประกอบด้วยเนื้อหา CSS, JavaScript และฟอนต์ที่คอมไพล์ล่วงหน้า พร้อมกับซอร์ส Less, JavaScript และเอกสารประกอบ โดยเฉพาะอย่างยิ่ง ประกอบด้วยสิ่งต่อไปนี้และอื่น ๆ :
, less/
, js/
และfonts/
เป็นซอร์สโค้ดสำหรับแบบอักษร CSS, JS และไอคอนของเรา (ตามลำดับ) dist/
โฟลเดอร์นี้มีทุกอย่างที่ระบุไว้ในส่วนการดาวน์โหลดที่คอมไพล์ล่วงหน้าด้านบน โฟลเดอร์ นี้docs/
มีซอร์สโค้ดสำหรับเอกสารประกอบของเรา และexamples/
การใช้งาน Bootstrap นอกเหนือจากนั้น ไฟล์อื่น ๆ ที่รวมอยู่ให้การสนับสนุนแพ็คเกจ ข้อมูลใบอนุญาต และการพัฒนา
Bootstrap ใช้Gruntสำหรับระบบบิลด์ด้วยวิธีการที่สะดวกในการทำงานกับเฟรมเวิร์ก นี่คือวิธีที่เราคอมไพล์โค้ด รันการทดสอบ และอื่นๆ
ในการติดตั้ง Grunt คุณต้องดาวน์โหลดและติดตั้ง node.js ก่อน (ซึ่งรวมถึง npm) npm ย่อมาจากnode packaged moduleและเป็นวิธีจัดการการพึ่งพาการพัฒนาผ่าน node.js
จากนั้นจากบรรทัดคำสั่ง:grunt-cli
ทั่วโลกด้วยnpm install -g grunt-cli
./bootstrap/
ไดเร็กทอรี root จากนั้นรันnpm install
. npm จะดูpackage.json
ไฟล์และติดตั้งการพึ่งพาในพื้นที่ที่จำเป็นโดยอัตโนมัติซึ่งแสดงอยู่ที่นั่นเมื่อเสร็จแล้ว คุณจะสามารถเรียกใช้คำสั่ง Grunt ต่างๆ ได้จากบรรทัดคำสั่ง
grunt dist
(เพียงคอมไพล์ CSS และ JavaScript)สร้าง/dist/
ไดเร็กทอรีใหม่ด้วยไฟล์ CSS และ JavaScript ที่คอมไพล์แล้วและย่อเล็กสุด ในฐานะผู้ใช้ Bootstrap นี่เป็นคำสั่งที่คุณต้องการโดยปกติ
grunt watch
(นาฬิกา)ดูไฟล์ต้นฉบับ Less และคอมไพล์ใหม่โดยอัตโนมัติไปยัง CSS ทุกครั้งที่คุณบันทึกการเปลี่ยนแปลง
grunt test
(ทำการทดสอบ)รันJSHintและรันการ ทดสอบ QUnitในเบราว์เซอร์จริงด้วยKarma
grunt docs
(สร้างและทดสอบเนื้อหาเอกสาร)สร้างและทดสอบ CSS, JavaScript และเนื้อหาอื่นๆ ที่ใช้เมื่อเรียกใช้เอกสารในเครื่องผ่านbundle exec jekyll serve
.
grunt
(สร้างทุกอย่างและทำการทดสอบ)รวบรวมและลดขนาด CSS และ JavaScript สร้างเว็บไซต์เอกสาร เรียกใช้เครื่องมือตรวจสอบ HTML5 กับเอกสาร สร้างเนื้อหา Customizer ใหม่ และอื่นๆ ต้องใช้เจคิล โดยปกติจำเป็นเฉพาะเมื่อคุณแฮ็คบน Bootstrap เท่านั้น
หากคุณประสบปัญหาในการติดตั้งการพึ่งพาหรือการรันคำสั่ง Grunt ก่อนอื่นให้ลบ/node_modules/
ไดเร็กทอรีที่สร้างโดย npm แล้วรันnpm install
ใหม่
เริ่มต้นด้วยเทมเพลต HTML พื้นฐานนี้ หรือแก้ไขตัวอย่างเหล่านี้ เราหวังว่าคุณจะปรับแต่งเทมเพลตและตัวอย่างของเรา โดยปรับให้เหมาะกับความต้องการของคุณ
คัดลอก HTML ด้านล่างเพื่อเริ่มทำงานกับเอกสาร Bootstrap ขั้นต่ำ
สร้างจากเทมเพลตพื้นฐานด้านบนด้วยองค์ประกอบมากมายของ Bootstrap เราขอแนะนำให้คุณปรับแต่งและปรับ Bootstrap เพื่อให้เหมาะกับความต้องการของแต่ละโครงการ
รับซอร์สโค้ดสำหรับทุกตัวอย่างด้านล่างโดย ดาวน์โหลด ที่เก็บ Bootstrap ตัวอย่างสามารถพบได้ในdocs/examples/
ไดเร็กทอรี
สร้างแถบนำทางที่กำหนดเองพร้อมลิงก์ที่เหมาะสม หัวขึ้น! ไม่เป็นมิตรกับซาฟารีมากเกินไป
Bootlint คือ เครื่องมือBootstrap HTML linter อย่างเป็นทางการ จะตรวจสอบข้อผิดพลาด HTML ทั่วไปหลายรายการในหน้าเว็บที่ใช้ Bootstrap ในลักษณะ "วานิลลา" อย่างเป็นธรรมโดยอัตโนมัติ ส่วนประกอบ/วิดเจ็ตของ Vanilla Bootstrap ต้องการส่วนต่างๆ ของ DOM เพื่อให้สอดคล้องกับโครงสร้างบางอย่าง Bootlint ตรวจสอบว่าอินสแตนซ์ของส่วนประกอบ Bootstrap มีโครงสร้าง HTML อย่างถูกต้อง พิจารณาเพิ่ม Bootlint ให้กับชุดเครื่องมือการพัฒนาเว็บ Bootstrap เพื่อไม่ให้เกิดข้อผิดพลาดทั่วไปที่ทำให้การพัฒนาโครงการของคุณช้าลง
ติดตามข่าวสารล่าสุดเกี่ยวกับการพัฒนา Bootstrap และเข้าถึงชุมชนด้วยแหล่งข้อมูลที่เป็นประโยชน์เหล่านี้
irc.freenode.net
เซิร์ฟเวอร์ใน## bootstrap channeltwitter-bootstrap-3
กbootstrap
บนแพ็คเกจที่แก้ไขหรือเพิ่มฟังก์ชันการทำงานของ Bootstrap เมื่อแจกจ่ายผ่านnpmหรือกลไกการส่งที่คล้ายคลึงกันเพื่อให้ค้นพบได้มากที่สุดคุณยังสามารถติดตาม@getbootstrap บน Twitterสำหรับข่าวซุบซิบล่าสุดและมิวสิควิดีโอที่ยอดเยี่ยม
Bootstrap ปรับหน้าของคุณโดยอัตโนมัติสำหรับขนาดหน้าจอต่างๆ ต่อไปนี้เป็นวิธีปิดใช้งานคุณลักษณะนี้ เพื่อให้หน้าเว็บของคุณทำงานเหมือน ตัวอย่าง ที่ไม่ตอบสนอง
<meta>
กล่าวถึงในเอกสาร CSSwidth
on the .container
สำหรับแต่ละระดับกริดด้วยความกว้างเดียว ตัวอย่างเช่นwidth: 970px !important;
ตรวจสอบให้แน่ใจว่าสิ่งนี้อยู่หลัง Bootstrap CSS เริ่มต้น คุณสามารถเลือกที่จะหลีกเลี่ยง!important
ด้วยข้อความค้นหาสื่อหรือตัวเลือกบางส่วนได้.col-xs-*
คลาสเพิ่มเติมหรือแทนที่คลาสขนาดกลาง/ใหญ่ ไม่ต้องกังวล ตารางอุปกรณ์ขนาดเล็กพิเศษจะปรับขนาดตามความละเอียดทั้งหมดคุณยังคงต้องการ Respond.js สำหรับ IE8 (เนื่องจากการสืบค้นสื่อของเรายังคงอยู่และจำเป็นต้องดำเนินการ) สิ่งนี้ปิดใช้งานลักษณะ "ไซต์มือถือ" ของ Bootstrap
เราได้นำขั้นตอนเหล่านี้ไปใช้กับตัวอย่าง อ่านซอร์สโค้ดเพื่อดูการเปลี่ยนแปลงเฉพาะที่นำไปใช้
ต้องการโยกย้ายจาก Bootstrap เวอร์ชันเก่าไปเป็น v3.x หรือไม่? ดูคู่มือการโยกย้ายของเรา
Bootstrap สร้างขึ้นเพื่อให้ทำงานได้ดีที่สุดในเบราว์เซอร์เดสก์ท็อปและมือถือรุ่นล่าสุด หมายความว่าเบราว์เซอร์รุ่นเก่าอาจแสดงการเรนเดอร์องค์ประกอบบางอย่างในสไตล์ที่ต่างออกไป แม้ว่าจะทำงานได้อย่างสมบูรณ์
โดยเฉพาะอย่างยิ่ง เราสนับสนุนเบราว์เซอร์และแพลตฟอร์มต่อไปนี้ในเวอร์ชันล่าสุด
ไม่รองรับเบราว์เซอร์ทางเลือกที่ใช้ WebKit, Blink หรือ Gecko เวอร์ชันล่าสุด ไม่ว่าจะโดยตรงหรือผ่าน API การดูเว็บของแพลตฟอร์ม อย่างไรก็ตาม Bootstrap ควร (ในกรณีส่วนใหญ่) แสดงและทำงานอย่างถูกต้องในเบราว์เซอร์เหล่านี้เช่นกัน ข้อมูลสนับสนุนที่เฉพาะเจาะจงเพิ่มเติมมีให้ด้านล่าง
โดยทั่วไป Bootstrap รองรับเวอร์ชันล่าสุดของเบราว์เซอร์เริ่มต้นของแต่ละแพลตฟอร์มหลัก โปรดทราบว่าไม่รองรับพร็อกซีเบราว์เซอร์ (เช่น Opera Mini, โหมด Turbo ของ Opera Mobile, UC Browser Mini, Amazon Silk)
โครเมียม | Firefox | ซาฟารี | |
---|---|---|---|
Android | ได้รับการสนับสนุน | ได้รับการสนับสนุน | ไม่มี |
iOS | ได้รับการสนับสนุน | ได้รับการสนับสนุน | ได้รับการสนับสนุน |
ในทำนองเดียวกัน เวอร์ชันล่าสุดของเบราว์เซอร์เดสก์ท็อปส่วนใหญ่ได้รับการสนับสนุน
โครเมียม | Firefox | Internet Explorer | โอเปร่า | ซาฟารี | |
---|---|---|---|---|---|
Mac | ได้รับการสนับสนุน | ได้รับการสนับสนุน | ไม่มี | ได้รับการสนับสนุน | ได้รับการสนับสนุน |
Windows | ได้รับการสนับสนุน | ได้รับการสนับสนุน | ได้รับการสนับสนุน | ได้รับการสนับสนุน | ไม่รองรับ |
บน Windows เรารองรับ Internet Explorer 8-11
สำหรับ Firefox นอกเหนือจากรุ่นปกติล่าสุดที่เสถียรแล้ว เรายังสนับสนุนFirefox เวอร์ชันExtended Support Release (ESR) ล่าสุดอีกด้วย
อย่างไม่เป็นทางการ Bootstrap ควรมีลักษณะและทำงานได้ดีพอใน Chromium และ Chrome สำหรับ Linux, Firefox สำหรับ Linux และ Internet Explorer 7 รวมถึง Microsoft Edge แม้ว่าจะไม่รองรับอย่างเป็นทางการก็ตาม
สำหรับรายการบั๊กของเบราว์เซอร์ที่ Bootstrap ต้องต่อสู้ โปรดดูที่บั๊ก Wall of browser ของเรา
Internet Explorer 8 และ 9 ยังได้รับการสนับสนุน อย่างไรก็ตาม โปรดทราบว่าคุณสมบัติ CSS3 และองค์ประกอบ HTML5 บางอย่างไม่ได้รับการสนับสนุนอย่างเต็มที่จากเบราว์เซอร์เหล่านี้ นอกจากนี้Internet Explorer 8 ยังต้องการการใช้Respond.jsเพื่อเปิดใช้งานการสนับสนุนการสืบค้นสื่อ
ลักษณะเฉพาะ | Internet Explorer 8 | Internet Explorer 9 |
---|---|---|
border-radius |
ไม่รองรับ | ได้รับการสนับสนุน |
box-shadow |
ไม่รองรับ | ได้รับการสนับสนุน |
transform |
ไม่รองรับ | รองรับพร้อม-ms คำนำหน้า |
transition |
ไม่รองรับ | |
placeholder |
ไม่รองรับ |
ไปที่ ฉันสามารถใช้...เพื่อดูรายละเอียดเกี่ยวกับการสนับสนุนเบราว์เซอร์ของคุณสมบัติ CSS3 และ HTML5
ระวังคำเตือนต่อไปนี้เมื่อใช้ Respond.js ในสภาพแวดล้อมการพัฒนาและการใช้งานจริงสำหรับ Internet Explorer 8
การใช้ Respond.js กับ CSS ที่โฮสต์บนโดเมน (ย่อย) อื่น (เช่น บน CDN) จำเป็นต้องมีการตั้งค่าเพิ่มเติม ดูเอกสาร Respond.jsสำหรับรายละเอียด
file://
เนื่องจากกฎความปลอดภัยของเบราว์เซอร์ Respond.js จึงไม่ทำงานกับหน้าที่ดูผ่านfile://
โปรโตคอล (เช่น เมื่อเปิดไฟล์ HTML ในเครื่อง) หากต้องการทดสอบคุณลักษณะที่ตอบสนองใน IE8 ให้ดูหน้าเว็บของคุณผ่าน HTTP(S) ดูเอกสาร Respond.jsสำหรับรายละเอียด
@import
Respond.js ไม่ทำงานกับ CSS ที่อ้างอิงผ่าน@import
. โดยเฉพาะอย่างยิ่ง การกำหนดค่าบางอย่างของ Drupal นั้นใช้@import
. ดูเอกสาร Respond.jsสำหรับรายละเอียด
IE8 ไม่รองรับอย่างเต็มที่box-sizing: border-box;
เมื่อรวมกับmin-width
, max-width
, min-height
, หรือmax-height
. ด้วยเหตุผลดังกล่าว ณ เวอร์ชัน 3.0.1 เราจึงไม่ได้ใช้max-width
บน.container
s อีกต่อไป
IE8 มีปัญหาบางอย่าง@font-face
เมื่อรวมกับ:before
. Bootstrap ใช้ชุดค่าผสมนั้นกับ Glyphicons หากหน้าถูกแคชและโหลดโดยไม่วางเมาส์เหนือหน้าต่าง (เช่น กดปุ่มรีเฟรชหรือโหลดบางอย่างใน iframe) หน้านั้นจะแสดงผลก่อนที่ฟอนต์จะโหลด การวางเมาส์เหนือหน้า (เนื้อหา) จ��แสดงไอคอนบางส่วน และการวางเมาส์เหนือไอคอนที่เหลือจะแสดงไอคอนเหล่านั้นด้วย ดูปัญหา #13863สำหรับรายละเอียด
Bootstrap ไม่ได้รับการสนับสนุนในโหมดความเข้ากันได้ของ Internet Explorer รุ่นเก่า เพื่อให้แน่ใจว่าคุณกำลังใช้โหมดการแสดงผลล่าสุดสำหรับ IE ให้พิจารณารวม<meta>
แท็กที่เหมาะสมในหน้าเว็บของคุณ:
ยืนยันโหมดเอกสารโดยเปิดเครื่องมือแก้ไขข้อบกพร่อง: กดF12และเลือก "โหมดเอกสาร"
แท็กนี้รวมอยู่ในเอกสารและตัวอย่างทั้งหมดของ Bootstrap เพื่อให้แน่ใจว่าการแสดงผลที่ดีที่สุดที่เป็นไปได้ใน Internet Explorer แต่ละเวอร์ชันที่รองรับ
ดูคำถาม StackOverflow นี้สำหรับข้อมูลเพิ่มเติม
Internet Explorer 10 ไม่ได้แยกความกว้างของอุปกรณ์จาก ความ กว้างของวิวพอร์ตดังนั้นจึงไม่สามารถใช้การสืบค้นสื่อใน CSS ของ Bootstrap ได้อย่างถูกต้อง โดยปกติ คุณเพียงแค่เพิ่มข้อมูลโค้ดสั้นๆ ของ CSS เพื่อแก้ไขปัญหานี้:
อย่างไรก็ตาม วิธีนี้ใช้ไม่ได้กับอุปกรณ์ที่ใช้ Windows Phone 8 เวอร์ชันที่เก่ากว่าUpdate 3 (aka GDR3)เนื่องจากจะทำให้อุปกรณ์ดังกล่าวแสดงมุมมองเดสก์ท็อปเป็นส่วนใหญ่ แทนที่จะเป็นมุมมอง "โทรศัพท์" ที่แคบ ในการแก้ไขปัญหานี้ คุณจะต้องรวม CSS และ JavaScript ต่อไปนี้เพื่อแก้ไขจุดบกพร่อง
สำหรับข้อมูลเพิ่มเติมและแนวทางการใช้งาน โปรดอ่านWindows Phone 8 และ Device-Width
เรารวมสิ่งนี้ไว้ในเอกสารและตัวอย่างทั้งหมดของ Bootstrap เพื่อเป็นการสาธิต
เอ็นจิ้นการเรนเดอร์ของ Safari เวอร์ชันก่อน v7.1 สำหรับ OS X และ Safari สำหรับ iOS v8.0 มีปัญหากับจำนวนตำแหน่งทศนิยมที่ใช้ใน.col-*-1
คลาสกริด ของเรา ดังนั้นหากคุณมีคอลัมน์กริดเดี่ยว 12 คอลัมน์ คุณจะสังเกตเห็นว่ามันสั้นเมื่อเทียบกับแถวของคอลัมน์อื่นๆ นอกจากการอัปเกรด Safari/iOS แล้ว คุณยังมีทางเลือกในการแก้ปัญหา:
.pull-right
ในคอลัมน์กริดสุดท้ายของคุณเพื่อรับการจัดตำแหน่งแบบฮาร์ด-ขวาoverflow: hidden
การสนับสนุน<body>
องค์ประกอบค่อนข้างจำกัดใน iOS และ Android ด้วยเหตุนี้ เมื่อคุณเลื่อนผ่านด้านบนหรือด้านล่างของโมดอลในเบราว์เซอร์ของอุปกรณ์เหล่านั้น<body>
เนื้อหาจะเริ่มเลื่อน ดูข้อบกพร่องของ Chrome #175502 (แก้ไขใน Chrome v40) และ ข้อบกพร่อง ของWebKit #153852
สำหรับ iOS 9.3 ในขณะที่โมดอลเปิดอยู่ หากการสัมผัสครั้งแรกของท่าทางการเลื่อนอยู่ภายในขอบเขตของข้อความ<input>
หรือ a เนื้อหา <textarea>
ที่<body>
อยู่ใต้โมดัลนั้นจะถูกเลื่อนแทนที่จะเป็นโมดอลเอง ดู ข้อบกพร่อง ของWebKit #153856
นอกจากนี้ โปรดทราบว่าหากคุณใช้แถบนำทางแบบตายตัวหรือใช้อินพุตภายในโมดอล iOS มีข้อบกพร่องในการเรนเดอร์ที่ไม่อัปเดตตำแหน่งขององค์ประกอบคงที่เมื่อมีการเรียกใช้แป้นพิมพ์เสมือน วิธีแก้ปัญหาบางประการสำหรับสิ่งนี้ ได้แก่ การเปลี่ยนองค์ประกอบของคุณเป็นposition: absolute
หรือเรียกใช้ตัวจับเวลาที่โฟกัสเพื่อพยายามแก้ไขตำแหน่งด้วยตนเอง Bootstrap ไม่ได้จัดการสิ่งนี้ ดังนั้นจึงขึ้นอยู่กับคุณที่จะตัดสินใจว่าโซลูชันใดดีที่สุดสำหรับแอปพลิเคชันของคุณ
องค์ประกอบ.dropdown-backdrop
นี้ไม่ได้ใช้บน iOS ในการนำทางเนื่องจากความซับซ้อนของการทำดัชนี z ดังนั้น ในการปิดดรอปดาวน์ในแถบนำทาง คุณต้องคลิกองค์ประกอบแบบเลื่อนลงโดยตรง (หรือองค์ประกอบอื่นใดที่จะทำให้เกิดเหตุการณ์การคลิกใน iOS )
การซูมหน้าอย่างหลีกเลี่ยงไม่ได้นำเสนอสิ่งประดิษฐ์ในองค์ประกอบบางอย่าง ทั้งใน Bootstrap และส่วนที่เหลือของเว็บ เราอาจแก้ไขได้ (ค้นหาก่อนแล้วจึงเปิดปัญหาหากจำเป็น) ทั้งนี้ขึ้นอยู่กับปัญหา อย่างไรก็ตาม เรามักจะเพิกเฉยต่อสิ่งเหล่านี้ เนื่องจากมักไม่มีวิธีแก้ไขโดยตรงนอกจากวิธีแก้ปัญหาชั่วคราวที่เป็นการแฮ็ก
:hover
/ :focus
บนมือถือแม้ว่าการโฮเวอร์จริงจะไม่สามารถทำได้บนหน้าจอสัมผัสส่วนใหญ่ แต่เบราว์เซอร์มือถือส่วนใหญ่จะเลียนแบบการสนับสนุนการโฮเวอร์และทำให้:hover
"เหนียว" กล่าวอีกนัยหนึ่ง:hover
สไตล์เริ่มใช้หลังจากแตะองค์ประกอบและหยุดใช้หลังจากผู้ใช้แตะองค์ประกอบอื่นเท่านั้น ซึ่งอาจทำให้:hover
สถานะของ Bootstrap กลายเป็น "ติด" อย่างไม่พึงปรารถนาบนเบราว์เซอร์ดังกล่าว เบราว์เซอร์มือถือบางตัวยังทำให้:focus
ติดหนึบเช่นเดียวกัน ขณะนี้ยังไม่มีวิธีแก้ปัญหาง่ายๆ สำหรับปัญหาเหล่านี้นอกจากการนำสไตล์ดังกล่าวออกทั้งหมด
แม้แต่ในเบราว์เซอร์สมัยใหม่บางตัว การพิมพ์ก็อาจดูแปลกไป
โดยเฉพาะอย่างยิ่ง ใน Chrome v32 และโดยไม่คำนึงถึงการตั้งค่าระยะขอบ Chrome จะใช้ความกว้างของวิวพอร์ตที่แคบกว่าขนาดกระดาษจริงอย่างมากเมื่อแก้ไขปัญหาการสืบค้นสื่อขณะพิมพ์หน้าเว็บ ซึ่งอาจส่งผลให้กริดขนาดเล็กพิเศษของ Bootstrap ถูกเปิดใช้งานโดยไม่คาดคิดเมื่อทำการพิมพ์ ดูปัญหา #12078และข้อบกพร่องของ Chrome #273306สำหรับรายละเอียดบางอย่าง วิธีแก้ปัญหาที่แนะนำ:
@screen-*
ตัวแปร Less เพื่อให้กระดาษเครื่องพิมพ์ของคุณถือว่ามีขนาดใหญ่กว่าขนาดเล็กพิเศษนอกจากนี้ ใน Safari v8.0 ความกว้างคงที่.container
อาจทำให้ Safari ใช้ขนาดแบบอักษรที่เล็กผิดปกติเมื่อพิมพ์ ดู#14868และ จุด บกพร่องของ WebKit #138192สำหรับรายละเอียดเพิ่มเติม วิธีแก้ปัญหาที่เป็นไปได้ประการหนึ่งสำหรับสิ่งนี้คือการเพิ่ม CSS ต่อไปนี้:
นอกกรอบ Android 4.1 (และแม้แต่รุ่นใหม่ที่เห็นได้ชัด) จะมาพร้อมกับแอปเบราว์เซอร์เป็นเว็บเบราว์เซอร์เริ่มต้นที่เลือกไว้ (ซึ่งต่างจาก Chrome) น่าเสียดายที่แอปเบราว์เซอร์มีข้อบกพร่องมากมายและไม่สอดคล้องกับ CSS โดยทั่วไป
ใน<select>
องค์ประกอบต่างๆ เบราว์เซอร์หุ้น Android จะไม่แสดงการควบคุมด้านข้างหากมีborder-radius
และ/หรือborder
นำไปใช้ (ดู รายละเอียด คำถาม StackOverflow นี้ ) ใช้ข้อมูลโค้ดด้านล่างเพื่อลบ CSS ที่ละเมิดและแสดงผล<select>
เป็นองค์ประกอบที่ไม่มีสไตล์บนเบราว์เซอร์สต็อก Android การดมกลิ่นตัวแทนผู้ใช้ช่วยหลีกเลี่ยงการรบกวนเบราว์เซอร์ Chrome, Safari และ Mozilla
ต้องการดูตัวอย่าง? ลองดูตัวอย่าง JS Bin นี้
เพื่อมอบประสบการณ์การใช้งานที่ดีที่สุดให้กับเบราว์เซอร์รุ่นเก่าและบั๊กกี้ Bootstrap ใช้การแฮ็กของเบราว์เซอร์ CSSในหลาย ๆ ที่เพื่อกำหนดเป้าหมาย CSS พิเศษไปยังเบราว์เซอร์บางรุ่นเพื่อแก้ไขข้อบกพร่องในเบราว์เซอร์เอง การแฮ็กเหล่านี้ทำให้ผู้ตรวจสอบ CSS บ่นว่าไม่ถูกต้อง ในสองสามแห่ง เรายังใช้คุณสมบัติ CSS ที่ล้ำหน้าซึ่งยังไม่ได้มาตรฐานอย่างสมบูรณ์ แต่สิ่งเหล่านี้ใช้เพื่อการปรับปรุงแบบก้าวหน้าเท่านั้น
คำเตือนเกี่ยวกับการตรวจสอบความถูกต้องเหล่านี้ไม่สำคัญในทางปฏิบัติ เนื่องจากส่วนที่ไม่แฮ็กของ CSS ของเราตรวจสอบได้อย่างสมบูรณ์ และส่วนที่ถูกแฮ็กไม่รบกวนการทำงานที่เหมาะสมของส่วนที่ไม่ถูกแฮ็ก เหตุใดเราจึงเพิกเฉยต่อคำเตือนเหล่านี้โดยเจตนา
เอกสาร HTML ของเราก็มีคำเตือนเกี่ยวกับการตรวจสอบ HTML ที่ไม่สำคัญและไม่เป็นผลสืบเนื่องเนื่องจากการรวมวิธีแก้ไขปัญหาชั่วคราวสำหรับ จุดบกพร่อง ของFirefox
แม้ว่าเราจะไม่สนับสนุนปลั๊กอินหรือส่วนเสริมของบุคคลที่สามอย่างเป็นทางการ แต่เราเสนอคำแนะนำที่เป็นประโยชน์เพื่อช่วยหลีกเลี่ยงปัญหาที่อาจเกิดขึ้นในโครงการของคุณ
ซอฟต์แวร์ของบริษัทอื่นบางตัว รวมถึง Google Maps และ Google Custom Search Engine ขัดแย้งกับ Bootstrap เนื่องจาก* { box-sizing: border-box; }
กฎที่ทำให้padding
ไม่กระทบต่อความกว้างที่คำนวณได้สุดท้ายขององค์ประกอบ เรียนรู้เพิ่มเติมเกี่ยวกับรูปแบบกล่องและขนาดที่ CSS Tricks
ขึ้นอยู่กับบริบท คุณอาจแทนที่ตามความจำเป็น (ตัวเลือก 1) หรือรีเซ็ตขนาดกล่องสำหรับภูมิภาคทั้งหมด (ตัวเลือก 2)
Bootstrap ปฏิบัติตามมาตรฐานเว็บทั่วไปและ—ด้วยความพยายามเพียงเล็กน้อย—สามารถใช้เพื่อสร้างไซต์ที่สามารถเข้าถึงได้โดยผู้ที่ใช้AT
หากการนำทางของคุณมีลิงก์จำนวนมากและมาก่อนเนื้อหาหลักใน DOM ให้เพิ่มSkip to main content
ลิงก์ก่อนการนำทาง (สำหรับคำอธิบายง่ายๆ โปรดดูบทความโครงการ A11Y เกี่ยวกับลิงก์การนำทางข้าม ) การใช้.sr-only
ชั้นเรียนจะซ่อนลิงก์ข้ามด้วยสายตา และ.sr-only-focusable
ชั้นเรียนจะตรวจสอบให้แน่ใจว่าลิงก์นั้นมองเห็นได้เมื่อโฟกัสแล้ว (สำหรับผู้ใช้แป้นพิมพ์ที่มองเห็น)
เนื่องจากข้อบกพร่อง/ข้อบกพร่องที่มีมายาวนานใน Chrome (ดูปัญหา 262171 ในตัวติดตามจุดบกพร่องของ Chromium ) และ Internet Explorer (ดูบทความนี้เกี่ยวกับลิงก์ในหน้าเว็บและลำดับโฟกัส ) คุณจะต้องตรวจสอบให้แน่ใจว่าเป้าหมายของลิงก์ที่ข้าม อย่างน้อยก็สามารถโฟกัสด้วยโปรแกรมได้โดยการเพิ่มtabindex="-1"
.
นอกจากนี้ คุณอาจต้องการระงับการบ่งชี้โฟกัสที่มองเห็นได้อย่างชัดเจนบนเป้าหมาย (โดยเฉพาะอย่างยิ่งในขณะที่ Chrome ตั้งค่าโฟกัสที่องค์ประกอบด้วยtabindex="-1"
เมื่อคลิกเมาส์ด้วย) ด้วย#content:focus { outline: none; }
.
โปรดทราบว่าจุดบกพร่องนี้จะส่งผลต่อลิงก์ในหน้าอื่น ๆ ที่เว็บไซต์ของคุณอาจกำลังใช้อยู่ ทำให้ผู้ใช้แป้นพิมพ์ไม่มีประโยชน์ คุณอาจลองเพิ่มการแก้ไข stop-gap ที่คล้ายกันในจุดยึด/ตัวระบุส่วนย่อยที่มีชื่ออื่นๆ ทั้งหมดที่ทำหน้าที่เป็นเป้าหมายของลิงก์
เมื่อซ้อนส่วนหัว ( <h1>
- <h6>
) ส่วนหัวเอกสารหลักของคุณควรเป็น<h1>
. ส่วนหัวที่ตามมาควรใช้อย่างมีเหตุมีผล<h2>
- <h6>
เพื่อให้โปรแกรมอ่านหน้าจอสามารถสร้างสารบัญสำหรับหน้าเว็บของคุณได้
เรียนรู้เพิ่มเติมที่HTML CodeSnifferและ AccessAbility ของPenn State
ในปัจจุบัน การผสมสีเริ่มต้นบางส่วนที่มีใน Bootstrap (เช่น คลาส ปุ่มที่มีสไตล์ ต่างๆ สีที่เน้นโค้ดบางส่วนที่ใช้สำหรับบล็อกโค้ดพื้นฐาน คลาสตัวช่วย พื้น.bg-primary
หลังตามบริบทและสีลิงก์เริ่มต้นเมื่อใช้บนพื้นหลังสีขาว) มีอัตราส่วนคอนทราสต์ต่ำ (ต่ำกว่าอัตราส่วนที่แนะนำ 4.5:1 ) ซึ่งอาจทำให้เกิดปัญหากับผู้ใช้ที่มีความบกพร่องทางสายตาหรือผู้ที่ตาบอดสี อาจจำเป็นต้องแก้ไขสีเริ่มต้นเหล่านี้เพื่อเพิ่มคอนทราสต์และความชัดเจน
Bootstrap เปิดตัวภายใต้ลิขสิทธิ์ MIT และเป็นลิขสิทธิ์ 2019 Twitter ต้มให้เป็นชิ้นเล็ก ๆ สามารถอธิบายได้โดยมีเงื่อนไขดังต่อไปนี้
ใบอนุญาต Bootstrap แบบเต็มจะอยู่ในที่เก็บโปรเจ็กต์สำหรับข้อมูลเพิ่มเติม
สมาชิกชุมชนได้แปลเอกสารของ Bootstrap เป็นภาษาต่างๆ ไม่มีการสนับสนุนอย่างเป็นทางการและอาจไม่ทันสมัยเสมอไป
เราไม่ได้ช่วยจัดระเบียบหรือโฮสต์การแปล เราแค่เชื่อมโยงไปยังการแปล
เสร็จสิ้นการแปลใหม่หรือดีกว่า? เปิดคำขอดึงเพื่อเพิ่มลงในรายการของเรา