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

ฉันใช้ bootstrap ของ Twitter ฉันได้ระบุโมดัล <div class="modal hide" id="modal-item"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">x</button> <h3>Update Item</h3> </div> <form action="http://www.website.com/update" method="POST" class="form-horizontal"> <div class="modal-body"> Loading content... </div> <div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal">Close</a> <button class="btn btn-primary" type="submit">Update Item</button> </div> </form> </div> และการเชื่อมโยง <a href="http://www.website.com/item/1" data-target="#modal-item" data-toggle="modal">Edit 1</a> <a href="http://www.website.com/item/2" data-target="#modal-item" …

263 jquery  jquery-plugins  twitter-bootstrap  modal-dialog 

ฉันพยายามสร้างตารางที่มีหัวเรื่องคงที่และเนื้อหาที่เลื่อนได้โดยใช้ตาราง bootstrap 3 น่าเสียดายที่โซลูชันที่ฉันพบไม่สามารถทำงานร่วมกับ bootstrap หรือทำให้สไตล์ยุ่งเหยิง ที่นี่มีตาราง bootstrap ที่เรียบง่าย แต่ด้วยเหตุผลบางอย่างสำหรับฉันไม่ทราบความสูงของร่างกายที่ไม่ใช่ 10px height: 10px !important; overflow: scroll; ตัวอย่าง: <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <table class="table table-striped"> <thead> <tr> <th>Make</th> <th>Model</th> <th>Color</th> <th>Year</th> </tr> </thead> <tbody style="height: 10px !important; overflow: scroll; "> <tr> <td class="filterable-cell">111 Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> …

261 html  css  twitter-bootstrap  html-table 

ฉันจะโกรธที่นี่ ฉันได้รับ HTML ดังต่อไปนี้: <a href="#" rel="tooltip" title="A nice tooltip">test</a> และคำแนะนำเครื่องมือสไตล์ Bootstrap ปฏิเสธที่จะแสดงเพียงคำแนะนำเครื่องมือปกติ ฉันมี bootstrap.css ทำงานได้ดีและฉันสามารถดูชั้นเรียนในนั้น ฉันมีไฟล์ JS ที่เกี่ยวข้องทั้งหมดที่ท้ายไฟล์ HTML ของฉัน: <script src="bootstrap/js/jquery.js"></script> <script src="bootstrap/js/bootstrap-alert.js"></script> <script src="bootstrap/js/bootstrap-modal.js"></script> <script src="bootstrap/js/bootstrap-transition.js"></script> <script src="bootstrap/js/bootstrap-tooltip.js"></script> ฉันได้ดูที่มาของตัวอย่างของ Bootstrap และไม่เห็นสิ่งใดที่เริ่มต้นคำแนะนำเครื่องมือในที่นั้น ดังนั้นฉันเดาว่ามันควรจะใช้ได้หรือฉันขาดสิ่งสำคัญที่นี่ ฉันได้รับ modal และการแจ้งเตือนและสิ่งอื่น ๆ ที่ทำงานได้ดีดังนั้นฉันจึงไม่ได้ปัญญาอ่อนทั้งหมด) ขอบคุณสำหรับความช่วยเหลือใด ๆ !

260 twitter-bootstrap 

ฉันกำลังใช้กล่องโต้ตอบ Mod bootstrap ของ Twitter เมื่อฉันคลิกที่ปุ่มส่งของไดอะล็อก bootstrap modal มันจะส่งคำขอ AJAX ปัญหาของฉันคือฉากหลังกิริยาไม่หายไป กล่องโต้ตอบ Modal หายไปอย่างถูกต้อง แต่แทนที่จะเป็น "modal-Backdrop ใน" ที่สร้างความทึบของหน้าจอให้คงอยู่ ฉันจะทำอย่างไร

260 twitter-bootstrap  modal-dialog 

ฉันกำลังสร้างฟอร์มใน Twitter Bootstrap แต่ฉันมีปัญหากับการกดปุ่มตรงกลางด้านล่างอินพุตในแบบฟอร์ม ฉันได้ลองใช้center-blockชั้นเรียนกับปุ่มแล้ว แต่ไม่ได้ผล ฉันจะแก้ไขได้อย่างไร นี่คือรหัสของฉัน <!-- Button --> <div class="form-group"> <label class="col-md-4 control-label" for="singlebutton"></label> <div class="col-md-4"> <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block"> Next Step! </button> </div> </div>

259 html  css  twitter-bootstrap  button 

