Прежде всего, я хотел бы поблагодарить всех моих друзей за поддержку. Я буду продолжать обновлять свою учебную резюме на начальной загрузке. Если что -то не так с написанием, пожалуйста, поправьте меня. Что касается предыдущей статьи, очень важна фиксированная макет и потоковая макет. Если вам это не ясно, вы можете взглянуть на то, что я написал: Bootstrap. Примечания: дизайн стиля CSS (1)
На этот раз давайте посмотрим на некоторые конкретные и ключевые классы о стилях в начальной загрузке и о том, как использовать эти классы, различия между классами и некоторыми связанными классами, которые объясняются при их перечислении.
1. Форма
1. Класс формирования формы: ширина тегов <pint> <lecept> <Textarea>, содержащих этот класс, станет шириной: 100%, а в форме элемент управления обычно включается в группу формы с меткой метки.
<form rol = "form"> <!-All Input, Textarea, выберите элементы с набором классов-контроля формы, будут не выполнены по ширине: 100%-> <div>-формирование: вообще говоря, этикетки и пространственная упаковка используются в группе форм <label для = "Примерное средство/huptemail"> hipplyshile </label> <input = "employ in intail =" divindulate ">" Divindulater ">" Divindulater ">" DivIndUteLater "divIndUTALTER"> «DivIndUTELTER» </LABEL> <DivIndUTELTER <> DivIndUTALTER '> «DivIndUTELTER». <label for = "exampleInputEmail"> Имя электронной почты </label> <TextARea> 11111 </textARea> </div> <div> <label для = "select"> select form </select> <seam> <опция> 111 </option> <putain> 222 </orpation> </select> </div> </form> </option> <puta> 222 </option> </select> </div> </form>
Согласно вышеуказанному коду, мы можем посмотреть на него один за другим. Добавить класс формы (поместите элемент управления в одну строку) | Форма-горизонтальный класс (этикетка находится слева, а элемент управления находится справа), который использует помощь метки.
<!-Форма-встроенный класс делает форму горизонтально присутствующей-> <FORD>-вторично, есть проверка, радио-вход и т. Д. <div>@</div> </div> </div> <button Type = "Opport"> Search </button> </form>
Эффекты следующие:
Если не добавлена, кнопка будет сжата к следующей строке. Здесь больше нет фотографий, вы можете вставить код и проверить его самостоятельно.
<!--Horily arranged form control-label: means that the text is right-aligned--><form > <div> <label for="inputEmail">Email:</label> <div> <input type="email" id="inputEmail" placeholder="email"> </div> </div> <div> <label for="inputPassword">Password:</label> <div> <input type="password" id = "inputPassword" Placeholder = "password"> </div> </div> </div> </form>
Эффекты следующие:
( ПРИМЕЧАНИЕ: Входное текстовое поле здесь должно учитывать 5/6, я настроил его ширину до 20%)
Здесь, что касается форм-горизонтальной, его следует проводить в сочетании с системой сетки Bootstrap.
Использование имени класса «Form-Horizontal» в элементе <form> имеет следующие функции:
1: Установите значения прокладки и маржи управления формой. Приведенный выше код можно увидеть в консоли отладки, левая накладка: 50px.
2: Измените выражение «группы форм», аналогично «строку» системы сетки.
2. Функция метки
<label for = "hello1"> hello </label> <input type = "text" id = "hello"> <br> --- Снимковое ореол генерируется <label for = "1111"> hello </label> <input type = "text" id = "jiang"> <br> --- Идентификатор не соответствует ему, нет ответа. Только когда мышь будет помещен на контроль, будет синий ореол
На основе приведенного выше кода см.: Для атрибута в метке должен соответствовать идентификатор в элементе управления. Функция: Убедитесь, что когда мышь помещается на метку, соответствующий элемент управления будет создавать синий ореол.
3. Роль роли
Вы считаете это странным, зачем вам добавить роль при написании форм или некоторых элементов управления?
Функция: Убедитесь, что программное обеспечение для чтения экрана может быть распознано. Программное обеспечение для чтения экрана - это программное обеспечение, которое помогает умственно отсталым людям получить доступ к Интернету. Он передает картинки, текст и т. Д. Мысленно отсталым людям в форме голоса. Следовательно, чтобы обеспечить распознавание программного обеспечения для чтения экрана, обычно нет семантических тегов или тегов с специальными функциями, которые должны быть записаны на нем. например:
<a href = "#" rol = "button"> Link </a> <!-Если ссылка A используется в качестве кнопки и используется для запуска определенных функций на текущей странице, а не подключение к другим страницам или остальной части текущей страницы, обязательно установите кнопку ROLE = "-> Первоначально, тег A представляет ссылку, но она используется здесь как кнопка. Программное обеспечение для чтения экрана не может его распознавать, поэтому необходимо добавить кнопку ROLE = "", чтобы программное обеспечение для чтения экрана знала, что это кнопка.
4. В чем разница между этикеткой, арией, меченной арией?
<div> <input type = "text" id = "idcard" aria-label = "id card"> <p> Пример Block-level </p>-help-block: текст, используемый для приглашения объяснения </div> <div> <label for = "idcard"> id card </label> <input = text "id =" idcard "> <p> block-level </psure> </div> </p> div> </p> div> </p Div> div> </p Div> div> </p Div> div> </p div> div> </psure </pabel> </input tyx = id =" idcard "> <p>.
Эффекты следующие:
У первого нет слова «идентификационная карта», оба из которых предназначены для удобства программного обеспечения для чтения экрана для идентификации. Только ария-маршрута скрыта.
Давайте посмотрим на то, как использовать ARIA, меченную. Обычно, когда текст метки уже существует в определенном элементе, используйте ARIA, и его значение является идентификатором всех элементов чтения. Давайте посмотрим на следующие подводные лодки:
<div> <button type = "button" id = "dropdownmenu1" data-toggle = "выпадающий"> выберите следующие параметры <pran> </span> </button> <ul role = "menu" aria-labelledby = "dropdownmenu1"> <li role = "presentation"> <a role = "menuitem" = "-1" href = "#"#> ROLE = "Presentation"> <a ROLE = "menuitem" tabIndex = "-1" href = "#"> 22222 </a> </li> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> 22222 </a> </li> <li> 'devisation "> <alye-exeem" exeem ". href = "#"> 33333 </a> </li> </ul> </div>
В настоящее время UL содержит LI и контролируется в кнопке, поэтому в настоящее время более уместно использовать ARIA-MABELLEDBY. Проще говоря, область использования между этими тремя различна, а основные функции одинаковы, все для удобства распознавания программного обеспечения для чтения экрана. Когда дело доходит до скрытых классов, мы должны упомянуть класс только для SR. Давайте посмотрим.
<метка для = "inputemail"> Электронная почта: </label>
<метка для = "inputemail"> Электронная почта: </label>
Эффект в настоящее время: текст выше скрыт, и только эта разница останется неизменной.
5. Отключенный класс
В форме вам нужно обратить внимание на этот класс, давайте сравним его здесь.
<!-Введите форму с Fieldset, функция: включите форму в блоке-> <form rol = "form"> <fieldset Disabled> <div> <label for = "disabledTectInput"> отключенный входной окно </label> <Input type = "text" id = "disabledTextInput" Disabled Displayment> divel> divel> </div> <div> <div> <fabel for for for for for to "disabled spute stromelem <SELECT ID = "DisabledSelect"> <ploict> отключить не выделитель </option> </select> </div> <div> <babel> <input type = "fackbox"> Disable не может выбрать </label> </div> <button Type = "Opport"> Opper </utturon> </fieldset> </form>
Если вы добавите класс отключений в набор файлов, форма отключения будет отключена только для кнопки выбора ввода и т. Д., И не будет работать для атрибутов легенды других элементов. Для сравнения, добавьте атрибут легенды
<!-Добавленное свойство длиной-> <form rol = "form"> <fieldset Disabled> <Legend> <input type = "text" Placeholder = "Color становится серо-серого, но не отключено"> </Legend>-Здесь мышь может быть размещена в блоке ввода <div> <label for = "DisabledTectInput"> Disabled Input Box </label> <input type = "text-yed" yed "=" hipabletexput "> Disabled Input Box </label> <input type =" ytembel "=" ID "yed" = "ID" yeD "=" "ID" = "" ID "=" "ID" = "ID" = "ID" ID "". PlaceHOLDER = "DISADADED"> </div> <div> <label for = "disabledselect"> Disabled Dirlow Down </label> <select id = "disabledselect"> <опция> не выбирается </option> </selet> </div> <div> <backel> <input type = "checkbox"> без необходимости выбрать </label> </div> <butd> epopect ">« Отправить »>« Отправить »>« Отправить »>« Отправить »>« Закончить »>« Отправить »>« Отправить »>« Отправить »>« Переконцентировать »> </div> </div> <butd =" </fieldset> </form> <!-отключенные формы отключены только для кнопки выбора ввода и т. Д., И не работают для других предметов Legend->
6. Атрибут Data-Target Data-Target Data-Target
HTML5 позволяет разработчикам свободно добавлять атрибуты к своим тегам, и этот пользовательский атрибут обычно начинается с «данных».
Data-Toggle: указывает взаимодействие данных. Нажмите кнопку в столбце выше, чтобы переключиться на раскрывающееся меню.
DATA SPY указывает: мониторинг
Data-Traget: Target.
Это включает в себя события в JS, и я не буду их подробно объяснять. Я посмотрю на эти проблемы, когда войду в JS Learning в начальной загрузке. В этой форме все еще есть много вещей, и есть почти так много резюме. Есть также дополнения. Пожалуйста, оставьте мне сообщение ниже.
2. Класс кнопок
Это не сложно, просто помните класс атрибутов, его легко понять.
<a href="#" role="button">link</a><button type="submit" disabled="disabled">default</button><button type="submit">primary</button><button type="submit">success</button><button type="submit">info</button> --btn-block: stretch it to 100% of the parent element<button type="submit">warning</button><input type="button" value = "input"> <input type = "кнопка" value = "pospeat">
Эффекты следующие:
3. Категория картин
<!-Центр центрального блока с изображением: центрируйте содержимое, чтобы отобразить IMG-раунд: с округлыми углами IMG-Circle: Кольцо IMG-Thumbnail: Добавьте внешнюю границу к картинке->
<img src = "111.png">
<img src = "111.png">
<img src = "111.png">
Эффекты следующие:
Подводя итог, я лично чувствую, что роль форм все еще очень важна. Здесь легче объяснить некоторые другие основные категории. Следующая статья будет передана в обучение компонента CSS: Bootstrap Learning Notes Component Component (3)
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.