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

ฉันกำลังสร้างเลย์เอาต์ที่ตอบสนองกับ navbar คงที่ด้านบน ใต้ฉันมีสองคอลัมน์หนึ่งคอลัมน์สำหรับแถบด้านข้าง (3) และอีกหนึ่งคอลัมน์สำหรับเนื้อหา (9) อันไหนบนเดสก์ท็อปหน้าตาแบบนี้ navbar [3] [9] เมื่อฉันresizeไปที่มือถือnavbarถูกบีบอัดและซ่อนแถบด้านข้างจะซ้อนกันอยู่ด้านบนของเนื้อหาเช่นนี้: navbar [3] [9] ฉันต้องการเนื้อหาหลักที่ด้านบนดังนั้นฉันต้องเปลี่ยนคำสั่งซื้อบนมือถือเป็น: navbar [9] [3] ฉันพบบทความนี้ซึ่งครอบคลุมประเด็นเดียวกัน แต่คำตอบที่ยอมรับได้รับการแก้ไขแล้วเพื่อบอกว่าวิธีแก้ไขไม่ได้ใช้กับ Bootstrap รุ่นปัจจุบัน ฉันจะเรียงลำดับคอลัมน์เหล่านี้บนมือถือได้อย่างไร หรืออีกวิธีหนึ่งฉันจะนำรายชื่อกลุ่มแถบด้านข้างไปไว้ในแถบนำทางที่ขยายเพิ่มได้อย่างไร นี่คือรหัสของฉัน: <div class="navbar navbar-inverse navbar-static-top"> <div class="container"> <a href="#" class="navbar-brand">Brand Title</a> <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="collapse navbar-collapse …

293 html  css  twitter-bootstrap  multiple-columns 

ใน Bootstrap v3 ฉันมักจะใช้ที่ซ่อนอยู่ - คลาส ** รวมกับ clearfix เพื่อควบคุมเลย์เอาต์แบบหลายคอลัมน์ที่ความกว้างหน้าจอที่แตกต่างกัน ตัวอย่างเช่น, ฉันสามารถรวมหลายซ่อน - ** ในหนึ่ง DIV เพื่อให้คอลัมน์หลายคอลัมน์ของฉันปรากฏอย่างถูกต้องที่ความกว้างหน้าจอที่แตกต่างกัน ตัวอย่างเช่นถ้าฉันต้องการที่จะแสดงแถวของรูปถ่ายสินค้า, 4 ต่อแถวบนขนาดหน้าจอที่ใหญ่กว่า, 3 บนหน้าจอขนาดเล็กแล้ว 2 บนหน้าจอขนาดเล็กมาก รูปถ่ายสินค้าอาจมีความสูงแตกต่างกันดังนั้นฉันต้องการ clearfix เพื่อให้แน่ใจว่าแถวแตกหักอย่างถูกต้อง นี่คือตัวอย่างใน v3 ... http://jsbin.com/tosebayode/edit?html,css,output ตอนนี้ที่ v4 ทำกับคลาสเหล่านี้และแทนที่ด้วยคลาสที่มองเห็น / ซ่อน - ** - ขึ้น / ลงคลาสฉันดูเหมือนจะต้องทำสิ่งเดียวกันกับ DIV หลายตัวแทน นี่คือตัวอย่างที่คล้ายกันใน v4 ... http://jsbin.com/sagowihowa/edit?html,css,output ดังนั้นฉันจึงไปจาก DIV …

290 twitter-bootstrap  bootstrap-4 