การใช้ Bootstrap เป็นกิริยาช่วยฉันได้เห็นariaคุณลักษณะเหล่านี้มากมาย แต่ฉันไม่เคยรู้วิธีการใช้ประโยชน์จากพวกเขา ไม่มีใครรู้ว่าสิ่งที่กรณีที่จะใช้คุณลักษณะเหล่านี้? ฉัน googled— แค่ไม่พบคำตอบที่ตรงไปตรงมา

259 twitter-bootstrap  twitter-bootstrap-3  wai-aria 

ฉันกำลังพยายามสร้างเลย์เอาต์เต็มความสูงสองคอลัมน์ด้วย twitter bootstrap 3 ดูเหมือนว่าtwitter bootstrap 3ไม่รองรับเลย์เอาต์ความสูงเต็ม สิ่งที่ฉันต้องการจะทำ: +-------------------------------------------------+ | Header | +------------+------------------------------------+ | | | | | | |Navigation | Content | | | | | | | | | | | | | | | | | | | +------------+------------------------------------+ หากเนื้อหาเติบโตขึ้น nav ก็ควรเติบโตเช่นกัน ความสูง 100% สำหรับผู้ปกครองทุกคนไม่ทำงานเนื่องจากมีกรณีที่เนื้อหาเป็นหนึ่งบรรทัด ตำแหน่งที่แน่นอนดูเหมือนจะเป็นวิธีที่ผิด display: …

247 html  css  twitter-bootstrap 

ฉันต้องการทำให้ glyphicon โลกใหญ่ขึ้นเพื่อให้ครอบคลุมส่วนใหญ่ของหน้า (เป็นภาพเวกเตอร์) มันไม่ได้อยู่ในปุ่มหรืออะไรเลย มันเป็นเพียงอย่างเดียว มีวิธีทำเช่นนี้หรือไม่? <div class = "jumbotron"> <span class="glyphicon glyphicon-globe"></span> </div>

239 html  css  twitter-bootstrap  glyphicons 

ฉันต้องการแสดงรายการแบบอินไลน์โดยใช้ Bootstrap มีคลาสที่ฉันสามารถเพิ่มจาก Bootstrap เพื่อให้บรรลุนี้

237 twitter-bootstrap 

สมมติว่าฉันสร้างองค์ประกอบ HTML เช่นนี้ <div id="my-div" class="hidden">Hello, TB3</div> <div id="my-div" class="hide">Hello, TB4</div> <div id="my-div" class="d-none">Hello, TB4</div> ฉันจะแสดงและซ่อนองค์ประกอบ HTML นั้นจาก jQuery / Javascript ได้อย่างไร JavaScript: $(function(){ $("#my-div").show(); }); ผลลัพธ์: (กับสิ่งเหล่านี้) ฉันต้องการซ่อนองค์ประกอบด้านบน วิธีที่ง่ายที่สุดในการซ่อนองค์ประกอบโดยใช้ Bootstrap และแสดงโดยใช้ jQuery คืออะไร

235 javascript  jquery  html  css  twitter-bootstrap 

