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

ฉันกำลังพยายามติดตั้ง Bootstrap 3.0 บนแอพ Rails ฉันเพิ่งจบบทช่วยสอนของ Michael Hartl และตอนนี้กำลังพยายามสร้างระบบของตัวเองโดยใช้ Bootstrap เวอร์ชันใหม่นี้ แต่ฉันมีคำถามสองสามข้อที่ไม่แน่ใจ รายละเอียดระบบของฉัน: OS X Mountain Lion บน MBP Rails 4.0 รูบี้ 2.0 คำถามที่ฉันมี: อัญมณีใดที่ดีที่สุดที่จะใช้ใน Gemfile ของฉัน? ฉันได้พบพวกเขาสองสามคน ฉันจะนำเข้าไฟล์ custom.css.scssอะไรได้บ้าง ฉันอ่านบางที่ว่ามันแตกต่างจาก 2.3.2 มีอะไรอีกบ้างที่ฉันต้องทำเพื่อให้ Bootstrap ทำงานได้หรือขั้นตอนที่เหลือเหมือนกับขั้นตอนที่ฉันติดตามสำหรับ Bootstrap 2.3.2 หรือไม่ แก้ไข นี่คือสิ่งที่โครงการbootstrap-rail บน GitHubบอกว่าต้องทำก่อน: gem 'anjlab-bootstrap-rails', :require => 'bootstrap-rails', :github => 'anjlab/bootstrap-rails' …

112 ruby-on-rails  ruby  twitter-bootstrap-3 

ฉันเคยลองแล้ว แต่ผิดพลาด นี่คือ css body .modal-ku { width: 750px; } และนี่คือผลลัพธ์ที่ล้มเหลว

112 html  css  twitter-bootstrap-3 

ฉันมีปัญหากับกิริยา ฉันมีปุ่มบนหน้าซึ่งจะสลับโมดอล เมื่อโมดอลปรากฏขึ้นหน้าจะกระโดดขึ้นไปด้านบน ฉันทำทุกอย่างเท่าที่ทำได้เพื่อหาทางแก้ไข / ฯลฯ แต่ฉันหลงทางจริงๆ แก้ไข: ฉันได้ลองด้วย: $('#myModal').modal('show');แต่มันก็มีผลเช่นเดียวกัน

111 javascript  jquery  css  twitter-bootstrap  twitter-bootstrap-3 

นี่คือเอฟเฟกต์ที่ฉันพยายามทำด้วยม้าหมุน Bootstrap 3 แทนที่จะแสดงทีละเฟรม แต่จะแสดง N เฟรมแบบสไลด์ข้างกัน จากนั้นเมื่อคุณเลื่อน (หรือเมื่อสไลด์อัตโนมัติ) ระบบจะเลื่อนกลุ่มของสไลด์เช่นเดียวกับที่ทำ สามารถทำได้ด้วยม้าหมุนของ bootstrap 3 หรือไม่? ฉันหวังว่าฉันจะไม่ต้องไปตามล่าหาปลั๊กอิน jQuery อื่น ...

110 jquery  twitter-bootstrap-3  jquery-plugins  carousel  bootstrap-4 

ฉันกำลังพยายามลดความสูงของ navbar bootstrap 3.0 ซึ่งใช้กับพฤติกรรมคงที่ นี่ฉันกำลังใช้รหัส HTML <div class="tnav"> <div class="navbar navbar-fixed-top" role="banner"> <div class="navbar-inner-sm"> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <nav class="collapse navbar-collapse" role="navigation"> <ul class="nav navbar-nav pull-right"> <li class="active"> <a href="../getting-started">Getting started</a> </li> <li> …

108 twitter-bootstrap  navbar  twitter-bootstrap-3 

ฉันต้องการให้ป้ายกำกับไม่อยู่เหนือช่องป้อนข้อมูล แต่อยู่ทางด้านซ้าย <form method="post" action="" role="form" class="form-inline"> <div class="form-group"> <label for="rg-from">Ab: </label> <input type="text" id="rg-from" name="rg-from" value="" class="form-control"> </div> <div class="form-group"> <label for="rg-to">Bis: </label> <input type="text" id="rg-to" name="rg-to" value="" class="form-control"> </div> <div class="form-group"> <input type="button" value="Clear" class="btn btn-default btn-clear"> <input type="submit" value="Los!" class="btn btn-primary"> </div> </form> รหัสนี้ให้ฉัน: ฉันต้องการที่จะมี:

