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

ฉันใหม่สำหรับ Bootstrap และติดอยู่กับปัญหานี้ ฉันมีช่องป้อนข้อมูลและทันทีที่ฉันป้อนเพียงหนึ่งหลักฟังก์ชันจากonChangeนั้นจะถูกเรียกใช้ แต่ฉันต้องการให้มันถูกเรียกเมื่อฉันกด 'Enter เมื่อป้อนหมายเลขทั้งหมดแล้ว ปัญหาเดียวกันสำหรับฟังก์ชั่นการตรวจสอบ - มันเรียกเร็วเกินไป var inputProcent = React.CreateElement(bootstrap.Input, {type: "text", //bsStyle: this.validationInputFactor(), placeholder: this.initialFactor, className: "input-block-level", onChange: this.handleInput, block: true, addonBefore: '%', ref:'input', hasFeedback: true });

204 javascript  twitter-bootstrap  reactjs 

ฉันกำลังทำงานบนเว็บไซต์โดยใช้ bootstrap โดยทั่วไปฉันต้องการที่จะใช้เป็นกิริยาช่วยในหน้าแรกเรียกโดยปุ่มในหน่วยฮีโร่ รหัสปุ่ม: <button type="button" class="btn btn-warning btn-large" data-toggle="modal" data-target="#myModal">Open Modal</button> รหัสโมดัล: <div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">In Costruzione</h3> </div> <div class="modal-body"> <p>Test Modal: Bootstrap</p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Chiudi</button> <button class="btn btn-warning">Salva</button> </div> </div> …

203 twitter-bootstrap  modal-dialog 

มีวิธีใดที่จะเพิ่มจุดที่ bootstrap navbar 3 ยุบ (เช่นเพื่อให้มันยุบลงในแบบหล่นลงบนแท็บเล็ตแนวตั้ง)? สองสิ่งนี้ใช้ได้กับ bootstrap 2 แต่ไม่ใช่ตอนนี้! จะเปลี่ยนเกณฑ์การยุบ navbar โดยใช้ Twitter bootstrap-responsive ได้อย่างไร เปลี่ยนจุดพักการตอบสนอง navbar ดีฟอลต์

202 twitter-bootstrap  twitter-bootstrap-3  navbar 

อะไรคือวิธีที่ดีที่สุดในการออกแบบฟอร์มที่มีลักษณะเช่นนี้ (โปรดดูลิงค์ด้านล่าง) ใน twitter bootstrap โดยไม่มีคลาสแบบโฮมเมด เป็นไปได้หรือไม่ที่จะตั้งค่า form-inline ภายในภายใน form-horizontal ดังตัวอย่างด้านล่าง:

199 html  forms  twitter-bootstrap 

ฉันต้องการ 1 ภาพขนาดใหญ่ขึ้นด้วย 4 ภาพขนาดเล็กในรูปแบบ 2x2 เช่นนี้: ความคิดแรกของฉันคือการบ้านทุกอย่างในแถวเดียว จากนั้นสร้างสองคอลัมน์และในคอลัมน์ที่สองให้สร้างสองแถวและสองคอลัมน์เพื่อสร้างเอฟเฟกต์ 1x1 และ 2x2 อย่างไรก็ตามดูเหมือนจะเป็นไปไม่ได้หรือฉันแค่ทำไม่ถูกต้อง?

196 css  html  twitter-bootstrap  grid  grid-system 

ฉันเริ่มใช้ Bootstrap เพื่อให้ได้การออกแบบเพจที่ดีโดยไม่ต้องใช้ GWT (แบ็กเอนด์ทำด้วยภาษาจาวา) สำหรับหน้าจอเข้าสู่ระบบของฉันฉันคัดลอกตัวอย่างนี้ ตอนนี้ฉันต้องการทำเครื่องหมายข้อผิดพลาดตัวอย่างเช่นชื่อผู้ใช้นั้นว่างเปล่า ดังนั้นฉันสงสัยว่าขั้นตอนใดในกรอบ Bootstrap สำหรับสิ่งนี้ หรืออาจมีตัวอย่างแสดงแบบฟอร์มที่มีข้อผิดพลาด ฉันไม่แน่ใจว่าแนวคิดนี้แสดงข้อความแสดงข้อผิดพลาดภายในองค์ประกอบอินพุตด้วยสีแดงหรือแสดงใต้องค์ประกอบอินพุตหรืออาจมีป๊อปอัปหรือไม่

194 twitter-bootstrap 

