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

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

12
จะทำให้เมนูย่อยของ twitter bootstrap เปิดทางด้านซ้ายได้อย่างไร?
ฉันพยายามสร้างเมนูย่อยของ twitter bootstrap ในเมนูแบบเลื่อนลง แต่ฉันมีปัญหา: ฉันมีเมนูแบบเลื่อนลงที่มุมขวาบนของหน้าและเมนูนั้นมีเมนูย่อยอีกหนึ่งเมนู อย่างไรก็ตามเมื่อเมนูย่อยเปิดขึ้น - จะไม่พอดีกับหน้าต่างและไปทางขวามากเกินไปผู้ใช้จะเห็นเฉพาะตัวอักษรตัวแรกเท่านั้น จะทำอย่างไรให้เมนูย่อยไม่เปิดไปทางขวา แต่ไปทางซ้าย?
10
วิธีสร้างปุ่มสลับใน Bootstrap
เดิมทีฉันสร้างเว็บแอปใน HTML, CSS และ JavaScript จากนั้นก็ขอให้สร้างอีกครั้งใน Bootstrap ด้วย ฉันทำได้ดีทั้งหมด แต่ฉันมีปุ่มสลับในเว็บแอปที่เปลี่ยนกลับเป็นปุ่มวิทยุ (ช่องทำเครื่องหมายเดิม) แทนปุ่มสลับที่ฉันมีในตอนแรก รหัสสำหรับปุ่มคือ: <label> Notifications <span class='toggle'> <input type='radio' class='notifications' name='notifications' id='notifications' /> </span> </li> <label> Preview <span class='toggle'> <input type='radio' class='preview' name='preview' id='preview' /> </span> </li> และไฟล์ JavaScript และ CSS ที่เพจ HTML เชื่อมโยง ได้แก่ : <script src = 'jqtouch.js'></script> …
24
วิธีซ่อนรายการแบบเลื่อนลงของ Twitter Bootstrap
สิ่งนี้เริ่มน่ารำคาญ - เมื่อฉันคลิกที่รายการในดรอปดาวน์ Bootstrap รายการแบบเลื่อนลงจะไม่ปิด ฉันได้ตั้งค่าให้เปิดไลท์บ็อกซ์ Facebox เมื่อคุณคลิกรายการแบบเลื่อนลง แต่เกิดปัญหาขึ้น สิ่งที่ฉันได้ลอง เมื่อรายการถูกคลิกฉันลองทำสิ่งนี้: $('.dropdown.open').removeClass('open'); $('.dropdown-menu').hide(); มันซ่อนมันไว้ แต่แล้วด้วยเหตุผลบางอย่างมันจะไม่เปิดขึ้นอีกครั้ง อย่างที่คุณเห็นฉันต้องการให้เมนูแบบเลื่อนลงปิดจริงๆเพราะมันดูเส็งเคร็งเมื่อเปิดอยู่ (ส่วนใหญ่เป็นเพราะz-indexดรอปดาวน์สูงกว่าโอเวอร์เลย์กล่องโมดอลของ Facebox ทำไมฉันไม่ใช้กล่องโมดอลในตัวของ Bootstrap หากคุณสงสัยว่าทำไมฉันไม่ใช้กล่องโมดอลที่ดูดีใน Bootstrapนั่นเป็นเพราะ ไม่มีวิธีโหลดเนื้อหาลงใน AJAX คุณต้องพิมพ์ HTML ทุกครั้งสำหรับโมดอล ด้วย Facebox คุณสามารถทำได้ง่ายๆ:$.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&id=1234567'}); มันใช้ภาพเคลื่อนไหว CSS3 เพื่อทำให้เคลื่อนไหว (ซึ่งดูดีมาก) แต่ในเบราว์เซอร์ที่ไม่ใช่ CSS3 จะแสดงให้เห็นซึ่งดูไม่ดีเท่าไหร่ Facebox ใช้ JavaScript เพื่อทำให้เลือนหายไปจึงทำงานได้ในทุกเบราว์เซอร์
19
ปัญหา Bootstrap Modal - การเลื่อนถูกปิดใช้งาน
ฉันมีโมดอลและภายในโมดอลนั้นมีดรอปดาวน์ที่แสดงเนื้อหาที่ซ่อนอยู่ขนาดใหญ่ซึ่งใช้งานได้ ตอนนี้เมื่อคุณเปิดโมดอลถัดไปวางซ้อนกันด้านบนของโมดอลแรกและปิดการเลื่อนบนโมดอลด้านล่างจะปิดใช้งาน ฉันได้สร้างตัวอย่างฉบับเต็มรวมถึงขั้นตอนในการจำลองปัญหาที่ฉันกำลังเผชิญอยู่ คุณสามารถดูได้ที่นี่ <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> <title></title> <style> </style> </head> <body> <input type="button" data-toggle="modal" data-target="#modal_1" class="btn btn-lg btn-primary" value="Open Modal 1" > <div class="modal fade" id="modal_1"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">First …
4
Twitter bootstrap ซ่อนองค์ประกอบบนอุปกรณ์ขนาดเล็ก
ฉันมีรหัสนี้: <footer class="row"> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 1</li> <li>Text 2</li> <li>Text 3</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 4</li> <li>Text 5</li> <li>Text 6</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 7</li> <li>Text 8</li> <li>Text 9</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 10</li> <li>Text 11</li> <li>Text 12</li> </ul> …
9
มีใครได้รับอีเมล HTML ที่ทำงานร่วมกับ Twitter Bootstrap หรือไม่?
ฉันใช้premailer-rails3อัญมณีที่ดึงสไตล์อินไลน์สำหรับอีเมล html และฉันพยายามทำให้มันทำงานร่วมกับ Twitter bootstrap https://github.com/fphilipe/premailer-rails3 ดูเหมือนว่าบางสไตล์จะเข้ามาอย่างถูกต้อง แต่ไม่ใช่ทั้งหมด ฉันสงสัยว่าใครมีตัวอย่างการทำงานที่ดีในการรับ Twitter Bootstrap css (แก้ไขหรือไม่) ลงในอีเมล html ขอบคุณ!
7
จะใส่ลิงค์บนปุ่มด้วย bootstrap ได้อย่างไร?
จะใส่ลิงค์บนปุ่มที่มี bootstrap ได้อย่างไร? มี 4 วิธีในเอกสาร bootstrap: <a href="#" class="btn btn-info" role="button">Link Button</a> <button type="button" class="btn btn-info">Button</button> <input type="button" class="btn btn-info" value="Input Button"> <input type="submit" class="btn btn-info" value="Submit Button"> อันแรกใช้ไม่ได้สำหรับฉันไม่มีปุ่มใด ๆ แสดงแค่ข้อความที่มีลิงก์รู้สึกว่าเป็นธีมที่ฉันใช้ อันที่สองแสดงปุ่มที่ฉันต้องการ แต่รหัสอะไรทำให้ปุ่มเชื่อมโยงไปยังหน้าอื่นเมื่อคลิก? ไชโย
8
Bootstrap 4 ฉันจะจัดตำแหน่งปุ่มตรงกลางได้อย่างไร
<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-8"> <div v-for="job in job"> <div class="text-center"> <h1>{{ job.job_title }}</h1> <p><strong>Google Inc. </strong> - {{ job.location }}</p> <h2><u>Job Description</u></h2> </div> <p v-html="desc"></p> <p class="text-center">Posted: {{ formatDate(job.date_created) }}</p> <button v-on:click="applyResume()" id="apply-btn" class="btn btn-primary">{{ buttonText }}</button> </div> </div> <div class="hidden-sm-down col-md-4"></div> </div> </div> คิดไม่ออกว่าจะวางปุ่มนี้ไว้ตรงกลางอย่างไร ใน …
10
วิธีรับ twitter bootstrap modal เพื่อปิด (หลังจากเปิดตัวครั้งแรก)
ฉันเป็น noob มากดังนั้นฉันคิดว่าฉันกำลังดูแลบางสิ่งบางอย่าง (อาจชัดเจน) ด้วยรูปแบบ twitter bootstrap สิ่งที่ฉันกำลังพยายามทำคือสร้างโมดอลเพื่อเปิดใช้งานบนมือถือเท่านั้น ใช้งานได้ดีกับการเพิ่มคลาส .visible-phone บน modal div จนถึงตอนนี้ดีมาก แต่ฉันต้องการให้มันใช้งานได้หมายความว่าคุณสามารถปิดได้ด้วยปุ่ม X และฉันไม่สามารถทำให้ปุ่มทำงานได้ <div class="modal visible-phone" id="myModal"> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button> <h3>text introductory<br>want to navigate to...</h3> </div> <div class="modal-body"> <ul class="nav"> <li> ... list of links here </li> </ul> </div> </div> ที่ด้านล่างของ html ฉันใส่ jquery.js …
26
Bootstrap navbar Active State ไม่ทำงาน
ฉันมี bootstrap v3.0 ฉันใช้class="active"บนของฉันnavbarและมันไม่เปลี่ยนเมื่อฉันกดรายการเมนู ฉันรู้วิธีทำjQueryและสร้างฟังก์ชันคลิก แต่ฉันคิดว่าควรรวมฟังก์ชันนี้ไว้ใน bootstrap หรือไม่ บางทีมันอาจเป็นปัญหาของ JavaScript? นี่คือส่วนหัวของฉันที่มีไฟล์ js / css / bootstrap ที่ฉันรวมไว้: <!-- Bootstrap CSS --> <link rel="stylesheet" href= "/bootstrap/css/bootstrap.css" /> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /> <link rel="stylesheet" href= "/stylesheets/styles.css" /> <!--jQuery --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <!-- Bootstrap JS --> <script src="/bootstrap/js/bootstrap.min.js"></script> <script src="/bootstrap/js/bootstrap-collapse.js"></script> <script …
5
ฟองแบบเลื่อนลง bootstrap จัดชิดขวา (ไม่กดขวา)
ฉันมีรถเข็นในเมนูด้านบนของฉันโดยใช้push-rightและปัญหาของฉันคือฟองแบบเลื่อนลงหลุดออกจากหน้า ฉันกำลังพยายามจัดแนวฟองให้ถูกต้องเพื่อให้ตรงกับ 'คลิก' แบบนี้ HTML: <div class="cart pull-right"> <ul class="nav"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">CLICK</a> <div class="dropdown-menu"> STUFF </div> </li> </ul> </div>
3
แถว Bootstrap ที่มีคอลัมน์ที่มีความสูงต่างกัน
ขณะนี้ฉันมีสิ่งที่ต้องการ: <div class="row"> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> </div> ตอนนี้สมมติว่าcontentเป็นกล่องที่มีความสูงต่างกันโดยมีความกว้างเท่ากันทั้งหมด - ฉันจะรักษา "เค้าโครงตามตาราง" เดียวกันได้อย่างไรและยังมีกล่องทั้งหมดเรียงกันอยู่ใต้กันและกันแทนที่จะเป็นเส้นที่สมบูรณ์แบบ ปัจจุบัน TWBS จะวางบรรทัดถัดไปของcol-md-4องค์ประกอบที่ยาวที่สุดในแถวที่สามก่อนหน้าดังนั้นแต่ละแถวของรายการจึงถูกจัดวางอย่างสมบูรณ์แบบในขณะที่สิ่งนี้ยอดเยี่ยมฉันต้องการให้แต่ละรายการอยู่ภายใต้องค์ประกอบสุดท้ายโดยตรง (เลย์เอาต์ "ก่ออิฐ" )
10
วิธีปิดการแจ้งเตือนโดยอัตโนมัติโดยใช้ Twitter Bootstrap
ฉันใช้เฟรมเวิร์ก CSS bootstrap ของ twitter (ซึ่งยอดเยี่ยมมาก) สำหรับบางข้อความถึงผู้ใช้ฉันกำลังแสดงข้อความโดยใช้การแจ้งเตือน Javascript JS และ CSS สำหรับผู้ที่สนใจสามารถดูได้ที่นี่: http://getbootstrap.com/javascript/#alerts ปัญหาของฉันคือสิ่งนี้ หลังจากที่ฉันแสดงการแจ้งเตือนให้กับผู้ใช้ฉันต้องการให้มันหายไปหลังจากช่วงเวลาหนึ่ง จากเอกสารของ twitter และรหัสที่ฉันได้ตรวจสอบดูเหมือนว่าสิ่งนี้ไม่ได้ถูกอบใน: คำถามแรกของฉันคือคำขอเพื่อยืนยันว่าสิ่งนี้ไม่ได้ถูกรวมเข้ากับ Bootstrap ประการที่สองฉันจะบรรลุพฤติกรรมนี้ได้อย่างไร?
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.