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

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

12
ปุ่มความกว้างคงที่พร้อม Bootstrap
Bootstrap รองรับปุ่มที่มีความกว้างคงที่หรือไม่? ขณะนี้ถ้าฉันมี 2 ปุ่ม "บันทึก" และ "ดาวน์โหลด" ขนาดของปุ่มจะเปลี่ยนไปตามเนื้อหา อะไรคือวิธีที่เหมาะสมในการขยาย Bootstrap?

30
ตรงกลางหน้าต่าง Modal Bootstrap
ฉันต้องการอยู่ตรงกลางโมดัลของฉันในวิวพอร์ต (กลาง) ฉันพยายามเพิ่มคุณสมบัติ css .modal { position: fixed; top:50%; left:50%; } ฉันใช้ตัวอย่างนี้http://jsfiddle.net/rniemeyer/Wjjnd/ ฉันเหนื่อย $("#MyModal").modal('show').css( { 'margin-top': function () { return -($(this).height() / 2); }, 'margin-left': function () { return -($(this).width() / 2); } })

5
ทำให้ Bootstrap Popover ปรากฏ / หายไปบน Hover แทนที่จะคลิก
ฉันกำลังสร้างเว็บไซต์ด้วย Bootstrap ของPopoverและฉันไม่สามารถหาวิธีที่จะทำให้ popover ปรากฏบน hover แทนที่จะคลิก สิ่งที่ฉันต้องการจะทำก็คือให้มีป๊อปโอเวอร์ปรากฏขึ้นเมื่อมีคนเลื่อนเมาส์ไปที่ลิงค์แทนที่จะคลิกที่มันและเพื่อให้ป๊อปโอเวอร์หายไปเมื่อพวกเขาย้ายออกไป เอกสารบอกว่าเป็นไปได้โดยใช้ data data หรือ jquery ฉันค่อนข้างจะทำมันด้วย jquery เนื่องจากฉันมีป๊อปอัปหลายแห่ง

19
Bootstrap เลื่อนลงด้วย Hover
ตกลงดังนั้นสิ่งที่ฉันต้องการค่อนข้างตรงไปตรงมา ฉันได้ตั้งค่าแถบนำทางพร้อมกับเมนูแบบเลื่อนลงบางรายการ (ใช้class="dropdown-toggle" data-toggle="dropdown") และใช้งานได้ดี มันใช้งานได้ " onClick" ในขณะที่ฉันต้องการถ้ามันใช้งานได้ " onHover" มีวิธีใดในการทำเช่นนี้?

