คำถามติดแท็ก twitter-bootstrap-3

Bootstrap 3 เป็นเฟรมเวิร์กส่วนหน้ารุ่นที่สามที่ช่วยให้การพัฒนาเว็บเร็วขึ้นด้วยรูปลักษณ์ที่น่าดึงดูด ใช้กับแท็ก [twitter-bootstrap]

14
Bootstrap พ่นข้อผิดพลาดที่ไม่ได้ตรวจ: JavaScript ของ Bootstrap ต้องการ jQuery [ปิด]
ปิด. คำถามนี้ต้องการรายละเอียดการแก้จุดบกพร่อง ไม่ยอมรับคำตอบในขณะนี้ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เป็นไปตามหัวข้อสำหรับ Stack Overflow ปิดให้บริการใน2 ปีที่ผ่านมา ปรับปรุงคำถามนี้ ฉันพยายามใช้ Bootstrap เพื่อสร้างอินเตอร์เฟสสำหรับโปรแกรม ฉันเพิ่ม jQuery 1.11.0 ไปยัง<head>แท็กและคิดว่าเป็นเช่นนั้น แต่เมื่อฉันเปิดหน้าเว็บในเบราว์เซอร์ jQuery รายงานข้อผิดพลาด: Uncaught Error: Bootstrap's JavaScript requires jQuery ฉันได้ลองใช้ jQuery 1.9.0 ฉันได้ลองกับสำเนาที่โฮสต์ใน CDN หลายแห่ง แต่ฉันไม่สามารถใช้งานได้ ใครช่วยชี้สิ่งที่ฉันทำผิดได้ไหม
11
Bootstrap คอลัมน์ด้านขวาบนมุมมองมือถือ
ฉันมีหน้า Bootstrap เช่นนี้: <div class="row"> <div class="col-md-6"> A </div> <div class="col-md-6"> B </div> </div> ดูเหมือนกับ: ----- |A|B| ----- ดังนั้นถ้าฉันดูบนอุปกรณ์มือถือคอลัมน์ A จะอยู่ด้านบน แต่ฉันต้องการให้ B อยู่ด้านบน เป็นไปได้ไหม ฉันลองด้วยการดึง แต่ก็ไม่ได้ผล
10
จุดพัก Bootstrap 3 และคิวรีสื่อ
ในเอกสารการสืบค้นสื่อ Bootstrap 3มันบอกว่า: เราใช้เคียวรีสื่อบันทึกต่อไปนี้ในไฟล์ Less เพื่อสร้างเบรกพอยต์สำคัญในระบบกริดของเรา อุปกรณ์ขนาดเล็กพิเศษ (โทรศัพท์น้อยกว่า 768px): ไม่มีการสืบค้นสื่อเนื่องจากนี่เป็นค่าเริ่มต้นใน Bootstrap อุปกรณ์ขนาดเล็ก (แท็บเล็ต 768px ขึ้นไป): @media (min-width: @screen-sm-min) { ... } อุปกรณ์ขนาดกลาง (เดสก์ท็อป 992px ขึ้นไป): @media (min-width: @screen-md-min) { ... } อุปกรณ์ขนาดใหญ่ (เดสก์ท็อปขนาดใหญ่ 1200px ขึ้นไป): @media (min-width: @screen-lg-min) { ... } เราควรที่จะสามารถใช้@screen-sm, @screen-mdและ@screen-lgชื่อที่อยู่ในคำสั่งสื่อของเราเช่นกัน? เพราะมันไม่ได้ผลสำหรับฉัน ฉันต้องใช้การวัดพิกเซลเช่น@media (min-width: 768px) {...}ก่อนที่มันจะทำงาน ฉันกำลังทำอะไรผิดหรือเปล่า? นอกจากนี้อ้างอิงถึง …
18
วิธีใช้ Bootstrap ในโครงการแองกูลาร์
ฉันเริ่มแอปพลิเคชันAngularแรกของฉันและการตั้งค่าพื้นฐานของฉันเสร็จสิ้น ฉันจะเพิ่มBootstrapในแอปพลิเคชันของฉันได้อย่างไร หากคุณสามารถยกตัวอย่างแล้วมันจะเป็นความช่วยเหลือที่ดี
7
จะทำให้หีบเพลง Bootstrap ยุบเมื่อคลิกที่ div header ได้อย่างไร?
ในหีบเพลง Bootstrap แทนที่จะต้องการคลิกที่aข้อความฉันต้องการทำให้มันยุบเมื่อคลิกที่ใดก็ได้ในpanel-headingdiv ฉันใช้ Bootstrap 3 ดังนั้นแทนที่จะเป็นหีบเพลงมันเป็นเพียงแผงพับได้ ความคิดวิธีการทำแผงทั้งหมดคลิกได้?
5
การเพิ่มเครื่องหมายดอกจันในฟิลด์บังคับใน Bootstrap 3
HTML ของฉันมีคลาสที่เรียกว่า .requiredว่ากำหนดให้กับฟิลด์ที่ต้องระบุ นี่คือ HTML: <form action="/accounts/register/" method="post" role="form" class="form-horizontal"> <input type='hidden' name='csrfmiddlewaretoken' value='brGfMU16YyyG2QEcpLqhb3Zh8AvkYkJt' /> <div class="form-group required"> <label class="col-md-2 control-label">Username</label> <div class="col-md-4"> <input class="form-control" id="id_username" maxlength="30" name="username" placeholder="Username" required="required" title="" type="text" /> </div> </div> <div class="form-group required"><label class="col-md-2 control-label">E-mail</label><div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div></div> <div …
5
การจัดการคำสั่งซื้อคอลัมน์โดยใช้ col-lg-push และ col-lg-pull ใน Twitter Bootstrap 3
ตอนนี้ฉันกำลังอ่านเอกสารบน Twitter Bootstrap 3 และพยายามติดตามการสั่งซื้อคอลัมน์ตามที่แสดงใน หน้านี้ แต่กดกำแพง ฉันไม่เข้าใจว่าเพราะเหตุใดรหัสดังกล่าวจึงทำงานไม่ได้และวิธีระบุการตั้งค่าอย่างถูกต้อง สิ่งที่ฉันต้องการแสดงคือหนึ่งตารางซึ่งประกอบด้วยความยาว 5 และอีก 5 ความยาวและสุดท้ายหนึ่งความยาว 2 ตาราง ดังนั้นของฉันเป็นแบบนี้: [5] [5] [2] และสิ่งที่ฉันต้องการบรรลุคือเมื่อมันดูบนเดสก์ท็อปเค้าโครงด้านบนจะปรากฏขึ้น แต่เมื่อมันดูบนมือถือฉันต้องการแสดงวัตถุที่มีความยาว 5 อันดับที่สองก่อนจากนั้นจึงเป็นวัตถุที่มีความยาว 5 อันดับแรก ในแนวตั้ง แบบนี้: [5] (second) [5] (first) [2] ในขณะที่ฉันพยายามทำตามขั้นตอนที่อธิบายไว้ในเอกสารด้านบนฉันได้วัตถุยาว 5 ตัวแรกจากวัตถุที่สองแม้ว่าจะอยู่บนแพลตฟอร์มมือถือซึ่งดังที่ฉันบอกว่าควรแสดงวัตถุ 5 ความยาวที่สองที่ด้านบน ในคำอื่น ๆ ฉันได้รับนี้: [5] (first) [5] (second) [2] แล้วฉันจะวางอันที่สองให้ถูกต้องก่อนได้อย่างไร? หรือเนื่องจากฉันใช้วัตถุที่มีความยาวเท่ากันคอลัมน์ที่สั่งซื้ออาจไม่ทำงานหรือไม่ นี่คือรหัสของฉันสำหรับข้อมูลของคุณ: <div class='row'> …
4
แท็บแบบซ้อนใน Bootstrap 3
ฉันกำลังพยายามใช้แท็บที่เรียงซ้อนชิดซ้ายโดยใช้ปลั๊กอิน jquery Tab ใน Bootstrap 3 ซึ่งแท็บจะแสดงผลในแนวตั้งทางด้านซ้ายของเนื้อหาแท็บแทนที่จะอยู่ด้านบน เมื่อฉันลองทำสิ่งต่อไปนี้; <ul class="nav nav-tabs nav-stacked"> <li><a href="#tab1" data-toggle="tab">Tab 1</a></li> <li><a href="#tab2" data-toggle="tab">Tab 2</a></li> <li><a href="#tab3" data-toggle="tab">Tab 3</a></li> </ul> <div class="tab-content"> <div class="tab-pane fade" id="tab1"> Tab 1 content </div> <div class="tab-pane fade" id="tab2"> Tab 2 content </div> <div class="tab-pane fade" id="tab3"> Tab 3 content …
17
Bootstrap 3 และ Youtube ใน Modal
ฉันพยายามใช้คุณสมบัติ Modal จาก Bootstrap 3 เพื่อแสดงวิดีโอ Youtube ของฉัน ใช้งานได้ แต่ฉันไม่สามารถคลิกที่ปุ่มใด ๆ ในวิดีโอ Youtube ความช่วยเหลือเกี่ยวกับเรื่องนี้? นี่คือรหัสของฉัน: <div id="link">My video</div> <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <iframe width="400" height="300" frameborder="0" allowfullscreen=""></iframe> </div> </div> </div> </div> <script …
15
Bootstrap กับปลั๊กอินการตรวจสอบ jQuery
ฉันกำลังพยายามเพิ่มการตรวจสอบความถูกต้องให้กับฟอร์มของฉันด้วย jQuery Validation Plugin แต่ฉันมีปัญหาที่ปลั๊กอินใส่ข้อความแสดงข้อผิดพลาดเมื่อฉันใช้กลุ่มอินพุต $('form').validate({ rules: { firstname: { minlength: 3, maxlength: 15, required: true }, lastname: { minlength: 3, maxlength: 15, required: true } }, highlight: function(element) { $(element).closest('.form-group').addClass('has-error'); }, unhighlight: function(element) { $(element).closest('.form-group').removeClass('has-error'); } }); รหัสของฉัน: http://jsfiddle.net/hTPY7/4/
17
ความกว้างของอินพุตบน Bootstrap 3
อัปเดตอีกครั้ง:ฉันกำลังปิดคำถามนี้โดยเลือกคำตอบยอดนิยมเพื่อป้องกันไม่ให้ผู้คนเพิ่มคำตอบโดยไม่เข้าใจคำถามจริงๆ ในความเป็นจริงไม่มีวิธีที่จะทำกับการสร้างในการทำงานโดยไม่ต้องใช้กริดหรือเพิ่ม CSS พิเศษ กริดทำงานได้ไม่ดีหากคุณต้องรับมือกับhelp-blockองค์ประกอบที่จำเป็นต้องทำมากกว่าการป้อนข้อมูลสั้น ๆ แต่พวกมันคือ 'build-in' ถ้าเป็นเรื่องที่ผมขอแนะนำให้ใช้คลาส CSS พิเศษที่คุณจะพบในการอภิปราย BS3 ที่นี่ ตอนนี้ BS4 ออกมาแล้วมันเป็นไปได้ที่จะใช้สไตล์การปรับขนาดที่รวมไว้เพื่อจัดการสิ่งนี้ดังนั้นสิ่งนี้จะไม่เกี่ยวข้องกันอีกต่อไป ขอขอบคุณทุกท่านที่ให้ความสำคัญกับคำถาม SO ที่ได้รับความนิยมนี้ ปรับปรุง:คำถามนี้ยังคงเปิดอยู่เพราะมันเป็นเรื่องเกี่ยวกับตัวในการทำงานในระดับปริญญาตรีสาขาการจัดการความกว้างของการป้อนข้อมูลโดยไม่ต้อง resorting ตาราง (บางครั้งพวกเขาจะต้องมีการจัดการอย่างเป็นอิสระ) ฉันใช้คลาสที่กำหนดเองเพื่อจัดการสิ่งนี้อยู่แล้วดังนั้นนี่ไม่ใช่วิธีการเกี่ยวกับ css ขั้นพื้นฐาน งานอยู่ในรายการสนทนาคุณลักษณะของ BS และยังไม่ได้รับการแก้ไข คำถามเดิม: ทุกคนสามารถหาวิธีจัดการความกว้างของอินพุตใน BS 3 ได้หรือไม่? ขณะนี้ฉันใช้คลาสที่กำหนดเองเพื่อเพิ่มฟังก์ชันการทำงานนั้น แต่ฉันอาจพลาดบางตัวเลือกที่ไม่มีเอกสาร เอกสารปัจจุบันบอกว่าจะใช้. col-lg-x แต่ไม่สามารถใช้งานได้อย่างชัดเจนเนื่องจากสามารถใช้กับคอนเทนเนอร์ div เท่านั้นซึ่งจะทำให้เกิดปัญหาเกี่ยวกับเลย์เอาต์ / โฟลตทุกชนิด นี่คือซอ แปลกคือบนซอฉันไม่สามารถแม้แต่จะปรับขนาดกลุ่มแบบฟอร์มได้ http://jsfiddle.net/tX3ae/ <form role="form" class="row"> <div …
5
ฉันควรใช้ Bootstrap จาก CDN หรือทำสำเนาบนเซิร์ฟเวอร์ของฉัน?
แนวทางปฏิบัติที่ดีที่สุดในการใช้ Twitter Bootstrap คืออะไรอ้างอิงจาก CDN หรือทำสำเนาในเครื่องบนเซิร์ฟเวอร์ของฉัน เนื่องจาก Bootstrap มีการพัฒนาอย่างต่อเนื่องฉันจึงกลัวว่าหากอ้างถึง CDN ผู้ใช้จะเห็นหน้าเว็บที่แตกต่างกันเมื่อเวลาผ่านไปและแท็กบางรายการอาจเสีย คนส่วนใหญ่เลือกอะไร?
5
ฉันสามารถใช้ HTML ที่ซับซ้อนกับคำแนะนำเครื่องมือของ Twitter Bootstrap ได้หรือไม่
ถ้าฉันตรวจสอบเอกสารอย่างเป็นทางการฉันสามารถดูคุณสมบัติที่เรียกว่า HTML: Name | Type | default | Description ---------------------------------------------------------------------------- html | boolean | false | Insert html into the tooltip. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks. มีข้อความระบุว่า "แทรก html ลงในคำแนะนำเครื่องมือ" แต่ประเภทนั้นเป็นบูลีน ฉันจะใช้ html …
29
วิธีการตรวจหาจุดหยุดตอบสนองของ Twitter Bootstrap 3 โดยใช้ JavaScript
ปัจจุบัน Twitter Bootstrap 3 มีจุดพักการตอบสนองต่อไปนี้: 768px, 992px และ 1200px ซึ่งแสดงถึงอุปกรณ์ขนาดเล็กขนาดกลางและขนาดใหญ่ตามลำดับ ฉันจะตรวจหาเบรกพอยต์เหล่านี้โดยใช้ JavaScript ได้อย่างไร ฉันต้องการฟังด้วย JavaScript สำหรับกิจกรรมที่เกี่ยวข้องทั้งหมดที่เกิดขึ้นเมื่อหน้าจอเปลี่ยน และเพื่อให้สามารถตรวจสอบว่าหน้าจอเป็นอุปกรณ์ขนาดเล็กกลางหรือใหญ่ มีบางสิ่งที่ทำไปแล้ว? คุณมีข้อเสนอแนะอะไร?
4
เว็บไซต์ที่ตอบสนองได้ย่อขยายให้เต็มความกว้างบนมือถือ
ฉันกำลังทดสอบแถบนำทางการตอบสนอง Bootstrap และฉันมีเว็บไซต์ตัวอย่าง เมื่อฉันปรับขนาดเบราว์เซอร์บนเดสก์ท็อปทุกอย่างทำงานได้ดีรวมถึงแถบนำทางซึ่งกลายเป็นเมนูที่พับได้ด้วยไอคอนขนาดเล็กที่ด้านบนซึ่งฉันสามารถคลิกเพื่อดูปุ่มเมนูเพิ่มเติม แต่เมื่อฉันลองจากเบราว์เซอร์มือถือ (ฉันลองใช้ Chrome และเบราว์เซอร์อินเทอร์เน็ตบน Android) ฉันไม่เห็นการออกแบบที่ตอบสนองได้ ฉันเห็นเฉพาะเดสก์ท็อปรุ่นเล็ก ๆ อย่างเว็บไซต์เท่านั้น ใครช่วยชี้ให้เห็นสิ่งที่ฉันทำผิด?
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.