Форма
Основная форма
Для ввода, Textarea и выбираю в форме, я обычно добавляю класс «контроль формы», который устанавливает ширину элемента по умолчанию на 100% (не абсолютная, такая как встроенная форма, упомянутая ниже). И каждый элемент (включая метку и элемент, который будет введен) будет добавлен с «группой формы». У него есть только один стиль. маржинальный дни: 15px.
<form action = ""> <div> <label for = ""> username: </label> <input type = "text"/> </div> <div> <label for = ""> пароль: </label> <input type = "пароль"/> </div> </form>
Встроенная форма
Добавив «форм-ввод» к самому внешнему элементу (родительский элемент форм-группы). Указывает, что все элементы формы отображаются на одной линии (с достаточной шириной). И ".form-inline .form-group" отображается как встроенный блок. И ширина ".form-inline .form-Control" является авто. Это гарантирует, что он отображается в одной строке.
<form action = ""> <div> <label for = ""> username: </label> <input type = "text"/> </div> <div> <label for = ""> пароль: </label> <input type = "пароль"/> </div> </form>
Горизонтальная форма
В отличие от нормальных и встроенных форм. Если вы хотите отобразить метку и элементы входной формы на одной линии, вам нужно использовать «Форм-горизонтальный». Этот вид совместной «группы форм» эквивалентен «строке» в системе сетки. Таким образом, его подклассы имеют «col-md-*», а «контрольная маркировка» ярлыка-. ». Если вы не добавите это, этикетка и вход будут казаться несовместимыми.
<form action = ""> <div> <label for = ""> username: </label> <div> <input type = "text"/> </div> </div> <div> <label для = ""> пароль: </label> <div> <input type = "Пароль"/> </div> </div> </form>
Размер формы
Те, которые управляют размером входа,-«вход-SM» и «Input-LG», которые делают входную коробку ввода меньше или больше, чем обычно. Соответствует этому размер текста на этикетке. Вам нужно добавить «форм-группа-SM» и «форм-группа-lg» в родительскую «группу форм» одновременно. Как в поле «Входной входной» демонстрации выше.
Входная коробка
В HTML5 тип тега ввода поддерживает больше типов. Существуют текст, пароль, дата, дата, дата, дата, месяц, время, неделя, номер, электронная почта, URL, поиск, тел и цвет. Правильный стиль может отображаться только на метке <pint>, если назначен определенный тип. Некоторые элементы могут показывать только свое влияние на ваш телефон.
Выбрать раскрывающуюся поле
Похоже на поле ввода. Он просто изменил вход, чтобы выбрать и добавить класс «Контроль формы».
<form action = ""> <div> <label for = ""> Пожалуйста, выберите: </label> <div> <select name = "" id = "> <option value ="> html </option> <vitue value = ""> css </option> <опция value = "> javascript </option> <portion </vatue ="> java </option> </vatur vature = " value = ""> nodejs </option> </select> </div> </form>
col-md-pull-*-левое смещение.
Текстовое поле
Похоже на вышеизложенное.
<form action = ""> <div> <label for = ""> textarea: </label> <div> <textarea name = "" id = "" row = "3"> hello </textarea> </div> </div> </form>
Множественные и радио коробки
Чтобы радио и флажок появились в одной строке и выровнялись с этикеткой. Bootstrap предлагает два варианта. Один:
<div> <label for = ""> <input type = "radio" name = "sex"/> male <input type = "radio" name = "sex"/> wome <input type = "radio" name = "sex"/> confidential </label> <label for = ""> <input = "fackbox"/> html <input = "checkbox/> css <> <input ="/> html <input = " type = "fackbox"/> javascript </label> </div>
Сама этикетка является встроенным блоком. Но .radio,. Сам мексбокс заблокирован.
Так что оберните несколько радиоприемников или флажок с одной меткой, которая будет выглядеть непрофессиональной (ха -ха). Кроме того, многие также очень неприглядны. Итак, второй способ написания здесь.
<div><label for=""><input type="radio" name="sex"/>Male</label><label for=""><input type="radio" name="sex"/>Female</label><label for=""><input type="radio" name="sex"/>Confidential</label><br /><label for=""><input type="checkbox" /> Html </label> <label for = ""> <input type = "fackbox"/> css </label> <label for = ""> <input type = "fackbox"/> javascript </label> </div>
Проверка формы
Has-Success: успех, зеленый.
Уничтожение: предупреждение, желтый.
Has-error: ошибка, красный.
Просто добавьте соответствующий стиль в «группу форм». Для лучшей проверки мы можем продолжать добавлять «обратную связь». Затем добавьте «контроль формы-обратной связи» к уровню элемента после ввода («контроль формы»). Семантика ясная и ясная. Код заключается в следующем:
<form action=""><div><label for="">Username: </label><div><input type="text" /><span></span></div></div><div><label for="">Password: </label><div><input type="text" /><span></span></div></div><div><label for="">Email: </label> <div> <input type = "text"/> <pan> </span> </span> </form>
Кнопка
Мультинологический стиль и стиль кнопки
В начальной загрузке есть различные кнопки. Кнопка, A, вход, пролет, Div и т. Д. Все могут стать кнопками, если у нее есть «Btn Btn-стиль». Тем не менее, для лучшей совместимости и читаемости лучше не использовать таким образом, попробуйте использовать теги кнопок.
<Tood> кнопка </button> <tood> <tood> кнопка </button> <bute> кнопка </button> <bute> кнопка </button> <tood> кнопка </button> <bute> кнопка </button> <!-btn-block делает кнопку эксклюзивным на одну. row-> <Tood> кнопка </button> <bute> кнопка </button> <bute> кнопка </button> <tood> кнопка </button> <tood> кнопка </button> <bute> кнопка </button> <tood> кнопка </button> <tood> кнопка </button> <tutdio> кнопка </button> <tood> кнопка </button>
Размер кнопки
Как упомянуто выше, используйте «BTN-XS», «BTN-SM», «Btn-LG», чтобы установить размер кнопки.
Статус кнопки
Как упоминалось выше, эффективные из них «активны» и «фокусируют».
картина
IMG-чувствительный: отзывчивые картинки, в основном нацеленные на адаптивный дизайн.
IMG-раунд: округлые углы.
IMG-Circle: круглый.
Img-Thumbnail: миниатюра, представленная границей, добавленной во внешний слой.
икона
Bootstart имеет много встроенных небольших значков. Метод использования выглядит следующим образом. Фактически, он использовался в вышеупомянутом «обратной обратной связи формы». Среди них «глификон» является обязательным.
<pran> </span>
Группа ввода
Группа ввода-это «входная группа». Нам нужно добавить несколько суффиксов (таких как суффиксы по электронной почте) и префиксы (символы денег ￥, $ и т. Д.), Чтобы использовать «входной группу-аддон» или «входной группу-BTN». Простая и ясная семантика. следующее:
<!-Электронная почта-> <div> <input type = "text" /> span>@gmail.com</span></div><!-Currence --> didiv> span> $</span><input type = "text"> <pan> .00 </span> </div> <!-Single-> <div> <pan> <prop> <prope>. type = "text"/> </div> <!-множественный выбор-> <div> <pan> <input type = "fackbox"/> </span> <input type = "text"/> </div> <!-Taobao Box Group-> <div> <div> <futne data-togle = "Выпадает"> Пожалуйста, выберите <pan> </button> <ul> href = "javaScript: void (0)"> Baby </a> </li> <li> <a href = "javascript: void (0)"> Shop </a> </li> </ul> </div> <вход
краткое содержание
«Форма-горизонтальный» и «сформулированный»-это самые внешние этикетки группы формы.
Группа формы принимает «группу форм» как родительский элемент. Подобные «входные группы» и «пуговица-группа», которые могут использоваться в будущем. Все они могут быть размером.
"Form-group-lg", "input-lg", "input-group-lg", "btn-lg" и т. Д.
Стиль проверки имеет «has-error», «has-success», «имеет падку». «Получите обратную связь» может быть добавлена в тот же элемент. Чтобы сделать проверку более полной.
Есть много стилей для кнопок и размеров.
Четыре общих стиля для картин.
Bootstarp имеет много встроенных значков.
Группа ввода начинается с «Входной группы», а дочерние элементы включают «входной группу-аддон», «Входной группу-BTN» и т. Д.
Выше приведено полная коллекция форм в начальной загрузке, представленная вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!