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

Bootstrap เป็นเฟรมเวิร์กเอนด์ที่ออกแบบมาเพื่อพัฒนาเว็บไซต์และแอพพลิเคชั่นบนเว็บ สำหรับคำถามที่เกี่ยวข้องกับเวอร์ชั่นของ Bootstrap ให้ใช้แท็กของเวอร์ชันเฉพาะจาก "twitter-bootstrap-2", "twitter-bootstrap-3" และ "bootstrap-4"

30
วิธีการทำให้เมนู Bootstrap ของ Twitter หล่นลงบนโฮเวอร์แทนที่จะคลิก
ฉันต้องการให้เมนู Bootstrap ของฉันวางลงบนโฮเวอร์โดยอัตโนมัติแทนที่จะต้องคลิกที่ชื่อเมนู ฉันต้องการจะสูญเสียลูกศรเล็ก ๆ ถัดจากชื่อเมนู
30
จัดคอลัมน์ให้อยู่กึ่งกลางโดยใช้ Twitter Bootstrap 3
ฉันจะกำหนดขนาดของคอลัมน์หนึ่งคอลัมน์ไว้ในคอนเทนเนอร์ (12 คอลัมน์) ในTwitter Bootstrap 3 ได้อย่างไร .centered { background-color: red; } <body class="container"> <div class="col-lg-1 col-offset-6 centered"> <img data-src="holder.js/100x100" alt="" /> </div> </body> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล ฉันต้องการ a divโดยมีคลาส.centeredให้อยู่กึ่งกลางภายในคอนเทนเนอร์ ฉันอาจใช้แถวถ้ามีหลายdivs แต่ตอนนี้ฉันต้องการ a ที่divมีขนาดหนึ่งคอลัมน์ที่อยู่กึ่งกลางภายในคอนเทนเนอร์ (12 คอลัมน์) ฉันยังไม่แน่ใจว่าวิธีการข้างต้นดีพอเนื่องจากความตั้งใจที่จะไม่ชดเชยdivครึ่ง ฉันไม่ต้องการพื้นที่ว่างด้านนอกdivและเนื้อหาของdivสัดส่วนที่ลดลง ฉันต้องการพื้นที่ว่างด้านนอก div เพื่อกระจายอย่างเท่าเทียมกัน (ลดขนาดจนถึงความกว้างคอนเทนเนอร์เท่ากับหนึ่งคอลัมน์)
30
ฉันจะทำให้คอลัมน์ Bootstrap มีความสูงเท่ากันได้อย่างไร
ฉันใช้ Bootstrap ฉันจะสร้างสามคอลัมน์ให้สูงเท่ากันได้อย่างไร นี่คือภาพหน้าจอของปัญหา ฉันต้องการให้คอลัมน์สีน้ำเงินและสีแดงมีความสูงเท่ากับคอลัมน์สีเหลือง นี่คือรหัส: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-xs-4 panel" style="background-color: red"> some content </div> <div class="col-xs-4 panel" style="background-color: yellow"> catz <img width="100" height="100" src="https://lorempixel.com/100/100/cats/"> </div> <div class="col-xs-4 panel" style="background-color: blue"> some more content </div> </div> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล
23
จัดแนวตั้งด้วย Bootstrap 3
ฉันใช้ Twitter Bootstrap 3 และฉันมีปัญหาเมื่อฉันต้องการจัดตำแหน่งแนวตั้งสองdivตัวอย่าง - ลิงค์ JSFiddle : <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <div class="row"> <div class="col-xs-5"> <div style="height:5em;border:1px solid #000">Big</div> </div> <div class="col-xs-5"> <div style="height:3em;border:1px solid #F00">Small</div> …
14
วิธีการเปิดหน้าต่าง Modal Bootstrap โดยใช้ jQuery
ฉันกำลังใช้ฟังก์ชั่นหน้าต่าง Modal Twitter Bootstrap เมื่อมีคนคลิกส่งในแบบฟอร์มของฉันฉันต้องการแสดงหน้าต่างโมดอลเมื่อคลิกปุ่ม "ส่ง" ในแบบฟอร์ม <form id="myform" class="form-wizard"> <h2 class="form-wizard-heading">BootStap Wizard Form</h2> <input type="text" value=""/> <input type="submit"/> </form> <!-- Modal --> <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Modal header</h3> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div …
6
sr-only ใน Bootstrap 3 คืออะไร
คลาสนี้sr-onlyใช้ทำอะไร? มีความสำคัญหรือฉันสามารถลบออกได้หรือไม่ ทำงานได้ดีโดยไม่ต้อง นี่คือตัวอย่างของฉัน: <div class="btn-group"> <button type="button" class="btn btn-info btn-md">Departments</button> <button type="button" class="btn btn-info dropdown-toggle btn-md" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Sales</a></li> <li><a href="#">Technical</a></li> <li class="divider"></li> <li><a href="#">Show all</a></li> </ul> </div>
20
คลาสจัดข้อความสำหรับภายในตาราง
มีชุดคลาสในกรอบ Bootstrap ของ Twitter ที่จัดแนวข้อความหรือไม่ ตัวอย่างเช่นฉันมีบางตารางที่มี$ผลรวมที่ฉันต้องการจัดชิดขวา <th class="align-right">Total</th> และ <td class="align-right">$1,000,000.00</td>
30
Bootstrap modal ปรากฏภายใต้พื้นหลัง
ฉันใช้รหัสสำหรับ modal โดยตรงจากตัวอย่าง Bootstrap และรวมเฉพาะ bootstrap.js (ไม่ใช่ bootstrap-modal.js) อย่างไรก็ตามคำกริยาของฉันปรากฏใต้จางสีเทา (ฉากหลัง) และไม่สามารถแก้ไขได้ นี่คือสิ่งที่ดูเหมือนว่า: ดูซอนี้สำหรับวิธีหนึ่งในการทำให้เกิดปัญหานี้อีกครั้ง โครงสร้างพื้นฐานของรหัสนั้นเป็นดังนี้: <body> <p>Lorem ipsum dolor sit amet.</p> <div class="my-module"> This container contains the modal code. <div class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body">Modal</div> </div> </div> </div> </div> </body> body { padding-top: 50px; } .my-module { position: …
26
ปุ่มอัพโหลดองค์ประกอบไฟล์แบบฟอร์ม Twitter Bootstrap
เหตุใดจึงไม่มีปุ่มอัปโหลดองค์ประกอบไฟล์แฟนซีสำหรับ twitter bootstrap มันจะหวานถ้าปุ่มหลักสีฟ้าถูกนำมาใช้สำหรับปุ่มอัปโหลด เป็นไปได้ไหมที่จะใช้ปุ่มอัพโหลดในการใช้ CSS? (ดูเหมือนองค์ประกอบเบราว์เซอร์ดั้งเดิมที่ไม่สามารถจัดการได้)
23
คุณจะรับเนื้อหาที่เป็นศูนย์กลางโดยใช้ Twitter Bootstrap ได้อย่างไร
ฉันพยายามทำตามตัวอย่างพื้นฐานมาก ใช้หน้าเริ่มต้นและระบบกริดฉันหวังว่าต่อไปนี้: <div class="row"> <div class="span12"> <h1>Bootstrap starter template</h1> <p>Example text.</p> </div> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล ... จะสร้างข้อความกึ่งกลาง อย่างไรก็ตามมันยังคงปรากฏบนด้านซ้ายสุด ผมทำอะไรผิดหรือเปล่า?
18
ไม่อนุญาตให้ปิดหน้าต่าง modal Twitter Bootstrap
ฉันกำลังสร้างหน้าต่างโมดัลโดยใช้ Twitter Bootstrap พฤติกรรมเริ่มต้นคือถ้าคุณคลิกนอกพื้นที่ modal คำกริยาจะปิดโดยอัตโนมัติ ฉันต้องการปิดการใช้งานนั่นคือไม่ปิดหน้าต่าง modal เมื่อคลิกนอก modal มีคนแบ่งปันรหัส jQuery เพื่อทำสิ่งนี้ได้ไหม
11
ผูกฟังก์ชั่นกับ Twitter Bootstrap Modal Close
ฉันใช้ Twitter Bootstrap lib ในโครงการใหม่และฉันต้องการให้บางส่วนของหน้าเว็บทำการรีเฟรชและดึงข้อมูล json ล่าสุดเมื่อปิดการใช้งาน ฉันไม่เห็นสิ่งนี้ในเอกสารใด ๆ ใครสามารถชี้ให้ฉันหรือแนะนำวิธีแก้ปัญหา ปัญหาสองประการเกี่ยวกับการใช้วิธีการที่ทำเป็นเอกสาร $('#my-modal').bind('hide', function () { // do something ... }); ฉันแนบคลาส "ซ่อน" กับโมดัลแล้วดังนั้นจึงไม่ปรากฏในการโหลดหน้าเพื่อที่จะโหลดสองครั้ง แม้ว่าฉันจะลบคลาส hide และตั้งค่าองค์ประกอบ id display:noneและเพิ่มconsole.log("THE MODAL CLOSED");ไปยังฟังก์ชั่นด้านบนเมื่อฉันกดปิดไม่มีอะไรเกิดขึ้น
10
การส่งผ่านข้อมูลไปยัง modst bootstrap
ฉันมีไฮเปอร์ลิงก์สองอันที่แต่ละอันมี ID แนบอยู่ เมื่อฉันคลิกที่ลิงค์นี้ฉันต้องการเปิด modal ( http://twitter.github.com/bootstrap/javascript.html#modals ) และส่งรหัสนี้ไปยัง modal ฉันค้นหาใน google แต่ฉันไม่พบสิ่งใดที่สามารถช่วยฉันได้ นี่คือรหัส: <a data-toggle="modal" data-id="@book.Id" title="Add this item" class="open-AddBookDialog"></a> ซึ่งควรเปิด: <div class="modal hide" id="addBookDialog"> <div class="modal-body"> <input type="hidden" name="bookId" id="bookId" value=""/> </div> </div> ด้วยรหัสชิ้นนี้: $(document).ready(function () { $(".open-AddBookDialog").click(function () { $('#bookId').val($(this).data('id')); $('#addBookDialog').modal('show'); }); }); อย่างไรก็ตามเมื่อฉันคลิกไฮเปอร์ลิงก์ไม่มีอะไรเกิดขึ้น เมื่อฉันให้ไฮเปอร์ลิงก์<a href="#addBookDialog" ...>โมดอลจะเปิดได้ดี …
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.