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

มีวิธีในการเปลี่ยนภาพเคลื่อนไหวหน้าต่าง Twitter Bootstrap Modal จากเอฟเฟกต์แบบเลื่อนลงเป็น fadeIn หรือเพียงแค่แสดงโดยไม่ต้องสไลด์หรือไม่? ฉันอ่านเอกสารที่นี่: http://getbootstrap.com/javascript/#modals แต่พวกเขาไม่ได้กล่าวถึงตัวเลือกใด ๆ สำหรับการเปลี่ยนเอฟเฟกต์บอดี้สไลด์แบบโมดัล

167 javascript  jquery  jquery-ui  twitter-bootstrap 

ในหีบเพลง Bootstrap แทนที่จะต้องการคลิกที่aข้อความฉันต้องการทำให้มันยุบเมื่อคลิกที่ใดก็ได้ในpanel-headingdiv ฉันใช้ Bootstrap 3 ดังนั้นแทนที่จะเป็นหีบเพลงมันเป็นเพียงแผงพับได้ ความคิดวิธีการทำแผงทั้งหมดคลิกได้?

167 twitter-bootstrap  twitter-bootstrap-3 

ฉันมีองค์ประกอบดังต่อไปนี้: <div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;" > <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title"></h3> </div> <div class="modal-body"></div> <div class="modal-footer"></div> </div> </div> </div> มันแสดงข้อความโต้ตอบแบบโมดัลอะไรแบบนี้โดยทั่วไปมันใส่แถบเลื่อนไปทั่วทั้งหมดmodal-dialogและไม่ใช่modal-bodyเนื้อหาที่ฉันพยายามแสดง ภาพมีลักษณะดังนี้: ฉันจะได้รับแถบเลื่อนรอบmodal-bodyเท่านั้นได้อย่างไร ฉันลองกำหนดstyle="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;"ให้modal-bodyแต่มันไม่ทำงาน

165 css  twitter-bootstrap 

ฉันสร้างคำแนะนำเครื่องมือโดยใช้ Twitter Bootstrap เคล็ดลับเครื่องมือแสดงด้วยสามบรรทัด อย่างไรก็ตามฉันต้องการแสดงคำแนะนำเครื่องมือโดยมีเพียงหนึ่งบรรทัด ฉันจะเปลี่ยนความกว้างของคำแนะนำเครื่องมือได้อย่างไร สิ่งนี้เฉพาะกับ Twitter Bootstrap หรือเพื่อแนะนำเครื่องมือตัวเองหรือไม่?

163 twitter-bootstrap  tooltip 

ฉันมีหน้าเว็บที่มีแบบฟอร์มเท่านั้นและฉันต้องการให้แบบฟอร์มอยู่ตรงกลางของหน้าจอ <div class="container"> <div class="row justify-content-center align-items-center"> <form> <div class="form-group"> <label for="formGroupExampleInput">Example label</label> <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input"> </div> <div class="form-group"> <label for="formGroupExampleInput2">Another label</label> <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input"> </div> </form> </div> </div> การjustify-content-centerจัดแนวแบบฟอร์มในแนวนอน แต่ฉันไม่สามารถหาวิธีจัดแนวตั้งได้ ฉันได้พยายามที่จะใช้align-items-centerและalign-self-centerแต่มันไม่ทำงาน ฉันพลาดอะไรไป การสาธิต

163 css  twitter-bootstrap  bootstrap-4  centering 

ฉันใช้ Twitter-Bootstrap และฉันต้องสามารถพิมพ์หน้าเว็บในลักษณะที่ปรากฏบนเบราว์เซอร์ ฉันสามารถพิมพ์หน้าอื่น ๆ ที่ทำด้วย Twitter-Bootstrap ได้ดี แต่ฉันไม่สามารถพิมพ์หน้าของฉันที่ใช้ Twitter-Bootstrap ได้อย่างหมดจด ฉันไม่มีแท็กที่ไหนบ้างไหม? หน้า TB อย่างเป็นทางการเมื่อพิมพ์: หน้าของฉันเมื่อพิมพ์: หน้าตาของฉันเป็นอย่างไร:

162 printing  twitter-bootstrap 

วิธีที่ดีที่สุดในการเพิ่มช่องว่างในแนวตั้งโดยใช้ Bootstrap ของ Twitter คืออะไร ตัวอย่างเช่นสมมติว่าฉันกำลังสร้างหน้า Landing Page และต้องการพื้นที่ว่างเปล่าด้านบนและด้านล่างปุ่มเล็กน้อย (100px) เห็นได้ชัดว่าฉันสามารถสร้างคลาสที่แน่นอนสำหรับปุ่มนั้น แต่ผมจะคิดว่าเงินทุนควรจะมีความแห้งวิธีของการเพิ่มช่องว่างในแนวตั้ง

162 twitter-bootstrap  whitespace  vertical-alignment  twitter-bootstrap-2 