เราจะได้รับป๊อปอัปที่จะถูกไล่ออกในลักษณะเดียวกันกับ modals หรือไม่ ทำให้พวกเขาปิดเมื่อผู้ใช้คลิกที่ไหนสักแห่งนอกพวกเขา? น่าเสียดายที่ฉันไม่สามารถใช้คำกริยาจริงแทน popover ได้เนื่องจากคำว่าโมดัลหมายถึงตำแหน่ง: คงที่และนั่นจะไม่ใช่ป๊อปอัปอีกต่อไป :(

289 twitter-bootstrap  popover 

ฉันพยายามที่จะแสดง HTML ภายในป๊อปอัพบูต แต่อย่างใดมันไม่ทำงาน ฉันพบคำตอบที่นี่ แต่มันไม่ได้ผลสำหรับฉัน โปรดแจ้งให้เราทราบหากฉันทำอะไรผิด <script> $(function(){ $('[rel=popover]').popover({ html : true, content: function() { return $('#popover_content_wrapper').html(); } }); }); </script> <li href="#" id="example" rel="popover" data-content="" data-original-title="A Title"> popover </li> <div id="popover_content_wrapper" style="display: none"> <div>This is your div content</div> </div>

288 html  twitter-bootstrap  popover 

ปิด คำถามนี้เป็นคำถามความคิดเห็นตาม ไม่ยอมรับคำตอบในขณะนี้ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้สามารถตอบข้อเท็จจริงและการอ้างอิงได้โดยแก้ไขโพสต์นี้ ปิดให้บริการใน6 ปีที่ผ่านมา ปรับปรุงคำถามนี้ ฉันทำงานกับ Bootstrap 2.0.3 โดยใช้ LESS ฉันต้องการปรับแต่งมันอย่างกว้างขวาง แต่ฉันต้องการหลีกเลี่ยงการเปลี่ยนแปลงแหล่งที่มาเมื่อใดก็ตามที่เป็นไปได้เนื่องจากการเปลี่ยนแปลงในไลบรารีเป็นประจำ ฉันใหม่สำหรับ LESS ดังนั้นฉันจึงไม่ทราบว่าการรวบรวมนั้นใช้งานได้อย่างไร อะไรคือแนวปฏิบัติที่ดีที่สุดสำหรับการทำงานกับกรอบ LESS หรือ LESS

285 twitter-bootstrap  less 

มีวิธีใดที่จะทำให้องค์ประกอบ html อยู่กึ่งกลางแนวตั้งหรือแนวนอนภายในพ่อแม่หลัก

285 css  twitter-bootstrap 

อะไรdata-toggleคุณลักษณะทำใน Twitter Bootstrap? ฉันไม่พบคำตอบใน Bootstrap API ฉันได้เห็นคำถามที่คล้ายกันก่อนเช่นกันการเชื่อมโยง แต่มันก็ไม่ได้ช่วยอะไรมาก

284 javascript  jquery  html  twitter-bootstrap 

ฉันมีตาราง HTML เชื่อมโยงกับแถวฐานข้อมูล ฉันต้องการลิงค์ "ลบแถว" สำหรับแต่ละแถว แต่ฉันต้องการยืนยันกับผู้ใช้ล่วงหน้า มีวิธีทำเช่นนี้โดยใช้กล่องโต้ตอบ Modal Twitter Bootstrap หรือไม่?

284 jquery  twitter-bootstrap 

ฉันได้อ่านโพสต์ที่นี่เว็บไซต์ Bootstrap และ Googled อย่างบ้าคลั่ง - แต่ไม่สามารถหาสิ่งที่ฉันแน่ใจว่าเป็นคำตอบที่ง่าย ... ฉันมี Bootstrap เป็นกิริยาช่วยที่ฉันเปิดจากผู้ช่วย link_to เช่นนี้ <%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' => 'modal', 'data-target' => "#myModal", class: "btn btn-primary"} %> ในของฉันContactsController.createการกระทำฉันมีรหัสที่สร้างแล้วผ่านออกไปContact create.js.erbในcreate.js.erbฉันมีรหัสการจัดการข้อผิดพลาด (การผสมผสานของทับทิมและจาวาสคริปต์) หากทุกอย่างไปได้ด้วยดีฉันต้องการปิดคำกริยา ที่นี่ฉันมีปัญหา ฉันไม่สามารถละทิ้งคำกริยาเมื่อทุกอย่างเป็นไปด้วยดี ฉันลอง$('#myModal').modal('hide');แล้วและนี่ไม่มีผล ฉันได้ลองแล้ว$('#myModal').hide();ซึ่งเป็นสาเหตุให้คำสั่งยกเลิก แต่ออกจากฉากหลัง คำแนะนำเกี่ยวกับวิธีการปิดคำกริยาและ / หรือยกเลิกฉากหลังจากภายในcreate.js.erb? แก้ไข นี่คือมาร์กอัปสำหรับ myModal: <div class="modal hide" id="myModal" > …

281 javascript  twitter-bootstrap  modal-dialog 

ฉันกำลังพยายามหาตัวอย่างการทำงานขององค์ประกอบตัวพิมพ์twitter bootstrapที่จะทำการโทร ajax เพื่อเติมลงมัน ฉันมีตัวอย่างการเติมข้อความอัตโนมัติ jQuery ที่ใช้งานอยู่ซึ่งกำหนด ajax url เป็นและวิธีการตอบกลับ <script type="text/javascript"> //<![CDATA[ $(document).ready(function() { var options = { minChars:3, max:20 }; $("#runnerquery").autocomplete('./index/runnerfilter/format/html',options).result( function(event, data, formatted) { window.location = "./runner/index/id/"+data[1]; } ); .. ฉันต้องเปลี่ยนอะไรเพื่อแปลงสิ่งนี้เป็นตัวอย่างของหัวพิมพ์? <script type="text/javascript"> //<![CDATA[ $(document).ready(function() { var options = { source:'/index/runnerfilter/format/html', items:5 }; $("#runnerquery").typeahead(options).result( function(event, data, formatted) …

280 jquery  twitter-bootstrap  jquery-autocomplete  jquery-ui-autocomplete  typeahead.js 

ฉันใช้ Twitter bootstrap tooltips กับ javascript ดังนี้: $('a[rel=tooltip]').tooltip(); มาร์กอัปของฉันมีลักษณะดังนี้: <a rel="tooltip" title="Not implemented" class="btn"><i class="icon-file"></i></a> สิ่งนี้ใช้ได้ดี แต่ฉันเพิ่ม<a>องค์ประกอบแบบไดนามิกและเคล็ดลับเครื่องมือไม่แสดงขึ้นสำหรับองค์ประกอบแบบไดนามิกเหล่านั้น ฉันรู้ว่าเป็นเพราะฉันผูก. ทูลทิป () เพียงครั้งเดียวเมื่อเอกสารโหลดเสร็จด้วย$(document).ready(function()ฟังก์ชั่นjquery ทั่วไป ฉันจะผูกสิ่งนี้กับองค์ประกอบที่สร้างขึ้นแบบไดนามิกได้อย่างไร ฉันมักจะทำสิ่งนี้ผ่านวิธีการ jquery live () อย่างไรก็ตามเหตุการณ์ที่ฉันใช้ผูกคืออะไร ฉันแค่ไม่แน่ใจว่าจะขอ bootstrap .tooltip () กับ jquery .live () ได้อย่างไร ฉันพบวิธีหนึ่งที่จะทำให้งานนี้เป็นแบบนี้: /* Add new 'rows' when plus sign is clicked */ $("a.add").live('click', function …

277 jquery  twitter-bootstrap 

ฉันต้องการปุ่มที่จะใช้ความกว้างเต็มของคอลัมน์ แต่มีปัญหา ... <div class="span9 btn-block"> <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button> </div> ฉันจะทำให้ปุ่มกว้างเท่ากับคอลัมน์ได้อย่างไร

276 css  twitter-bootstrap  html  responsive-design 

ฉันมีคำถามเกี่ยวกับวิธีปฏิบัติที่ดีที่สุดในการรวมnode_modulesไว้ในเว็บไซต์ HTML ลองนึกภาพฉันมี Bootstrap อยู่ในnode_modulesโฟลเดอร์ ตอนนี้สำหรับเว็บไซต์เวอร์ชันการผลิตฉันจะรวมสคริปต์ Bootstrap และไฟล์ CSS ที่อยู่ในnode_modulesโฟลเดอร์ได้อย่างไร มันเหมาะสมไหมที่จะปล่อย Bootstrap ไว้ในโฟลเดอร์นั้นและทำสิ่งต่อไปนี้? <script src="./node_modules/bootstrap/dist/bootstrap.min.js"></script> หรือฉันจะต้องเพิ่มกฎในไฟล์อึกของฉันซึ่งคัดลอกไฟล์เหล่านั้นไปยังโฟลเดอร์ dist ของฉันหรือไม่ หรือมันจะเป็นการดีที่สุดถ้าให้อึกเอา bootstrap ในเครื่องออกจากไฟล์ HTML ของฉันและแทนที่ด้วย CDN เวอร์ชั่น?

275 node.js  twitter-bootstrap  npm  node-modules 

นี่เป็นคำถามสองส่วน: คุณจะวางตำแหน่งคำกริยาในแนวตั้งได้อย่างไรเมื่อคุณไม่ทราบความสูงที่แท้จริงของคำกริยา? เป็นไปได้หรือไม่ที่จะมีคำกริยาที่กึ่งกลางและล้น: อัตโนมัติในตัวโมดอล แต่เฉพาะถ้าโมดัลมีความสูงเกินความสูงของหน้าจอ ฉันได้ลองใช้สิ่งนี้: .modal-dialog { height: 80% !important; padding-top:10%; } .modal-content { height: 100% !important; overflow:visible; } .modal-body { height: 80%; overflow: auto; } สิ่งนี้ทำให้ฉันได้ผลลัพธ์ที่ฉันต้องการเมื่อเนื้อหามีขนาดใหญ่กว่าขนาดหน้าจอแนวตั้ง แต่สำหรับเนื้อหาที่เป็นกิริยาช่วยเล็กน้อยมันใช้ไม่ได้

270 css  twitter-bootstrap  modal-dialog  center 

อะไรคือวิธีการทั่วไปในการจัดแนวข้อความและการจัดแนวข้อความอื่น ๆ ภายในคอนเทนเนอร์ div ใน bootstrap? เช่น Total cost $42 ค่าใช้จ่ายทั้งหมดข้างต้นควรจัดชิดข้อความและ $ 42 เป็นข้อความชิดขวา

268 twitter-bootstrap  user-interface  bootstrap-4