105 css  twitter-bootstrap-3 

เป็นสิ่งที่tabindexแอตทริบิวต์ใน Bootstrap 3? เอกสารของมันไม่ได้บอกอะไรเกี่ยวกับพวกเขาแม้ว่าพวกเขาจะใช้มันจริงในทุกรูปแบบ ฉันพบสิ่งนี้เกี่ยวกับการใช้งานเท่านั้นซึ่งไม่ได้พูดอะไรมาก คำแนะนำเครื่องมือสำหรับผู้ใช้แป้นพิมพ์และเทคโนโลยีอำนวยความสะดวก สำหรับผู้ใช้ที่ใช้แป้นพิมพ์และในผู้ใช้เทคโนโลยีอำนวยความสะดวกโดยเฉพาะคุณควรเพิ่มคำแนะนำเครื่องมือให้กับองค์ประกอบที่โฟกัสได้ของแป้นพิมพ์เช่นลิงก์การควบคุมแบบฟอร์มหรือองค์ประกอบใด ๆ ที่กำหนดโดยพลการที่มีแอตทริบิวต์ tabindex = "0" และฉันพบว่าฉันไม่สามารถกดescเพื่อซ่อนกิริยาถ้าtabindex-1แอตทริบิวต์ไม่ การปิด Modal หลังจากกดปุ่มesc(ด้วย tabindex) Modal ไม่ปิดหลังจากกดปุ่มesc(ไม่มี tabindex)

105 twitter-bootstrap  twitter-bootstrap-3  bootstrap-modal 

มีปัญหาเกี่ยวกับระบบสาธารณูปโภคที่ตอบสนองต่อใหม่ซ่อน / เรียนมองเห็นได้เมื่อการโยกย้ายไปยังBootstrap 4 ฉันทราบว่า. hidden- คลาสถูกลบออกจาก v3 แล้วและแทนที่ด้วย.hidden-*-up .hidden-*-down. ใช้.hidden-*-up.hidden-*-downคลาสใหม่แต่องค์ประกอบไม่เปลี่ยนเป็นมองเห็น / ซ่อน คิดไม่ออกว่าทำไม <div class="col hidden-xs-down"> <span class="vcard"> … </span> </div> <div class="col hidden-lg-down"> <div class="hidden-sm-down"> … </div> <div class="hidden-xs-down"> … </div> </div> * ไม่มีสิ่งใดซ่อนอยู่ในตัวอย่างนี้โดยไม่คำนึงถึงขนาดหน้าจอ (Safari, โหมดออกแบบตอบสนอง)

104 twitter-bootstrap  twitter-bootstrap-3  hide  hidden  twitter-bootstrap-4 

ฉันเพิ่งเริ่มใช้ Bootstrap และมีเวอร์ชันเก่ากว่า 2.3.2 เวอร์ชัน 3 ได้รับการเผยแพร่แล้ว ฉันเพียงแค่แทนที่ไฟล์ CSS และ Javascript ถ้าฉันต้องการใช้เวอร์ชันล่าสุด

102 twitter-bootstrap  twitter-bootstrap-3 

ฉันเพิ่งไปที่หน้านี้http://www.elmastudio.de/และสงสัยว่าเป็นไปได้หรือไม่ที่จะสร้างการยุบแถบด้านข้างด้านซ้ายด้วย Bootstrap 3 รหัสเพื่อยุบแถบด้านข้างจากด้านบน (โทรศัพท์เท่านั้น): <button type="button" class="navbar-toggle sidebar-toggle" data-toggle="collapse" data-target=".sidebar-ex1-collapse"> <span class="sr-only">Sidebar</span> <span class="glyphicon glyphicon-check"></span> </button> แถบด้านข้างมีคลาส xs ที่ซ่อนอยู่ มันถูกลบออกด้วย js ต่อไปนี้ $('.sidebar-toggle').click(function(){ $('#sidebar').removeClass('hidden-xs'); }); หากคุณคลิกปุ่มจะเป็นการสลับแถบด้านข้างจากด้านบน เป็นการดีที่จะเห็นแถบด้านข้างทำงานเหมือนที่เว็บไซต์ด้านบนแสดง ขอความช่วยเหลือใด ๆ !

102 twitter-bootstrap-3  bootstrap-4  sidebar  collapse 

