учебник по начальной загрузке 4


начальная загрузка является интерфейсной средой, которая помогает вам быстрее и проще создавать мобильные адаптивные веб-сайты. Bootstrap, впервые разработанный Twitter, теперь используется для чего угодно, от разработки веб-приложений до тем WordPress. Это также совершенно бесплатно, универсально и интуитивно понятно.

С помощью Bootstrap вы можете создавать сложные веб-страницы из стандартного HTML и настраивать их под свои нужды. Bootstrap также поставляется с несколькими плагинами jQuery, которые могут предоставлять дополнительные функции, такие как карусели, кнопки, всплывающие подсказки и многое другое..

И последнее, но не менее важное: он дает вам множество ярлыков для создания веб-страниц, которые сэкономят ваше время и энергию. Все, что вам нужно, это базовое понимание HTML и CSS для создания адаптивных, мобильных первых и совместимых со всеми современными браузерами.

P.S. Bootstrap не идеальный вариант для начинающих. Некоторые знания HTML и CSS будут полезны. Кроме того, вы можете использовать конструкторы сайтов или WordPress для создания сайта.

Как создать сайт с помощью Bootstrap (оглавление):

  1. Шаг 1: Настройка и обзор
    1. Создать страницу HTML
    2. Загрузите Bootstrap через CDN или разместите его локально
    3. Включить JQuery
    4. Загрузить Bootstrap JavaScript
    5. Положил все это вместе
  2. Шаг 2: Создайте свою целевую страницу
    1. Добавить панель навигации
    2. Включить пользовательский CSS
    3. Создать контейнер содержимого страницы
    4. Добавить фоновое изображение и пользовательский JavaScript
    5. Добавить наложение
    6. Включить заголовок страницы и основной текст
    7. Создать кнопку CTA
    8. Установить раздел из трех столбцов
    9. Добавить контактную форму
    10. Создать нижний колонтитул с двумя столбцами
    11. Добавить медиа-запросы
    12. Получите ваш сайт в прямом эфире

Общее время создания сайта с помощью Bootstrap: 3-4 часа.
Уровень мастерства: Начальный до среднего

Шаг 1: Настройка и обзор


Чтобы использовать Bootstrap, вам сначала нужно интегрировать его в свою среду разработки, или веб-страницу. Для этого у вас есть две возможности: загрузить его удаленно или загрузить и использовать Bootstrap локально. Тем не менее, для обоих, вам сначала нужно что-то загрузить в.,

1. Создайте страницу HTML

В качестве первого шага мы создадим простой HTML-шаблон в качестве основы, где мы будем использовать Bootstrap. Для этого первое, что вы хотите сделать, это создать папку на вашем компьютере или сервере для файлов проекта. В этом случае я просто назову это начальная загрузка. Здесь создайте новый текстовый файл и назовите его index.html. Откройте его в любом текстовом редакторе (например,. Блокнот++), а затем вставьте в него код ниже.





Образец страницы учебника Bootstrap








Не забудьте сохранить файл, прежде чем двигаться дальше!

2а. Загрузить Bootstrap через CDN

Как уже объяснялось, Bootstrap состоит в основном из таблиц стилей и скриптов. Таким образом, они могут быть загружены в верхний и нижний колонтитулы вашей веб-страницы, как и другие ресурсы, такие как пользовательские шрифты. Платформа предлагает для этого CDN (сеть доставки контента). Вы можете найти его на Начальная страница загрузки, далее ниже.

Чтобы загрузить Bootstrap на свою страницу, просто вставьте приведенный ниже код в раздел вашего шаблона.

Теперь, когда вы сохраняете файл, любой браузер, который открывает его, автоматически загружает ресурсы Bootstrap..

Использование удаленного метода – хорошая идея, поскольку многие пользователи уже имеют структуру в кеше своего браузера. Если это так, им не придется перезагружать его при переходе на ваш сайт, что приводит к ускорению загрузки страницы. Как следствие, это рекомендуемый метод для живых сайтов.

