Самым большим преимуществом начальной загрузки для разработчиков является его отзывчивый макет и несколько отличных стилей.
Теперь я представлю некоторые шаги и некоторые часто используемые вещи для использования начальной загрузки.
1. Напишите заголовок
<head> <meta charset="UTF-8"> <!--In order to make ie use the latest rendering mode, add this tag --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--For responsive layout, first obtain the physical width of the device, set the web page width according to the physical width of the device, and scale it according to 1:1 --> <meta name = "viewport" content = "width = width Device, начальная шкала = 1"> <Title> LearnBootStrap </title> <!-См. href = "// cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-Чтобы поддержать IE9 или ниже, добавьте их-> <! src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <!-пусть он поддерживает запросы на СМИ, то есть отзывчивый-> <script src = "https://oss.maxcdn.com/resper/1.4.2/resper.min.js"> </script> <!-[endif]-> </head>
2. Винтройс JS
Это можно написать в теле
<!- файл jQuery. Обязательно представьте-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>!
3. Используйте класс контейнеров
Класс контейнеров является широко используемым классом div
В основном используйте функцию центрирования
<div> Привет </div>
4. Используйте растиленную систему
Растиленная система - очень часто используемая система макета для начальной загрузки
Простое использование следующим образом
<div> <!-xs означает на телефоне, SM означает на планшете, а MD означает на рабочем столе. Следующие числа представляют, сколько столбцов занята. Полный экран-12 столбцов-> <!-Содержание превышает высоту сетки, и высота будет увеличена, а ширина не будет увеличена-> <!-смещение означает, сколько столбцов будет перемещено вправо-> <viv> .col-XS-12 .col-sm-6 .col-md-8.col-xs-12 .col-md-1. .col-sm-6 .col-md-4 </div> </div> <div> <!-push движется назад, тяга движется вперед-> <div> .col-xs-12 .col-sm-6 .col-md-8 </div>
Вы можете видеть, что растиленная система может регулировать различную ширину в соответствии с различными устройствами.
5. Используйте форму
<div> <!-Адаптивная таблица, содержание слишком длинное, чтобы двигаться влево и вправо-> <div> <!-Последние несколько таблиц-это таблицы с границами. Когда мышь проходит через строку tbode, цвет темнее, а таблица уплотняется-> <table> <thead> <tr> <th> tale Title </th> <Th> Название таблицы </th> <Th> Название таблицы </th> <Th> Название таблицы </th> </tr> </thead> <tbody> <!-Цвет ряд Зеленый-TH> <TR> </th> </th> </th> </th> </th> </th> </th> </th> </th> <! Содержание </th> <Th> Содержание таблицы </th> <Th> Содержание таблицы </th> <Th> Содержание таблицы </th> <Th> Содержание таблицы </th> <Th> Содержание таблицы </th> <Th> Содержание таблицы </th> <Th> Содержание таблицы </th> <T. Th <!-Цвет ряда бежевый-> <Tr> <Th> Содержание таблицы </th> <Th> Содержание таблицы </th> <Th> Содержание таблицы </th> <Th> Содержание таблицы </th> <Th> Содержание таблицы </th> <Th> Содержание таблицы </th> <Th> Содержание таблицы </th> <Th> Содержание таблицы </th> th> TH> TH> TH> TH> TH> TH> TH> TH> TH> TH> TH> TH. TH> TH> Содержание таблицы </th> TH> TH> TH> TH> TH> TH> TH> TH> TH> Содержание таблицы. <Th> Содержание таблицы </th> <Th> Содержание таблицы </th> <Th> Содержание таблицы </th> <Th> Содержание таблицы </th> <Th> Содержание таблицы </th> <Th> Содержание таблицы </th> <Th> Содержание таблицы </th> <Th> Содержание таблицы </th> </tr> </tbody> </table> </div> </th> </th> </tr> </tbody> </table> </th> </th
Если вы хотите изменить цвет определенной сетки, вы можете добавить такие классы, как TR в TH TAG
6. Используйте формы
Самое основное использование заключается в следующем
<div> <form> <!-- part of the item is a form-group parent layout, with label and input--> <div> <!--label for corresponding to the input id--> <label for="exampleInputEmail1">Email address</label> <!--input class should be set to form-control--> <input type="email" id="exampleInputEmail1" placeholder="Email"> </div> <div> <label для = "Пример inputPassword1"> Пароль </label> <input type = "пароль" id = "exampleInputpassword1" Placeholder = "password"> </div> <div> <label для = "exampleInputFile"> ввод файла </label> <Input type = "file" id = "exampureInputfile"> <! По справочнику-> <p> <p> hared level level level level здесь. <bakel> <input type = "fackbox"> Chece Me Out </label> </div> <button Type = "Opport"> Opper </button> </form> </div>
Если вы установите класс формы в линию формы, все элементы будут отображаться на одной линии
Если вы установите класс формы на горизонтальную форму, каждая группа форм будет отображать одну строку, но вы должны установить ширину самостоятельно
нравиться
<div> <!--Let each form-group display one line, but each form-group child must specify the width--> <form> <div> <label for="Emai">Email</label> <!--input-group let prompts and supplements be displayed in the same line--> <div> <input type="email" placeholder="Email" id="Emai"> </div> </div> <div> <label для = "passwor"> пароль </label> <div> <input type = "password" Placeholder = "password" id = "passwor"> </div> </div> <button Type = "Отправить"> Summit </button> </form> </div>
Обычно, когда мы регистрируем учетную запись, если информация неверна или правила, она будет запрашивать рядом с ней, а цвет блока ввода будет другим.
Bootstrap предоставляет нам эту очень практичную функцию
<div> <form> <!-Добавить два элемента, которые следует добавить в класс родительского div-> <!-Статус успеха-> <div> <label for = "inputsuccess2"> ввод с успехом </label> <inputs = "id =" inputSuccess2 "aria-describedby =" inputSuccess2status "> <! aria-hidden="true"></span> <!--This information is hidden, increasing the readability of the code --> <span id="inputSuccess2Status">(success)</span> </div> <!--Warning status --> <div> <label for="inputWarning2">Input with warning</label> <input type="text" id="inputWarning2" aria-describedby="inputWarning2Status"> <span aria-hidden="true"></span> <span id="inputWarning2Status">(warning)</span> </div> <!--Error status--> <div> <label for="inputError2">Input with error</label> <input type="text" id="inputError2" aria-describedby = "inputError2status"> <span aria-hidden = "true"> </span> <span id = "inputError2status"> (error) </span> </div> </form> </div>
7. Кнопка
Кнопки необходимы
<!-Белый фон-> <button type = "button"> (стиль по умолчанию) по умолчанию </button> <!-синий фон-> <button Type = "button"> (предпочтения) Первичный </button> <!-зеленый фон-> <Кнопка типа = "Кнопка"> (успех) Успех </button> <!-Light Blue Foine-> Кнопка «Кнопка = кнопка"> (кнопка общего) Информация) </button> <! (Предупреждение) Предупреждение </button> <!-Красный фон-> <Button Type = "Button"> (опасность) опасность </button>
Вы также можете добавить размеры в класс
<Кнопка Типа = "Кнопка"> (большая кнопка) Большая кнопка </button> <Кнопка Типа = "Кнопка"> (размер по умолчанию) Кнопка по умолчанию </button> <Кнопка Тип = "Кнопка"> (маленькая кнопка) Маленькая кнопка </Кнопка> <Кнопка Тип = "> (Маленькая кнопка) Дополнительная маленькая кнопка </кнопка> Кнопка> Кнопка> Кнопка> Кнопка> Кнопка>
Вышеуказанные шаги и распространенное использование начальной загрузки
После использования этой структуры не только увеличилась скорость развития, но и качество также улучшилось.
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.