ฉันต้องการให้เนื้อหาของฉันลื่นไหล แต่เมื่อใช้.container-fluidกับตารางของ Bootstrap ฉันยังคงเห็นช่องว่างภายใน ฉันจะกำจัดช่องว่างภายในได้อย่างไร? ฉันเห็นว่าฉันไม่ได้รับช่องว่าง.rowภายใน แต่ฉันต้องการเพิ่มคอลัมน์และทันทีที่ฉันทำช่องว่างภายในจะกลับมา ฉันต้องการให้สามารถใช้คอลัมน์ได้เต็มความกว้าง ตัวอย่าง: <div class="container-fluid"> <div class="row"> <div class="col-sm-6"> <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> </div> <div class="col-sm-6"> <p>Use this document as a way to quickly …

101 twitter-bootstrap  twitter-bootstrap-3  bootstrap-4 

ฉันรู้ว่าBootstrap 3มีตัวแบ่งแนวนอนที่คุณสามารถวางไว้ในเมนูแบบเลื่อนลงเพื่อแยกลิงก์ดังนี้: <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2"> <li role="presentation" class="dropdown-header">Dropdown header</li> ... <li role="presentation" class="divider"></li> </ul> คำถามของฉันคือมีวิธีใดบ้างที่จะทำได้โดยไม่อยู่ในเมนูแบบเลื่อนลงเช่นใส่ลงในรายการประเภทใด ๆ หรือเมนูที่คล้ายกัน

99 twitter-bootstrap  twitter-bootstrap-3 

ฉันกำลังย้ายธีม Bootstrap ของฉันจาก v2.3.2 เป็น v3.0.0 และสิ่งหนึ่งที่ฉันสังเกตเห็นคือมิติข้อมูลจำนวนมากถูกคำนวณแตกต่างกันเนื่องจากสไตล์ต่อไปนี้ใน bootstrap.css *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ใครช่วยอธิบายได้ไหมว่าทำไม Bootstrap ถึงเปลี่ยนขนาดกล่องขององค์ประกอบทั้งหมดเป็น border-box ฉันสงสัยว่ามันเกี่ยวข้องกับระบบกริดใหม่ที่เป็นเปอร์เซ็นต์ แต่ตัวเลือกด้านบนไม่ได้ใช้กับองค์ประกอบกริดเท่านั้น ดูเหมือน imho ที่รุนแรงไปหน่อย :-) ใครสนใจให้ข้อมูลเชิงลึกบ้าง?

98 css  twitter-bootstrap  twitter-bootstrap-3  boxsizer 

ดังนั้นฉันใช้รหัสนี้เพื่อเปิดหน้าต่างโมดอลอื่นในหน้าต่างโมดอลที่เปิดอยู่ในปัจจุบัน: <a onclick=\"$('#login').modal('hide');$('#lost').modal('show');\" href='#'>Click</a> สิ่งที่เกิดขึ้นคือแถบเลื่อนจะซ้ำกันเหมือน 500 มิลลิวินาที ฉันเดาว่าเพราะกิริยาปัจจุบันยังคงจางหายไป อย่างไรก็ตามมันดูไม่ราบรื่นและพูดติดอ่างมาก ฉันขอขอบคุณข้อเสนอแนะใด ๆ ในการแก้ปัญหานี้ นอกจากนี้วิธีการสร้างสิ่งนี้ในเหตุการณ์ที่ไม่เป็นมืออาชีพหรือไม่? ฉันกำลังทำงานกับ bootstrap เวอร์ชัน 3.0 แก้ไข: ฉันเดาว่ามันจำเป็นที่จะต้องลดเวลาในการเลือนโมดอล เป็นไปได้อย่างไร?

97 javascript  jquery  twitter-bootstrap  modal-dialog  twitter-bootstrap-3 

<div class="container"> <div class="row" style="padding-top: 240px;"> <a href="#" class="btn btn-large btn-primary" rel="popover" data-content="<form><input type="text"/></form>" data-placement="top" data-original-title="Fill in form">Open form</a> </div> </div> JSfiddle ฉันเดาว่าฉันจะเก็บเนื้อหาของฟอร์มไว้ในฟังก์ชั่นจาวาสคริปต์ ... ฉันจะมีแบบฟอร์มภายใน bootstrap popover ได้อย่างไร

95 javascript  jquery  twitter-bootstrap  twitter-bootstrap-3  popover