ฉันกำลังออกแบบหน้าโดยใช้ Bootstrap 3 ฉันพยายามใช้ popover กับplacement: rightองค์ประกอบการป้อนข้อมูล Bootstrap ใหม่ช่วยให้มั่นใจได้ว่าถ้าคุณใช้form-controlคุณจะมีองค์ประกอบอินพุตแบบเต็มความกว้าง รหัส HTML มีลักษณะดังนี้: <div class="row"> <div class="col-md-6"> <label for="name">Name:</label> <input id="name" class="form-control" type="text" data-toggle="popover" data-trigger="hover" data-content="My popover content.My popover content.My popover content.My popover content." /> </div> </div> ในความคิดของฉันความกว้างของป๊อปอัปต่ำเกินไปเพราะความกว้างของมันไม่ได้อยู่ใน div ฉันต้องการรูปแบบการป้อนข้อมูลทางด้านซ้ายและป๊อปอัพที่กว้างทางด้านขวา ส่วนใหญ่ฉันกำลังมองหาทางออกที่ฉันไม่ต้องแทนที่ Bootstrap JsFiddle ที่แนบมา ตัวเลือกอินพุตที่สอง ยังไม่ได้ใช้ jsfiddle บ่อยนักดังนั้นไม่รู้ แต่ลองเพิ่มขนาดของกล่องผลลัพธ์เพื่อดูผลลัพธ์บนหน้าจอขนาดเล็กจะไม่เห็นเลย http://jsfiddle.net/Rqx8T/

192 css  twitter-bootstrap  twitter-bootstrap-3  popover 

ใน Twitter bootstrap ดูที่เอกสารคู่มือ modals ฉันไม่สามารถเข้าใจได้ว่ามีวิธีฟังเหตุการณ์ปิดของคำกริยาและเรียกใช้ฟังก์ชันหรือไม่ เช่นให้ใช้คำกริยานี้เป็นตัวอย่าง: <div class="modal-header"> <button type="button" class="close close_link" data-dismiss="modal" aria-hidden="true">×</button> <h3>Modal header</h3> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <a href="#" class="btn close_link" data-dismiss="modal">Close</a> </div> ปุ่ม X ที่ด้านบนและปุ่มปิดที่ด้านล่างสามารถซ่อน / ปิดคำกริยาdata-dismiss="modal"ได้ ดังนั้นฉันสงสัยว่าถ้าฉันสามารถฟังอย่างนั้น? อีกทางหนึ่งฉันสามารถทำได้ด้วยตนเองเช่นนี้ฉันเดา ... $("#salesitems_modal").load(url, data, function() { $(this).modal('show'); $(this).find(".close_link").click(modal_closing); }); คุณคิดอย่างไร?

191 jquery  twitter-bootstrap  modal-dialog 

ไม่มีใครรู้วิธีการเปลี่ยน Bootstrap input:focusหรือไม่ แสงสีน้ำเงินที่ปรากฏขึ้นเมื่อคุณคลิกที่inputเขตข้อมูลหรือไม่

191 html  css  twitter-bootstrap 

ปุ่มของ Twitter BootstrapมีLoading...สถานะที่ดี สิ่งนั้นคือมันเพิ่งแสดงข้อความเช่นLoading...ส่งผ่านdata-loading-textคุณลักษณะเช่นนี้: <button type="button" class="btn btn-primary start" id="btnStartUploads" data-loading-text="@Localization.Uploading"> <i class="icon-upload icon-large"></i> <span>@Localization.StartUpload</span> </button> เมื่อมองไปที่ Font Awesome คุณจะเห็นว่าตอนนี้มีไอคอนสปินเนอร์เคลื่อนไหวแล้ว ฉันพยายามรวมไอคอนสปินเนอร์นั้นเมื่อทำการUploadดำเนินการเช่นนี้: $("#btnStartUploads").button('loading'); $("#btnStartUploads i").removeAttr('class'); $("#btnStartUploads i").addClass('icon-spinner icon-spin icon-large'); แต่สิ่งนี้ไม่มีผลเลยนั่นคือฉันเพิ่งเห็นUploading...ข้อความบนปุ่ม เป็นไปได้หรือไม่ที่จะเพิ่มไอคอนเมื่อปุ่มอยู่ในสถานะกำลังโหลด? ดูเหมือน Bootstrap อย่างใดเพียงแค่เอาไอคอน<i class="icon-upload icon-large"></i>ภายในปุ่มในขณะที่อยู่ในสถานะโหลด นี่คือง่ายๆสาธิตที่แสดงให้เห็นถึงพฤติกรรมที่ผมอธิบายข้างต้น อย่างที่คุณเห็นเมื่อมันเข้าสู่สถานะการโหลดไอคอนจะหายไป มันจะปรากฏขึ้นอีกครั้งหลังจากช่วงเวลา

191 button  twitter-bootstrap  icons  loading  font-awesome 

ฉันติดอยู่กับปัญหา CSS ในขณะที่ใช้ Bootstrap ฉันใช้ Angular JS กับ Angular UI.bootstrap (ซึ่งอาจเป็นส่วนหนึ่งของปัญหา) ฉันกำลังสร้างเว็บไซต์ที่แสดงข้อมูลในตาราง บางครั้งข้อมูลมีวัตถุที่ฉันต้องแสดงในตาราง ดังนั้นฉันต้องการที่จะวางตารางไร้ขอบไว้ในตารางปกติในขณะที่ยังคงอยู่ในบรรทัดการแยกสำหรับตารางที่ไม่มีขอบ แต่ดูเหมือนว่าแม้ว่าฉันบอกว่าจะไม่แสดงเส้นขอบบนโต๊ะโดยเฉพาะมันก็ถูกบังคับ: HTML: <table class='table borderless'> CSS: .borderless table { border-top-style: none; border-left-style: none; border-right-style: none; border-bottom-style: none; } ดังนั้นที่นี่สิ่งที่ฉันต้องการก็แค่พรมแดนด้านใน