6
การเรียกฟังก์ชันบน bootstrap modal open
ฉันเคยใช้กล่องโต้ตอบของ JQuery UI และมีopenตัวเลือกที่คุณสามารถระบุรหัส Javascript เพื่อเรียกใช้งานได้เมื่อเปิดกล่องโต้ตอบ ฉันจะใช้ตัวเลือกนั้นเพื่อเลือกข้อความภายในกล่องโต้ตอบโดยใช้ฟังก์ชั่นที่ฉันมี ตอนนี้ฉันต้องการทำสิ่งนั้นโดยใช้คำสั่ง bootstrap ด้านล่างคือรหัส HTMl: <div id="code" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>Modal header</h3> </div> <div class="modal-body"> <pre> print 'Hello World' และสำหรับปุ่มที่เปิดเป็นกิริยาช่วย: <a href="#code" data-toggle="modal" class="btn code-dialog">Display code</a> ฉันพยายามใช้ฟังของปุ่ม แต่ข้อความแจ้งเตือนปรากฏขึ้นก่อนที่คำกริยาจะปรากฏขึ้น: $( ".code-dialog" ).click(function(){ alert("I want this to appear after …

12
Bootstrap 3 ท้ายส่วนท้ายไปด้านล่าง ไม่ได้รับการแก้ไข
ฉันใช้ Bootstrap 3 สำหรับเว็บไซต์ที่ฉันออกแบบ ฉันต้องการมีส่วนท้ายเหมือนตัวอย่างนี้ ตัวอย่าง โปรดทราบว่าฉันไม่ต้องการให้แก้ไขเพื่อให้ bootstrap navbar-fixed-bottom ไม่สามารถแก้ปัญหาของฉันได้ ฉันแค่อยากให้มันอยู่ด้านล่างสุดของเนื้อหาเสมอและตอบสนองได้ดี คำแนะนำใด ๆ ที่จะได้รับการชื่นชมอย่างมาก แก้ไข: ขออภัยถ้าฉันไม่ชัดเจน สิ่งที่เกิดขึ้นตอนนี้คือเมื่อเนื้อหาเนื้อหาไม่มีเนื้อหาเพียงพอ ส่วนท้ายของฉันขยับขึ้นและจากนั้นก็ปล่อยให้มีพื้นที่ว่างเปล่าที่ด้านล่าง นี่คือสิ่งที่ฉันมีตอนนี้สำหรับ navbar ของฉัน <nav class="navbar navbar-inverse navbar-bottom" style="padding:0 0 120px 0"> <div class="container"> <div class="row"> <div class="col-sm-4"> <h5 id='footer-header'> SITEMAP </h3> <div class="col-sm-4" style="padding: 0 0 0 0px"> <p>News</p> <p>contact</p> </div> <div …

23
วิธีแก้ไขข้อผิดพลาด; 'ข้อผิดพลาด: เคล็ดลับเครื่องมือ Bootstrap ต้องใช้ Tether (http://github.hubspot.com/tether/)'
ฉันใช้ Bootstrap V4 และข้อผิดพลาดต่อไปนี้ถูกบันทึกไว้ในคอนโซล ข้อผิดพลาด: เคล็ดลับเครื่องมือ Bootstrap ต้องการ Tether ( http://github.hubspot.com/tether/ ) ฉันพยายามลบข้อผิดพลาดโดยติดตั้ง Tether แต่มันไม่ทำงาน ฉันได้ติดตั้ง 'Tether' โดยใส่รหัสต่อไปนี้ <link rel="stylesheet" href="http://www.atlasestateagents.co.uk/css/tether.min.css"> <script src="http://www.atlasestateagents.co.uk/javascript/tether.min.js"></script> ฉันได้ติดตั้ง 'tether' ถูกต้องแล้วหรือยัง ทุกคนสามารถช่วยฉันลบข้อผิดพลาดนี้ได้หรือไม่ หากคุณต้องการดูข้อผิดพลาดในเว็บไซต์ของฉันโปรดคลิกที่นี่และโหลดคอนโซลของคุณ

5
ใช้ Fieldset Legend กับ bootstrap
ฉันใช้ Bootstrap สำหรับฉัน JSPหน้า ฉันต้องการใช้<fieldset>และ<legend>สำหรับแบบฟอร์มของฉัน นี่คือรหัสของฉัน <fieldset class="scheduler-border"> <legend class="scheduler-border">Start Time</legend> <div class="control-group"> <label class="control-label input-label" for="startTime">Start :</label> <div class="controls bootstrap-timepicker"> <input type="text" class="datetime" id="startTime" name="startTime" placeholder="Start Time" /> <i class="icon-time"></i> </div> </div> </fieldset> CSS คือ fieldset.scheduler-border { border: 1px groove #ddd !important; padding: 0 1.4em 1.4em 1.4em !important; margin: …

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 หลายแห่ง แต่ฉันไม่สามารถใช้งานได้ ใครช่วยชี้สิ่งที่ฉันทำผิดได้ไหม

16
กำจัดมุมที่โค้งมนทั้งหมดใน Twitter Bootstrap
ฉันชอบ Twitter Bootstrap 2.0 - ฉันชอบที่มันเป็นห้องสมุดที่สมบูรณ์แบบ ... แต่ฉันต้องการที่จะสร้างการเปลี่ยนแปลงระดับโลกสำหรับเว็บไซต์ที่ไม่ได้เป็นกล่องที่รอบกล่องซึ่งจะกำจัดมุมที่โค้งมนใน Bootstrap ... นั่นเป็น CSS จำนวนมากที่ต้องตัดใจ มีสวิตช์ส่วนกลางหรือจะเป็นวิธีที่ดีที่สุดในการค้นหาและแทนที่การปัดเศษทั้งหมดหรือไม่

18
วิธีเปิดใช้งานเคล็ดลับเครื่องมือ Bootstrap บนปุ่มที่ถูกปิดใช้งาน?
ฉันต้องแสดงคำแนะนำเครื่องมือบนปุ่มปิดใช้งานและลบออกจากปุ่มที่เปิดใช้งาน ปัจจุบันมันทำงานในสิ่งที่ตรงกันข้าม วิธีที่ดีที่สุดในการคว่ำพฤติกรรมนี้คืออะไร $('[rel=tooltip]').tooltip(); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <hr> <button class="btn" disabled rel="tooltip" data-title="Dieser Link führt zu Google">button disabled</button> <button class="btn" rel="tooltip" data-title="Dieser Link führt zu Google">button not disabled</button> เรียกใช้ข้อมูลโค้ดHide resultsขยายตัวอย่างข้อมูล นี่คือตัวอย่าง PS: ฉันต้องการเก็บdisabledแอตทริบิวต์

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ในแอปพลิเคชันของฉันได้อย่างไร หากคุณสามารถยกตัวอย่างแล้วมันจะเป็นความช่วยเหลือที่ดี

6
`col-xs- *` ไม่ทำงานใน Bootstrap 4
ฉันไม่เคยพบสิ่งนี้มาก่อนและฉันมีเวลาที่ยากมากในการพยายามหาวิธีแก้ปัญหา เมื่อมีคอลัมน์เท่ากับสื่อใน bootstrap เช่น: <h1 class="text-center">Hello, world!</h1> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <h1>vicki williams</h1> </div> </div> </div> การจัดแนวข้อความทำงานได้ดี: แต่เมื่อสร้างคอลัมน์เท่ากับขนาดเล็กพิเศษเช่น: <div class="container"> <div class="row"> <div class="col-xs-12 text-center"> <h1>vicki williams</h1> </div> </div> </div> จากนั้นการจัดแนวข้อความจะไม่ทำงานอีกต่อไป: มีแนวคิด bootstrap บางอย่างที่ฉันไม่เข้าใจหรือเป็นจริงข้อผิดพลาดเช่นฉันคิดว่ามันเป็น ฉันไม่เคยมีปัญหานี้เนื่องจากข้อความของฉันสอดคล้องกับอดีตกับ xs เสมอ ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชมอย่างมาก. นี่คือรหัสที่สมบูรณ์ของฉัน: <!DOCTYPE html> <html lang="en"> <head> <!-- …

14
วิธีการแสดงรายการที่เลือกในหัวข้อแบบเลื่อนลงของปุ่ม Bootstrap
ฉันใช้ส่วนประกอบบู๊ตแบบหล่นลงในแอปพลิเคชันของฉันเช่นนี้: <div class="btn-group"> <button class="btn">Please Select From List</button> <button class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> <li><a tabindex="-1" href="#">Item I</a></li> <li><a tabindex="-1" href="#">Item II</a></li> <li><a tabindex="-1" href="#">Item III</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">Other</a></li> </ul> </div> ฉันต้องการแสดงรายการที่เลือกเป็นป้ายกำกับ btn กล่าวอีกนัยหนึ่งแทนที่ "โปรดเลือกจากรายการ" ด้วยรายการที่เลือก ("รายการฉัน", "รายการ II", "รายการ III")

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.