Начальная загрузка похожа на фронтальную структуру. Он уже организовал много CSS и может быть вызван непосредственно, если это требуется для фронтального развития. Адрес веб -сайта http://www.bootcss.com. Использование начальной загрузки может сократить время планировки в CSS во время фронтальной разработки
Вам нужно использовать Bootstrap для загрузки компонентов на официальном веб -сайте (нажмите, чтобы открыть ссылку). Версия начальной загрузки, используемая в производственной среде (нажмите, чтобы открыть ссылку). Bootstrap3 не совместим с 2. Рекомендуется использовать Bootstrap3 напрямую в соответствии с его документами разработки.
После распакованной начальной загрузки скопируйте полученные 3 папки CSS, шрифты и JS в каталог сайта. Если это веб -проект JSP от Eclipse, поместите их в папку WebRoot.
После этого вы можете позвонить в начальную загрузку, чтобы быстро моделировать переднюю страницу в этом каталоге сайта.
Тем не менее, стоит отметить, что разные браузеры имеют разные объяснения для начальной загрузки. IE не может прочитать некоторые стили, но основные функции не затронуты, и страница немного уродлива.
Вот сравнение между IE и Google Chrome на одной странице:
1. Основные цели
Используйте начальную загрузку, чтобы написать красивую целевую страницу для ПК, планшета и мобильного телефона.
Если вы растянут на ПК, различные элементы автоматически адаптируются к экрану.
Если вы откроете такие страницы на своем телефоне, вы будете напрямую адаптироваться к экрану телефона без необходимости автоматической регулировки пользователя.
2. Основные идеи
Макет страницы разработан в соответствии с неотъемлемым стилем начальной загрузки следующим образом:
3. Процесс производства
Конкретный код всей страницы заключается в следующем, и следующее будет анализировать теги один за другим:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>Login Page</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <link href="css/bootstrap.css" rel = "styleSheet" media = "screen"> </head> <body> <div> <div> <table frame = "void"> <tr> <td> <img src = "Images/img0.jpg"/> </td> <td> Добро пожаловать. Пожалуйста, войдите в систему первым. </td> </tr> </table> </div> <div> <form role="form" action="1.html" method="post"> <div> <label for="username"> Username: </label> <div> <input type="text" name="username" placeholder="username" id="username" /> </div> </div> <div> <label для = "Пароль"> Пароль: </label> <div> <input type = "пароль" name = "password" Placeholder = "password" id = "password"/> </div> </div> <div> <div> <button type = "Отправить"> in in </button> <small> нет учетной записи? <a href = "http://2.com"> нажмите, чтобы зарегистрироваться </a> </small> </div> </div> </form> </div> </div> </div> </body> </html>
1. <Head> Tag
Во -первых, поместите следующие две строки кода в тег <head>:
<Head> <Title> страница входа </title> <!-Требуется автоматически адаптироваться к экрану браузера-> <Meta name = "Viewport" content = "width = width Device, начальная масштаба = 1.0, пользовательский scalbable = no"> <!-Derparate я хочу использовать Bootstrap-> <link href = "css/bootstrap.css" relshelep "/href href =" css/bootstrap.
2. <Body> Tag
(1) Сначала напишите <div> </div>, а затем поместите в него код. Основное описание заключается в следующем:
(2) <Div> Tag
<div> <!-Установите таблицу, чтобы расположить этот слой CSS. Нелегко добавить align = "Left" к тегу IMG. Изображение переполнится до слоя-> <!-То же, что <Таблица>-> <table frame = "void"> <tr> <td> <img src = "Images/img0.jpg"/> </td> <td> добро пожаловать. Пожалуйста, войдите в систему первым. </td> </tr> </table> </div>
(3) В соответствии с тегом <div> сначала положите форму элемента формы = "form" action = "1.html" method = "post">. По сравнению с обычными формами HTML, эта форма имеет больше атрибутов класса и атрибутов ролей. Нет необходимости много говорить об атрибуте класса. Если значение является формой, даже если форма имеет достаточное местоположение, внешняя метка и окно ввода не будут на одной линии. Если значение является текущей формой-горизонтальной, то это как показано в эффекте рисунка. Роль атрибут не показывает никакого эффекта, и он добавляется только в соответствии с китайским документом Bootstrap.
Далее элементы в каждой форме формы следующие:
<div> <form rol = "form" action = "1.html" method = "post"> <!-Внешняя метка каждого свойства образует кортеж для группы форм с входной коробкой-> <div> <!-Следующий атрибут класса для его автоматического растяжения в соответствии с размером экрана-> <label for = unserame userame: </label> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div>-div orah are are ere the labeler stearme userame: Входя на что угодно, что, конечно, нельзя объяснить в IE8. I can't see any function of id, it is just added according to the requirements of Bootstrap Chinese documents --> <input type="text" name="username" placeholder="username" id="username" /> </div> </div> <div> <label for="password"> Password: </label> <div> <input type="password" name="password" placeholder="password" id="password" /> </div> </div> <div> <!-Кнопка здесь отличается от кнопки HTML обычной отправки, но она не влияет на представление формы-> <Кнопка Типа = "Отправить"> Войти </button> <!-<small> тег гарантирует, что этот текст такой же строка, как и кнопка «Отправить»-> <small>. Нет учетной записи? <a href = "http://2.com"> нажмите, чтобы зарегистрироваться </a> </small> </div> </div> </form> </div> </div>
На этом этапе разработка этой страницы была завершена.
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.