ปิด คำถามนี้เป็นคำถามความคิดเห็นตาม ไม่ยอมรับคำตอบในขณะนี้ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้สามารถตอบข้อเท็จจริงและการอ้างอิงได้โดยแก้ไขโพสต์นี้ ปิดให้บริการใน5 ปีที่ผ่านมา ปรับปรุงคำถามนี้ ฉันได้ค้นพบFlexboxเมื่อเร็ว ๆ นี้เมื่อฉันกำลังมองหาวิธีแก้ปัญหาเพื่อให้ div สูงเหมือนกันขึ้นอยู่กับระดับสูงสุด ฉันได้อ่านหน้าต่อไปนี้บน CSS-tricks.com และเชื่อฉันว่าflexboxเป็นโมดูลที่ทรงพลังมากในการเรียนรู้และใช้งาน อย่างไรก็ตามมันทำให้ฉันคิดถึงความจริงที่ว่า Twitter Bootstrap (และเฟรมเวิร์กที่คล้ายกัน) เสนอฟังก์ชั่นแบบเดียวกัน (+ แน่นอนมากขึ้นเป็นพิเศษ) ด้วยระบบกริด ตอนนี้คำถามคืออะไรข้อดีและข้อเสียของflexboxคืออะไร? มีบางอย่างที่เราไม่สามารถทำได้กับ Flexbox ที่เราสามารถทำกับเฟรมเวิร์กอย่าง Bootstrap (แน่นอนว่าเป็นการพูดถึงระบบกริด) ตัวเลือกใดที่เร็วกว่าเมื่อติดตั้งบนเว็บไซต์ ฉันเดาว่าสำหรับระบบกริดเท่านั้นมันฉลาดกว่าที่จะใช้อย่างหมดจดflexboxแต่ถ้าคุณใช้เฟรมเวิร์กอยู่แล้วจะมีอะไรflexboxเพิ่มบ้างไหม? มีเหตุผลใดบ้างที่จะเลือกflexbox"ระบบกริด" บนกรอบของ?

161 html  css  twitter-bootstrap  flexbox 

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-body"> <%= image_tag "Background.jpg" %> </div> </div> ฉันจะทำให้ bootstrap twitter แบบเต็มหน้าจอ modal สำหรับรหัสข้างต้นฉันพยายามเล่นรอบกับ CSS แต่ไม่สามารถรับได้ตามที่ฉันต้องการ ใครก็ได้โปรดช่วยฉันด้วย

160 css  twitter-bootstrap 

บูตของ Twitter ใช้ไอคอนตาม Glyphicons available in dark gray and whiteโดยค่าเริ่มต้นคือ " ": เป็นไปได้ไหมที่จะใช้ CSS trickery เพื่อเปลี่ยนสีของไอคอน? ฉันหวังว่าจะมีความสามารถ css3 อื่น ๆ ที่จะป้องกันไม่ให้มีชุดภาพไอคอนสำหรับแต่ละสี ฉันรู้ว่าคุณสามารถเปลี่ยนสีพื้นหลังของ<i>องค์ประกอบล้อมรอบ ( ) แต่ฉันกำลังพูดถึงไอคอนสีพื้นหน้า ฉันเดาว่ามันจะเป็นไปได้ที่จะผกผันความโปร่งใสของภาพไอคอนแล้วตั้งค่าสีพื้นหลัง ดังนั้นฉันสามารถเพิ่มสีให้กับไอคอน bootstrap โดยใช้ CSS ได้หรือไม่

159 css  twitter-bootstrap  sprite  css-sprites 

ฉันพยายามหาวิธีทำตารางต่อไปนี้ด้วย Bootstrap ฉันไม่แน่ใจว่าฉันจะสร้างกล่อง (หมายเลข 1) ที่ครอบคลุมสองแถวได้อย่างไร กล่องถูกสร้างโดยทางโปรแกรมตามลำดับที่วาง ช่อง 1 คือข้อความต้อนรับ มีความคิดเกี่ยวกับวิธีที่ดีที่สุดที่จะไปกับสิ่งนี้

158 css  twitter-bootstrap 

ฉันกำลังใช้ฟังก์ชั่นด้านล่างเพื่อสร้างข้อความที่จะแสดงโดยใช้คำแนะนำเครื่องมือของ Bootstrap คำแนะนำเครื่องมือหลายอันมาพร้อมกับ<br>และไม่ได้\nอย่างไร ฉันชอบที่ไม่มี HTML ในแอตทริบิวต์ชื่อลิงค์ของฉัน งานอะไร def tooltip(object) tooltip = "" object.each do |user| tooltip += "#{user.identifier}" + "<br>" end return tooltip end สิ่งที่ฉันต้องการ def tooltip(object) tooltip = "" object.each do |user| tooltip += "#{user.identifier}" + "\n" end return tooltip end

157 javascript  html  css  twitter-bootstrap 

ฉันกำลังพยายามใช้แท็บที่เรียงซ้อนชิดซ้ายโดยใช้ปลั๊กอิน 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 …

157 twitter-bootstrap  tabs  twitter-bootstrap-3 

วิธีที่ดีที่สุดในการเว้นวรรคแนวนอนปุ่ม Bootstrap คืออะไร? ในขณะที่ปุ่มสัมผัส: <div class="btn-group"> <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"> <i class="icon-in-button"></i> Add to list <span class="caret"/> </button> <ul class="dropdown-menu"> <li> <a href="#">here</a> </li> <li> <a href="#">new</a> </li> </ul> <button class="btn btn-info"> <i class="icon-in-button"></i> more </button> </div> jsfiddle แสดงปัญหา: http://jsfiddle.net/hhimanshu/sYLRq/4/

157 html  css  twitter-bootstrap 

ฉันพยายามใช้คุณสมบัติ 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 …

157 jquery  css  twitter-bootstrap  youtube  twitter-bootstrap-3