Однако для экспериментов и разработки, или если вы хотите быть независимым от подключения к Интернету, вы также можете получить собственную копию Bootstrap. Это то, что я делаю для этого урока, потому что это также приводит к уменьшению кода для публикации.

2b. Host Bootstrap локально

Альтернативный способ настройки Bootstrap – загрузить его на жесткий диск и использовать файлы локально. Варианты загрузки находятся там же, где и ссылки на удаленную версию. Здесь обязательно получите скомпилированные файлы CSS и JS. Вам не нужны исходные файлы.

После этого распакуйте файл и скопируйте его содержимое в тот же каталог, что и index.html. После этого вы можете загрузить Bootstrap CSS в ваш проект следующим образом:

Вы заметите, что сюда входит путь к файлу Bootstrap. В вашем случае убедитесь, что ваш путь соответствует вашей фактической настройке. Например, имена каталогов могут отличаться, если вы загрузили другую версию Bootstrap.

3. Включить JQuery

Чтобы получить полную функциональность Bootstrap, вам также необходимо загрузить библиотеку jQuery. Здесь также у вас есть возможность загрузить его удаленно или разместить его локально.

В первом случае вы найдете ссылку на последнюю версию jQuery Вот. Вы можете использовать его для загрузки библиотеки на свою страницу, поместив строку кода ниже прямо там, где она говорит на твоей странице.

альтернативно, скачать jQuery (щелкните правой кнопкой мыши> Сохранить ссылку как…), разархивируйте и положите в папку проекта. Затем включите его в том же месте, что и ваш файл, следующим образом:

Опять же, убедитесь, что путь соответствует вашей настройке.

4. Загрузите Bootstrap JavaScript

Последним шагом в настройке Bootstrap является загрузка библиотеки Bootstrap JavaScript. Они включены в загруженную версию платформы, и вы также найдете ссылки на удаленные источники в том же месте, что и раньше. Однако мы загрузим его в другое место, чем таблица стилей. Вместо заголовка он идет в нижний колонтитул страницы сразу после вызова jQuery.

Вы можете назвать это удаленно так:

Или локально так:

5. Положите все это вместе

Если вы правильно выполнили действия, описанные выше, у вас должен получиться файл, который выглядит следующим образом для удаленного решения:

   Образец страницы учебника Bootstrap         

В качестве альтернативы, если вы размещаете хостинг локально, шаблон вашей страницы должен выглядеть примерно так:

   Образец страницы учебника Bootstrap         

Если это то, что у вас есть, и вы сохранили свою работу, теперь вы готовы перейти к следующему шагу.

Шаг 2. Создайте свою целевую страницу


Хорошо, по общему признанию, было много подготовительной работы. Однако это было не очень сложно, не так ли? Плюс, теперь начинается самое интересное.

В тот момент, когда вы переходите на свой образец сайта, вы должны просто увидеть пустую страницу. Время изменить это.

1. Добавьте панель навигации

Первое, что мы хотим сделать, это добавить панель навигации вверху страницы. Это позволяет вашим посетителям обойти ваш сайт и обнаружить остальные ваши страницы.

Для этого мы будем использовать Navbar учебный класс. Это один из элементы по умолчанию Bootstrap. Он создает элемент навигации, который по умолчанию отзывчив и автоматически сворачивается на небольших экранах. Он также предлагает встроенную поддержку для добавления брендинга, цветовых схем, интервалов и других компонентов..

Мы будем использовать его, как показано ниже, и опубликовать его чуть ниже тег:

 логотип   

