手機單選框(Radio Button)在移動開發(fā)中扮演著重要的角色。在 Bootstrap 中,我們通過簡單的 HTML 標(biāo)記和 CSS 樣式就能輕松地創(chuàng)建手機單選框。下面是一個基本的手機單選框示例,其中用到了一些常用的 CSS 樣式:
<div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 選項一 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> 選項二 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3"> 選項三 </label> </div> <style> .radio input[type="radio"] { margin-right: 5px; } .radio label { display: inline-block; margin-bottom: 5px; font-weight: normal; vertical-align: middle; cursor: pointer; } .radio label:hover { color: #333; } .radio input[type="radio"]:checked + label:before { content: "\f111"; display: inline-block; margin-right: 5px; font: normal normal 14px/1 FontAwesome; text-rendering: auto; -webkit-font-smoothing: antialiased; position: relative; top: -2px; } </style>
在上面的示例中,我們使用了 Bootstrap 提供的 .radio 類來樣式化手機單選框。同時,我們給手機單選框的 label 添加了一些樣式以及 FontAwesome 的字體圖標(biāo),以更好地展示選中狀態(tài)。
總體來說,Bootstrap 的手機單選框樣式非常簡單、易用且美觀,我們只需要按照規(guī)定的 HTML 結(jié)構(gòu)來書寫代碼,并參考官方文檔中的 CSS 樣式即可輕松地創(chuàng)建出優(yōu)美的手機單選框。
上一篇手機號輸入框css
下一篇手機圖片放大 css