191 html  css  twitter-bootstrap 

ฉันใช้ Twitter Bootstrap ในโครงการ เช่นเดียวกับรูปแบบการบูตเริ่มต้นฉันได้เพิ่มบางอย่างของตัวเอง //My styles @media (max-width: 767px) { //CSS here } ฉันใช้ jQuery เพื่อเปลี่ยนลำดับขององค์ประกอบบางอย่างบนหน้าเว็บเมื่อความกว้างของวิวพอร์ตน้อยกว่า 767px $(document).load($(window).bind("resize", checkPosition)); function checkPosition() { if($(window).width() < 767) { $("#body-container .main-content").remove().insertBefore($("#body-container .left-sidebar")); } else { $("#body-container .main-content").remove().insertAfter($("#body-container .left-sidebar")); } } ปัญหาที่ฉันมีคือความกว้างที่คำนวณโดย$(window).width()และความกว้างที่คำนวณโดย CSS ดูเหมือนจะไม่เหมือนกัน เมื่อ$(window).width()ส่งคืน 767 css จะคำนวณความกว้างวิวพอร์ตเป็น 751 ดังนั้นจึงมีความแตกต่าง 16px มีใครรู้บ้างว่าอะไรทำให้เกิดสิ่งนี้และฉันจะแก้ปัญหาได้อย่างไร มีคนแนะนำว่าความกว้างของแถบเลื่อนไม่ได้ถูกนำมาพิจารณาและใช้$(window).innerWidth() …

186 jquery  css  twitter-bootstrap  media-queries 

สำหรับชีวิตของฉันฉันไม่สามารถรับปุ่ม bootstrap twitter เหล่านี้เพื่อตัดข้อความลงบนหลายบรรทัดพวกเขาดูเหมือนเป็นเช่นนั้น ฉันไม่สามารถโพสต์ภาพได้ดังนั้นนี่คือสิ่งที่กำลังทำ ... [นี่คือ bu] ข้อความตัน ฉันอยากให้มันดูเหมือนว่า [นี้เป็น ] [ข้อความปุ่ม] <div class="col-lg-3"> <!-- FIRST COL --> <div class="panel panel-default"> <div class="panel-body"> <h4>Posted on</h4> <p>22nd September 2013</p> <h4>Tags</h4> <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a> <a href="#" class="btn btn-primary btn-xs col-lg-12" …

186 html  css  twitter-bootstrap  web 

ฉันต้องการให้โอเวอร์เลย์แสดงเหนือโมดัลแรกไม่ใช่ที่ด้านหลัง แสดงตัวอย่างโค้ด $('#openBtn').click(function(){ $('#myModal').modal({show:true}) }); <a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal title</h4> </div><div class="container"></div> <div class="modal-body"> Content for the dialog / modal goes here. <br> <br> <br> <br> <br> <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch …

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

ฉันเคยเห็นคำถามสองสามข้อเกี่ยวกับวิธีการ bootstrap แต่ไม่มีใครเหมือนนี้ดังนั้นฉันจะไป ฉันมีคำกริยาที่เรียกว่า onclick อย่างนั้น ... $(".modal-link").click(function(event){ $("#modal-content").modal('show'); }); สิ่งนี้ทำงานได้ดี แต่เมื่อฉันแสดงโมดอลฉันต้องการที่จะมุ่งเน้นไปที่องค์ประกอบอินพุตแรก ... ในกรณีที่องค์ประกอบอินพุตแรกมี id #photo_name ดังนั้นฉันจึงพยายาม $(".modal-link").click(function(event){ $("#modal-content").modal('show'); $("input#photo_name").focus(); }); แต่นี่ไม่เป็นประโยชน์ ท้ายสุดฉันพยายามผูกไว้กับเหตุการณ์ 'โชว์' แต่ถึงอย่างนั้นอินพุตก็จะไม่โฟกัส ในที่สุดสำหรับการทดสอบเนื่องจากฉันสงสัยว่านี่เป็นเรื่องเกี่ยวกับการโหลด js ฉันใส่ setTimeout เพื่อดูว่าฉันหน่วงเวลาหนึ่งวินาทีโฟกัสจะทำงานหรือไม่และทำงานได้! แต่วิธีนี้เห็นได้ชัดว่าอึ มีวิธีการที่จะมีผลเช่นเดียวกับด้านล่างโดยไม่ใช้ setTimeout หรือไม่? $("#modal-content").on('show', function(event){ window.setTimeout(function(){ $(event.currentTarget).find('input#photo_name').first().focus() }, 0500); });

182 javascript  twitter-bootstrap  modal-dialog