Некоторое объяснение кода:

  • Navbar расширяющиеся-мкр – Это обозначает, в какой момент панель навигации расширяется от вертикальной иконки или значка гамбургера до горизонтальной панели в натуральную величину. В этом случае мы установили средние экраны, которые в Bootstrap больше 768 пикселей.
  • Navbar-бренд – Это используется для брендинга вашего сайта. Вы также можете включить файл изображения логотипа здесь.
  • Navbar-Toggler – Обозначает кнопку переключения для свернутого меню. Кусок данные переключение = «коллапс» определяет, что это превратится в меню гамбургера, а не в раскрывающийся список, что является другим вариантом. Важно, чтобы вы определили Данные-мишени с идентификатором CSS (определяется #) и завернуть ДИВ с тем же именем вокруг фактического Navbar элемент.
  • Navbar-Toggler-значок – Как вы можете догадаться, это создает значок, по которому пользователи нажимают, чтобы открыть меню на маленьких экранах..
  • Navbar-нав – класс для
      элемент списка, который содержит пункты меню. Последние обозначены нав-пункт а также нав-ссылка.

    Почему я так много объясняю?

    Потому что в этом смысл Bootstrap. У вас есть все эти стандарты, которые позволяют быстро создавать элементы с некоторыми классами HTML и CSS. Вам не нужно писать какой-либо CSS для обеспечения стиля, все уже настроено в Bootstrap. Кроме того, все готово для мобильных устройств из коробки! Вы начинаете видеть, насколько это полезно?

    Выше достаточно, чтобы добавить панель навигации на ваш сайт. Тем не менее, на данный момент, это все еще выглядит очень мало.

    учебник по начальной загрузке добавить панель навигации

    Это потому, что к нему не прилагается много стилей. Пока вы можете добавить цвета по умолчанию (например, давая навигатору такой класс, как BG-темный Navbar-темный), вместо этого мы хотим добавить наш.

    2. Включить пользовательский CSS

    К счастью, если вы хотите изменить стиль по умолчанию, вам не нужно просматривать большую библиотеку таблиц стилей и вносить изменения вручную. Вместо этого, как и в случае дочерней темы WordPress, вы можете добавлять свои собственные файлы CSS, которые можно использовать для перезаписи существующего стиля..

    Для этого просто создайте пустой файл в текстовом редакторе и назовите его main.css. Сохраните его, затем добавьте его в раздел head вашего сайта Bootstrap следующим образом:

    Это код для таблицы стилей, которая находится в главном каталоге. Если вы решили разместить свой внутри CSS папку, не забудьте указать правильный путь в ссылке.

    Отсюда вы можете добавить собственный CSS на свой сайт. Например, чтобы стилизовать панель навигации и ее элементы, вы можете использовать разметку следующим образом:

    тело { отступы: 0; поле: 0; фон: # f2f6e9; } /*--- Панель навигации ---*/ .navbar { фон: # 6ab446; } .нав-ссылка, .navbar-бренд { цвет: #fff; курсор: указатель; } .nav-link { margin-right: 1em! важный; } .nav-link: hover { цвет: # 000; } .navbar-collapse { justify-content: flex-end; }

    И вот результат:

    панель навигации в стиле начальной загрузки

    Выглядит лучше, чем раньше, не так ли??

    3. Создайте контейнер содержимого страницы

    После панели навигации следующая вещь, которую вы хотите – это контейнер для содержимого страницы. Это действительно просто в Bootstrap, так как все, что вам нужно для этого, это под тегом navbar:

    Обратите внимание на Контейнер-жидкости учебный класс. Это еще один из тех классов Bootstrap по умолчанию. Применяя его к ДИВ элемент автоматически применяет кучу CSS к нему.

    -жидкость part гарантирует, что контейнер растянется по всей ширине экрана. Там также просто контейнер, который имеет фиксированную ширину, примененную к нему, так что всегда будет место с обеих сторон экрана.

    Однако, если вы сейчас перезагрузите страницу, вы все равно ничего не увидите (если не используете инструменты разработчика). Это потому, что вы создали только пустой элемент HTML. Это начнет меняться сейчас.

    4. Добавьте фоновое изображение и пользовательский JavaScript

    В качестве следующего шага в этом уроке по Bootstrap мы хотим включить полноэкранное фоновое изображение для заголовка нашей целевой страницы. Для этого нам потребуется использовать jQuery, чтобы изображение растянулось по всему экрану..

    Вы делаете это так же, как вы включаете пользовательский CSS. Сначала создайте текстовый файл с именем main.js и поместите его в папку вашего сайта. Затем позвоните до закрытия тег внутри index.html.

    После этого вы можете скопировать и вставить этот фрагмент кода, чтобы сделать

    Элемент растягивается по всему экрану:

    $ (Документ) .ready (функция () { $ ( 'Заголовок') Высота ($ (окно) .height ()). })

    Затем остается только установить фоновое изображение. Вы можете сделать это так внутри main.css:

    .header { background-image: url ('images / header-background.jpg'); размер фона: обложка; background-position: center; положение: относительное; }

    Если вы поместите изображение достаточного размера в место, указанное выше, вы получите результат, подобный следующему:

    учебник начальной загрузки включает фоновое изображение заголовка

    5. Добавьте оверлей

    Чтобы сделать фоновое изображение более стильным, мы также добавим наложение. Для этого вы создадите еще один элемент div внутри того, который вы только что включили.

    Затем вы можете добавить следующее в свой пользовательский файл CSS:

    .наложение { положение: абсолютное; минимальная высота: 100%; минимальная ширина: 100%; слева: 0; верх: 0; фон: rgba (0, 0, 0, 0,6); }

    Это создаст это хорошее наложение для изображения, которое вы вводили ранее:

    учебник начальной загрузки добавить оверлей

    6. Включите заголовок страницы и основной текст

    Теперь вы, вероятно, захотите добавить заголовок страницы в виде заголовка плюс некоторый основной текст. Таким образом, ваши посетители сразу узнают, на каком сайте они находятся и чего от него ожидать.

    Чтобы создать их, просто добавьте этот фрагмент в контейнер, который вы установили на последнем шаге, под оверлеем:

    Добро пожаловать на целевую страницу!

    Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis. Suspendisse contectetur mi id libero fringilla, in pharetra sem ullamcorper.

    После этого добавьте следующую разметку в main.css.

    .описание { слева: 50%; положение: абсолютное; верх: 45%; трансформировать: переводить (-50%, -55%); выравнивание текста: по центру; } .описание h1 { цвет: # 6ab446; } .описание р { цвет: #fff; размер шрифта: 1,3рема; высота строки: 1,5; }

    Когда вы это сделаете, целевая страница теперь выглядит так:

    учебник начальной загрузки добавить заголовок страницы и описание

    Это действительно начинает собираться вместе, не так ли?

    7. Создайте кнопку CTA

    Ни одна целевая страница не обходится без призыва к действию, чаще всего в виде кнопки. По этой причине нам было бы неуместно не включать в этот учебник Bootstrap способ его создания..

    Фреймворк предлагает множество инструментов для быстрого и простого создания кнопок. Вы можете найти много примеров Вот. В моем случае я добавляю следующую разметку прямо под содержимым страницы внутри контейнер:

    В дополнение к этому, я добавляю этот CSS в main.css:

    .кнопка описания { граница: 1px solid # 6ab446; фон: # 6ab446; радиус границы: 0; цвет: #fff; } .кнопка описания: hover { граница: 1px solid #fff; фон: #fff; цвет: # 000; }

    После сохранения и перезагрузки это выглядит так:

    учебник начальной загрузки добавить кнопку призыва к действию

    8. Настройте раздел из трех столбцов

    Я уже вполне доволен тем, как обстоят дела. Тем не менее, мы еще не закончили со страницей. Далее мы хотим создать три столбца под основным содержанием для дополнительной информации. Это специальность Bootstrap, так как он играет в полную силу: создание сетки. Вот как это сделать в этом случае:

    Lorem Ipsum

    Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Lorem Ipsum

    Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Первое, что вы заметите, это строка элемент. Это необходимо при создании столбцов в качестве контейнера для сетки..

    Что касается столбцов, у них всех есть несколько классов: Col-LG-4, Col-мкр-4 а также Col-см-12. Это означает, что мы имеем дело со столбцами и размером, который они будут иметь на разных экранах..

    Чтобы понять это, вам нужно знать, что в сетке Bootstrap все столбцы в одной строке всегда складываются с числом 12. Таким образом, присвоение им указанных выше классов означает, что они будут занимать треть экрана на большом и среднем экраны (12 делится на 3 – это 4), но весь экран на небольших устройствах (12 из 12 столбцов).

    Это имеет смысл, не так ли?

    Вы также заметите, что я включил изображения и добавил .Изображение жидкости класс им. Это должно сделать их отзывчивыми, чтобы они масштабировались вместе с экраном, на котором страница просматривается.

    В дополнение к этому у вас есть следующий стиль, включенный в обычном месте:

    .функции { маржа: 4em авто; набивка: 1em; положение: относительное; } .Feature-title { цвет: # 333; размер шрифта: 1,3рема; вес шрифта: 700; нижнее поле: 20 пикселей; преобразование текста: верхний регистр; } .особенности img { -webkit-box-shadow: 1px 1px 4px rgba (0, 0, 0, 0.4); -moz-box-shadow: 1px 1px 4px rgba (0, 0, 0, 0.4); тень от коробки: 1px 1px 4px rgba (0, 0, 0, 0,4); нижнее поле: 16 пикселей; }

    Когда добавлено ниже основного контента и сохранено, это выглядит так:

    учебник по начальной загрузке добавить три раздела столбца

    9. Добавить контактную форму

    Вы заметите, что одно из новых полей все еще пусто. Это было сделано специально, потому что мы хотим добавить контактную форму. Это очень нормальная практика для целевых страниц, чтобы позволить посетителям войти в контакт.

    Создать контактную форму в Bootstrap довольно просто:

    Связаться!

    К настоящему времени мне больше не нужно объяснять разметку для создания столбцов. Вот что означает остальная часть разметки:

    • Форма-группа – Используется для обтекания полей формы для форматирования.
    • Форма контроля – Обозначает поля формы, такие как поля ввода, текстовые области и т. Д..

    С формами вы можете сделать гораздо больше, что вы можете найти в документация. Однако для демонстрационных целей вышесказанного достаточно. Поместите его в оставшийся пустой столбец, а затем добавьте этот стиль в main.css:

    .особенности .form-control, .входные функции { радиус границы: 0; } .Features .btn { цвет фона: # 589b37; граница: 1px solid # 589b37; цвет: #fff; margin-top: 20px; } .features .btn: hover { цвет фона: # 333; граница: 1px solid # 333; }

    Когда вы это сделаете, вы получите такую ​​форму:

    учебник начальной загрузки включает контактную форму

    10. Создайте нижний колонтитул с двумя столбцами

    Хорошо, теперь мы приближаемся к концу учебника Bootstrap. Последнее, что вы хотите добавить на свою целевую страницу, это раздел нижнего колонтитула с двумя столбцами. К настоящему времени это больше не должно представлять для вас большой проблемы..

    Дополнительная информация

    Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    контакт

    1640 Riverside Drive, Hill Valley, Калифорния
    [Электронная почта защищена]
    + 01 234 567 88
    + 01 234 567 89

    Помимо обычной разметки сетки, в этом разделе представлены несколько возможностей изменить типографику с помощью Bootstrap:

    • текст в верхнем регистре
    • начертание шрифта, полужирный
    • текст-центр

    Из названий классов должно быть достаточно ясно, что они делают. Вы можете найти больше информации о Bootstrap и типографии Вот.

    В дополнение к вышесказанному, вы можете использовать стили, как это:

    .нижний колонтитул { цвет фона: # 222; цвет: #ccc; отступы: 60px 0 30px; } .нижний колонтитул цвет: # 666; отступы: 40px 0; }

    В результате получается красивый нижний колонтитул, который выглядит так:

    учебник начальной загрузки включает нижний колонтитул страницы

    11. Добавить медиа-запросы

    Страница в основном уже готова. Это также полностью ответственно. Тем не менее, в мобильном представлении браузера, верхняя часть пока не совсем правильная.

    ошибка учебника по начальной загрузке на мобильном дизайне

    Тем не менее, не беспокойтесь, вы можете легко исправить это с помощью простого медиа-запроса. Если вы не используете SASS для компиляции своего сайта Bootstrap, они работают так же, как и в других случаях. Вам просто нужно иметь в виду предустановленные точки останова входит в Bootstrap.

    Как следствие, чтобы исправить вышеуказанную проблему, вы можете просто включить фрагмент кода, подобный следующему:

    @media (максимальная ширина: 575,98 пикселей) { .описание { слева: 0; отступы: 0 15px; положение: абсолютное; Топ 10%; преобразование: нет; выравнивание текста: по центру; } .описание h1 { размер шрифта: 2em; } .описание р { размер шрифта: 1,2 мм; } .функции { поле: 0; } }

    После этого все так и должно быть:

    учебник начальной загрузки добавить медиа-запрос

    12. Загрузите ваш сайт на веб-хостинг

    Если вы следили за этим, то теперь вам нужно создать готовый веб-сайт, который также доступен на мобильных устройствах и полностью реагирует.

    Однако пока никто, кроме вас, не может это увидеть. Чтобы изменить это, вам нужен веб-хостинг и домен. Таким образом, люди могут ввести адрес вашего сайта в панель браузера, а затем получить доступ к вашему недавно созданному веб-сайту Bootstrap онлайн..

    Чтобы они могли это сделать, вам необходимо загрузить сайт на ваш сервер. Вы можете сделать это с FTP-клиентом, как FileZilla. Соберите свой адрес хоста FTP, имя пользователя и пароль от вашего хостинг-провайдера для удаленного подключения к вашему серверу. Когда вы это сделаете, вы сможете увидеть файлы и каталоги в настоящее время там.

    загрузить сайт начальной загрузки на сервер через ftp

    Перейдите в каталог, на который указывает ваш домен (обычно это корневой каталог). После этого просто найдите папку с файлами Bootstrap на жестком диске, отметьте все файлы внутри и перетащите их на сервер, чтобы начать загрузку. Процесс займет некоторое время, в зависимости от скорости соединения, а также количества и размера файлов..

    Однако, как только это будет сделано, когда вы получите доступ к своему домену, вы сможете увидеть готовый сайт в окне браузера..

    учебник по начальной загрузке готовой целевой страницы

    Неплохо для нескольких строк кода, верно?

    Кстати, если вы хотите иметь весь код страницы, включая пользовательские CSS и JavaScript, вы можете скачать их все здесь. Благодаря этому у вас есть все необходимое для создания целевой страницы с помощью Bootstrap.

    Вывод

    Bootstrap – это среда разработки с открытым исходным кодом, которую каждый может использовать бесплатно. Это позволяет быстро создавать прототипы проектов, создавать веб-страницы и, как правило, начинать работу.

    Как вы видели в этом учебном пособии по начальной загрузке для начинающих, ему нужны только базовые знания HTML, CSS и некоторые дополнительные jQuery. Хотя это не так удобно, как использование WordPress, Bootstrap по-прежнему является верной альтернативой для создания веб-сайта..

    К настоящему времени вы знаете, как настроить и установить Bootstrap и его компоненты, создать простую целевую страницу, включить базовый контент и стилизовать его. Вы можете создавать навигационные меню, устанавливать фоновые изображения, включать кнопки, столбцы и контактные формы.

    Конечно, есть чему поучиться.

    Благодаря этому базовому учебнику Bootstrap вы теперь знаете достаточно, чтобы самостоятельно двигаться вперед. Если вы хотите глубже погрузиться в рамки, хорошей отправной точкой является W3Schools. Кроме того, мы надеемся, что вам понравился этот урок для начинающих, и вы хотели бы услышать ваши мысли и опыт по этому поводу.

    Обновление: Мы также создали загрузочную шпаргалку для начинающих в версиях .pdf и .png.

    Есть ли у вас какие-либо мысли о учебнике Bootstrap выше? Вопросы, комментарии, пожелания? Дайте нам знать в комментариях ниже!

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me