ฉันต้องแก้ไขbootstrap.cssเพื่อให้พอดีกับเว็บไซต์ของฉัน ฉันรู้สึกดีกว่าที่จะสร้างcustom.cssไฟล์แยกต่างหากแทนที่จะแก้ไขbootstrap.cssโดยตรงเหตุผลหนึ่งที่ควรbootstrap.cssได้รับการอัปเดตฉันจะพยายามรวมการแก้ไขทั้งหมดของฉันอีกครั้ง ฉันจะเสียสละเวลาโหลดสำหรับสไตล์เหล่านี้ แต่มันเล็กน้อยสำหรับสไตล์ที่ฉันกำลังเอาชนะ ฉันจะแทนที่bootstrap.cssเพื่อที่ฉันจะลบสไตล์ของสมอ / คลาส? ตัวอย่างเช่นหากฉันต้องการลบกฎการจัดแต่งทรงผมทั้งหมดสำหรับlegend: legend { display: block; width: 100%; padding: 0; margin-bottom: 20px; font-size: 21px; line-height: inherit; color: #333333; border: 0; border-bottom: 1px solid #e5e5e5; } ฉันสามารถลบได้ทั้งหมดbootstrap.cssแต่ถ้าความเข้าใจเกี่ยวกับแนวปฏิบัติที่ดีที่สุดในการเอาชนะ CSS นั้นถูกต้องฉันควรทำอย่างไร เพื่อความชัดเจนฉันต้องการลบสไตล์ของตำนานทั้งหมดและใช้ค่า CSS ของพาเรนต์ ดังนั้นเมื่อรวมคำตอบของปราณาแล้วฉันจะทำสิ่งต่อไปนี้หรือไม่? legend { display: inherit !important; width: inherit !important; padding: inherit !important; margin-bottom: …

234 html  css  twitter-bootstrap 

เราต้องการใช้ bootstrap 4 (4.0.0-alpha.2) ในแอพของเราที่สร้างขึ้นด้วย angular-cli 1.0.0-beta.5 (w / node v6.1.0) หลังจากรับ bootstrap และการขึ้นต่อกันด้วย npm แนวทางแรกของเราประกอบด้วยการเพิ่มในangular-cli-build.js: 'bootstrap/dist/**/*.min.+(js|css)', 'jquery/dist/jquery.min.+(js|map)', 'tether/dist/**/*.min.+(js|css)', และนำเข้าพวกเขาในของเรา index.html <script src="vendor/jquery/dist/jquery.min.js"></script> <script src="vendor/tether/dist/js/tether.min.js"></script> <link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css"> <script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script> สิ่งนี้ใช้ได้ดีกับng serveแต่ทันทีที่เราสร้างบิลด์ด้วยการ-prodขึ้นต่อกันทั้งหมดเหล่านี้หายไปจากdist/vendor(ประหลาดใจ!) เรามีจุดประสงค์ในการจัดการสถานการณ์ดังกล่าว (เช่นการโหลดสคริปต์ bootstrap) ในโครงการที่สร้างด้วย angular-cli อย่างไร เรามีความคิดต่อไปนี้ แต่เราไม่รู้จริงๆว่าจะไปทางไหน ... ใช้ CDN หรือไม่ แต่เราต้องการให้บริการไฟล์เหล่านี้เพื่อรับประกันว่าจะสามารถใช้งานได้ คัดลอกการอ้างอิงไปdist/vendorหลังจากที่เราng build -prod? แต่ดูเหมือนว่าสิ่งที่ควรจะให้ …

234 angular  twitter-bootstrap  angular-cli  ngx-bootstrap 

คำถามที่ 1: อะไรคือจุดประสงค์ของการติดตั้ง Twitter Bootstrap ถึง npm ฉันคิดว่า npm มีความหมายสำหรับโมดูลฝั่งเซิร์ฟเวอร์ มันเร็วกว่าที่จะให้บริการไฟล์ bootstrap ด้วยตัวคุณเองมากกว่าการใช้ CDN หรือไม่? คำถามที่ 2: ถ้าฉันจะติดตั้ง Bootstrap ฉันจะชี้ไปยังไฟล์ bootstrap.js และ bootstrap.css ได้อย่างไร

233 node.js  twitter-bootstrap  express  npm  cdn 

ฉันไม่รู้จักจาวาสคริปต์เลย เอกสารประกอบการบูตบอกว่า โทรหาคำกริยาผ่าน javascript: $ ('# myModal'). modal (ตัวเลือก) ฉันไม่มีเงื่อนงำวิธีเรียกสิ่งนี้ในการโหลดหน้าเว็บ ใช้รหัสที่ให้มาในหน้า bootstrap ฉันสามารถเรียก Modal ในการคลิกองค์ประกอบ แต่ฉันต้องการให้โหลดทันทีในการโหลดหน้า

230 javascript  html  twitter-bootstrap 

ฉันกำลังสร้างเว็บไซต์โดยใช้ Twitter Bootstrap ใหม่ ไซต์ดูดีและทำงานได้ในเบราว์เซอร์ที่จำเป็นทั้งหมดยกเว้น IE8 ใน IE8 ดูเหมือนว่าจะแสดงองค์ประกอบของรุ่นมือถือ แต่ขยายไปทั่วหน้าจอเต็มของเดสก์ท็อปของฉัน ฉันเชื่อว่าปัญหาที่ฉันมีก็คือ Twitter bootstrap นั้นเป็นอุปกรณ์พกพาก่อน ดังนั้นด้วยเหตุผลบางอย่าง IE8 จึงเป็นไปได้สำหรับตัวเลือกนี้ ฉันยังสังเกตเห็นว่าcontainerคลาสดูเหมือนจะไม่ถูกดึงในคุณสมบัติ CSS ความกว้างสูงสุดตามที่ต้องการ ทุกคนสามารถเห็นสิ่งที่ฉันทำผิดได้ไหม <!-- Favicon --> <link rel="shortcut icon" href="/favicon.ico"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <!-- Bootstrap --> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.css" rel="stylesheet"> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"> <script src="/SiteFiles/js/modernizr.js"></script> <!-- CSS --> <link href="/SiteFiles/css/main.css" rel="stylesheet"> <header> <div …

228 html  css  twitter-bootstrap  internet-explorer-8  twitter-bootstrap-3