如何有重點投入的形式引導

我使用的是引導3.0.0，我想使用的重點投入的形式： See here, under Form States.. input focus 如何有重點投入的形式引導

我已經使用這個<input class="form-control" id="focusedInput" type="text" value="This is focused...">把它作爲重點，但我沒有得到那個。文檔說，使用:focus專注，但我不知道如何。

一些代碼bootstrap.css

.form-control { 
    display: block; 
    width: 100%; 
    height: 34px; 
    padding: 6px 12px; 
    font-size: 14px; 
    line-height: 1.428571429; 
    color: #555555; 
    vertical-align: middle; 
    background-color: #ffffff; 
    border: 1px solid #cccccc; 
    border-radius: 4px; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; 
      transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; 
} 

.form-control :focus { 
    border-color: #66afe9; 
    outline: 0; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); 
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); 
}

來源

2013-08-21 Lonely

他們目前還只是一個重點演示。 #focusedInput款式來自docs.css，它僅用於強調集中的外觀。未包含在引導組，但只有在文檔頁面，你可以在下面的屏幕拍攝看到（見：docs.css:1072）：

然後我們必須創建一個CSS類，將有聚焦方式：

.focusedInput { 
    border-color: rgba(82,168,236,.8); 
    outline: 0; 
    outline: thin dotted \9; 
    -moz-box-shadow: 0 0 8px rgba(82,168,236,.6); 
    box-shadow: 0 0 8px rgba(82,168,236,.6) !important; 
}

現在，只有包括HTML輸入元素focusedInput類，你就可以將焦點設置樣式非重點元素。

<input class="form-control focusedInput" type="text" value="This is focused...">

參見JSFIDDLE

:focus選擇器被用於設置樣式輸入的聚焦狀態。

JSFIDDLE

For example：

#focusedInput:focus { 
    background: red; 
}

這將設置紅色背景當你專注的投入。

來源

2013-08-21 05:48:32

是的，工作正常，但我認爲根據文件，我不需要添加任何東西。我只是想知道如何使用：專注。 – Lonely

@Lonely請參閱編輯。 –

我無法清楚地說明我的問題。正如我們所看到的輸入表單的代碼是重點也在表格中控制類。如何在上面提到的代碼中使用這個焦點。我試過使用，但沒有得到我想要的 – Lonely

您可以通過將輸入標籤內的自動對焦屬性設置爲自動對焦來實現自己想要的功能。鍵盤輸入將集中在輸入區域，並會發光。

<input class="form-control" id="focusedInput" type="text" autofocus="autofocus" value="This is focused...">

來源

2013-11-16 04:31:26 user1438230

如果在模態中使用，則僅在第一次打開模式時才起作用 –

不適用於模態=（引導程序v4 – fdrv

$("#inputID").focus(); // will bring focus 
$("#inputID").addClass("focusedInput"); // will give it the bootstrapped focus style 
scrollTo("#confirm_deletion"); // actually make browser go to that input 

/* scroll to the given element section of the page */ 
function scrollTo(element) 
{ 
    $('html, body').animate({scrollTop: $(element).offset().top-60}, 500); 
}

來源

2013-11-18 12:12:19 canoodle

你只需要刪除之間的空間：在.FORM控制級的重點選擇。

.form-control:focus { 
    border-color: #66afe9; 
    outline: 0; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); 
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); 
}

JS FIDDLE

來源

2014-03-28 04:20:08 giovannif23

我有同樣的問題，所以我試圖尋找引導的CSS。我已經下載了靴子手錶的一個主題，並將其替換爲引導程序，以便在我的情況下可能是問題。無論如何，我發現form-control:focus有outline:0，這意味着它禁用了焦點效果。我刪除了該行，並像魅力一樣工作。如果任何人有同樣的問題，請嘗試它。希望它有幫助。

來源

2016-07-03 09:37:09 Nickos

如何有重點投入的形式引導

回答

相關問題