- Перед просмотром учебника
- Что такое бутстрап
- Готовимся к вашей базовой загрузочной странице index.html
- Шаг 2. Добавить некоторый контент и боковую панель
- Об авторе
Хотите улучшить отзывчивость вашего сайта с помощью Bootstrap? Самым важным аспектом Bootstrap является 12-колоночная мобильная система первой сетки. Это то, что вы используете для создания адаптивного макета.
В этом видеоуроке вы создадите базовый веб-сайт с помощью Bootstrap и узнаете, как использовать сеточную систему Bootstrap для создания адаптивного макета с несколькими столбцами.
Перед просмотром учебника
Прежде чем вы сможете следовать приведенному ниже видеоуроки и научиться создавать свои собственные отзывчивые столбцы, вам потребуется:
- Базовое понимание того, что такое Bootstrap
- Базовое понимание того, что такое сетка Bootstrap
- Загрузите Bootstrap на свой жесткий диск
- Создайте базовый файл Bootstrap index.html для построения
Что такое бутстрап
- Bootstrap - это фреймворк для разработчиков HTML, CSS и JavaScript, работающих над адаптивностью сайта.
- Он состоит из предварительно встроенных адаптивных стилей CSS для столбцов, списков, навигации, веб-форм и многих других веб-элементов.
Понимание системы начальной загрузки
- Система сетки Bootstrap классифицирует размеры экрана на четыре типа: очень маленький, маленький, средний и большой.
- Extra-small для мобильных телефонов. Маленький для планшетов, как I-Pad. Medium предназначен для настольных мониторов. А Большой - только для больших настольных мониторов.
- Чтобы помочь вам настроить скорость отклика для этих четырех типов экранов, Bootstrap делит ширину веб-устройств просмотра на сетку с 12 столбцами.
- Каждый из этих четырех типов сетки Bootstrap становится отзывчивым, только если вы назначаете ему собственный назначенный класс CSS.
- Например, чтобы сделать div адаптивным для очень маленьких устройств, у div должен быть свой собственный Bootstrap .col-xs- <number_of_columns_to_take> класс, например, <div class = "col-xs-6">.
Загрузка Bootstrap
- Перейдите на getboostrap.com и нажмите кнопку «Загрузить Bootstrap»:
- Вы увидите страницу «Начало работы». Нажмите на кнопку «Загрузить Bootstrap»:
- Сохраните этот файл на жестком диске вашего компьютера в любом месте. Его не нужно сохранять на веб-сервере.
- Разархивируйте этот файл и переименуйте извлеченную папку в «bootstrap».
Готовимся к вашей базовой загрузочной странице index.html
Шаг 1. Создайте файл начальной загрузки index.html
- Вы увидите код «Базовый шаблон». Нажмите на кнопку «Копировать», чтобы скопировать код:
- Вставьте код «Базовый шаблон» в ваш текстовый редактор и сохраните его как index.html в той же папке, где вы сохранили папку «bootstrap». Теперь он станет главной страницей вашего сайта Bootstrap.
- Откройте только что созданный index.html и взгляните на свой основной сайт Bootstrap:
- Откройте файл index.html в текстовом редакторе и между открывающими тегами <body> и <h1> добавьте <div class = "container"> (1). Закройте этот новый div после закрывающего тега </ h1> (2) и сохраните файл:
- Проверьте внешний вид страницы и обратите внимание, как «Hello World!» больше не прилипает к краю страницы и теперь немного сместился вправо, чтобы он выглядел немного более аккуратным. Класс «контейнера» Bootstrap, который вы присвоили этому div, добавил к этому тексту некоторое поле:
- Вернитесь в ваш файл index.html. Между тегами <h1> и </ h1> заменить «Hello World!» в "Trusthub". Сохраните файл и проверьте ваш сайт.
Шаг 2. Добавить некоторый контент и боковую панель
- Вернитесь к файлу index.html и под кодом <h1> Trustub </ h1> скопируйте следующий код:
<div class = "row"> <div> <h2> Что Trusthub может сделать для вас </ h2> <p> Lorem ipsum dolor sit amet, последователь adipiscing elit. Aenean Коммандо Лигула Эгет Долор. Эней Масса. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla Conquat Massa Quis Enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. В enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Целочисленная tincidunt. Cras dapibus. Vivamus elementum semper nisi. </ P> </ div> <div> <h2> Наша команда </ h2> <p> Quisque rutrum. Энейский импердиет. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam Eget Dui. Этиам Ронкус. Maecenas tempus, Tellus Eget Condimentum Rhoncus. </ P> </ div> </ div>
- Вернитесь на ваш сайт. Освежи это. Теперь вы должны увидеть свой контент и боковую панель «Наша команда», пока без колонки адаптивного макета:
- Вернитесь на сайт getbootstrap.com и в верхнем меню нажмите кнопку «CSS»:
- На боковой панели нажмите кнопку «Grid System»:
- Прокрутите страницу вниз до раздела «Параметры сетки» (1) и обратите внимание на 12-колоночную систему сетки Bootstrap с четырьмя типами размеров экрана, их шириной и назначенными префиксами класса CSS (2):
- Не беспокойтесь, если параметры системы сетки Bootstrap вам пока не нужны. Все это соберется для вас через секунду, когда вы начнете играть вокруг них на своем сайте.
- Откройте свой файл index.html еще раз и под <div class = "row">, для своего существующего <div> введите класс "col-md-9". Теперь ваш новый div должен выглядеть так: "div class =" col-md-9 ">:
- Теперь перейдите в ваш div, расположенный прямо над заголовком <h2> «Out Team», и дайте ему CSS-класс сетки начальной загрузки «col-md-3». Сохраните файл:
- Вернитесь на свой сайт, чтобы увидеть это изменение в действии. Нажмите клавишу F5 на клавиатуре, чтобы обновить веб-сайт. Теперь вы увидите, что ваша область контента и боковая панель расположены рядом.
- Теперь ваш контентный блок занимает 9 из имеющихся в его сетке Bootstrap 12 столбцов (75% всей ширины экрана рабочего стола). И ваша боковая панель занимает 3 из своих столбцов сетки Bootstrap 12 столбцов (25% от всей ширины экрана рабочего стола):
Brilliant! Теперь вы готовы следовать видеоуроку ниже. Давайте начнем.
Поздравляем! Вы только что узнали, как создать адаптивный макет веб-страницы с несколькими столбцами с помощью Bootstrap. Хотите узнать больше о Bootstrap? Если да, пожалуйста, посетите наш канал YouTube OSTraining и посмотрите " Учебные руководства по Bootstrap Framework ».
Об авторе
Алекс, родившийся от украинской матери и русского отца, в 1999 году переехал в Великобританию. Он сертифицированный специалист Microsoft. Ему нравится изучать системы управления контентом и помогать разработчикам веб-сайтов максимально использовать их.
Похожие
Что такое виртуальный сервер и как его выбрать для ваших нужд?Виртуальный сервер является все более и более популярным типом сервера, особенно для малых и средних предприятий. Он более эффективен, чем виртуальный хостинг, и в то же время дешевле выделенного сервера. Если ваш интернет-магазин или веб-сайт привлекает все больше пользователей и клиентов, тогда посмотрите на виртуальный сервер. Что это такое и как мы можем сопоставить его с вашими потребностями? Как взломать пароль WPA сети Wi-Fi с помощью Reaver
Но вот и плохие новости: новый, бесплатный, с открытым исходным кодом инструмент под названием Reaver использует дыру в безопасности беспроводных маршрутизаторов и может относительно легко взламывать текущие пароли большинства маршрутизаторов. Рассмотрим шаг за шагом, как с помощью Reaver взломать пароль WPA или WPA2 и как защитить собственные сети от атак Reaver. В первом разделе статьи автор будет идти ступенька за ступеньки, Что такое спуфинг DNS?
Обновлено 4 октября 2018 г. Подмена DNS происходит, когда записи определенного DNS-сервера «подделываются» или изменяются злонамеренно, чтобы перенаправить трафик злоумышленнику . Такое перенаправление трафика позволяет злоумышленнику распространять вредоносное ПО, похищать данные и т. Д. Например, если DNS-запись подделана, злоумышленнику удастся перенаправить весь трафик, Понимание и использование «негативного пространства» в фотографии
Отрицательное пространство - это область между объектами на фотографии и вокруг них. Используйте его, чтобы более эффективно видеть формы и размеры и создавать более качественные изображения. Негативное пространство, иногда называемое пробелом, - это концепция, которая использовалась в искусстве, дизайне, архитектуре и скульптуре в течение сотен лет. Это одинаково полезно в фотографии, и может использоваться, чтобы превратить среднюю фотографию в выдающуюся. К сожалению, Как добавить видео и аудио файлы на веб-страницу с использованием HTML5
... шагов, необходимых для добавления или встраивания видео на вашу веб-страницу. В дополнение к элементу <video> вам потребуется указать элемент <source>. Элемент <source> в сочетании с атрибутом SRC сообщает вашей веб-странице, какой видеофайл отображать. Вы также должны указать браузеру тип файла, с которым вы связываете атрибут TYPE. В настоящее время поддерживаются три основных типа видеофайлов. Это MP4, WebM и Ogg. Формат MP4 является наиболее широко поддерживаемым форматом Бесплатные сайты - узнайте, как пользоваться
DNS-атаки: как они пытаются направить вас на фальшивые страницы
Джозеп Альборс из ESET рассказывает о том, как DNS-атаки будут пытаться направить вас на фальшивые страницы. DNS-серверы необходимы для нормального функционирования Интернета, как мы его знаем и любим, но для большинства пользователей они обычно остаются незамеченными . По крайней мере, до тех пор, пока не произойдет какая-либо атака или инцидент, который не позволит им нормально работать, что приводит к тому, что службы, которые мы используем каждый день, начинают отказывать Как выбрать идеальную серую краску
Огромное спасибо Behr за поставку краски для этого проекта. Как всегда, мое мнение на 100% честно и мое. Я мог бы озаглавить этот пост 50 оттенков серого, но ... лучше нет. По понятным причинам. Мы пыхтели прямо на макияж игровой комнаты поезд. В последний раз, когда я давал вам обновление, у нас Как зашифровать ваши документы с помощью LibreOffice
Нетрудно понять, почему вы хотите сохранить некоторые свои документы в безопасности и секретности. Большинство людей записывают важную информацию, чтобы сохранить ее. Предприятия записывают конфиденциальную информацию в свои записи. Все эти сценарии должны быть лучше защищены, чем просто надеяться, что кто-то не зайдет на ваш компьютер и не увидит их. LibreOffice предлагает поддержку шифрования документов из коробки. Вы можете легко зашифровать важные файлы, используя надежное шифрование Что такое переменная URL в Google Tag Manager?
Вы когда-нибудь были в ситуации, когда вам нужно было извлечь часть URL и превратить ее в переменную в Google Tag Manager? Я имею. Наиболее распространенным требованием является передача так называемых параметров строки запроса в GTM. Например, у меня есть веб-адрес https://www.example.com/?product_id=123&category=shoes. Хотите верьте, хотите нет, но есть действительно простой способ превратить данные product_id и категории в Эффект красных глаз - что это такое и как с этим бороться
В сегодняшней версии Фотография для зеленого «Мы расскажем вам, что такое эффект красных глаз и как его избежать, или избавимся от него, когда уже слишком поздно его предотвращать. На самом деле, мне не нужно никому объяснять, что именно является эффектом красных глаз, потому что, вероятно, каждый когда-либо сталкивался с ним. Это проклятие семейной фотографии. Мы делаем снимок, и все в порядке, но затем мы видим
Комментарии
Что произошло на прошлой неделе, что не могло быть предсказано ранее, что приводит к тому, что заказ почтовых услуг правительством не отвечает общественным интересам?Что произошло на прошлой неделе, что не могло быть предсказано ранее, что приводит к тому, что заказ почтовых услуг правительством не отвечает общественным интересам? - Что такое Creative Commons?
Что такое Creative Commons? Нетрудно найти изображения для использования в Интернете - просто используйте поиск изображений. Это хорошо работает, но стоит отметить, что это не обязательно законно. Большинство изображений, которые вы можете найти таким образом, принадлежат их оригинальным создателям. Вероятно, это не имеет значения, если вы используете что-то только для личного пользования или даже для школьного задания, но если вы намерены опубликовать работу, вам нужно убедиться, что Что такое нейтральный цвет?
Что такое нейтральный цвет? Обо всем по порядку. Нейтральный не означает серый, белый или коричневый. В домашнем декоре нейтральный означает светло-средние цвета, которые прекрасно сочетаются с другими цветами. Это означает, что большинство нейтральных оттенков имеют разные цветные оттенки, такие как серый, синий, желтый, коричневый и зеленый. Вот почему вы должны быть осторожны. Последнее, что вы хотите выбрать, если вам не нравится зеленый Что это такое и как мы можем сопоставить его с вашими потребностями?
Что это такое и как мы можем сопоставить его с вашими потребностями? Виртуальный сервер - что это? В случае выделенных серверов, после покупки услуги у вас есть эксклюзивный доступ к одному из компьютеров в центре обработки данных, которые постоянно подключены к Интернету. Однако когда мы говорим о виртуальном сервере, мы имеем в виду отдельную часть выделенного сервера, поскольку серверы VPS создаются путем разделения выделенного сервера на более мелкие части с помощью Что такое Max-Q?
Что такое Max-Q? Прежде чем мы погрузимся в мелкие детали спецификаций, цен и тому подобного, давайте поговорим о Max-Q , Сам термин заимствован из аэрокосмической техники. По сути, графические процессоры Max-Q предназначены для тонких и легких игровые ноутбуки словно «Исполнительный дизайн, как это сделать и что он должен содержать?
«Исполнительный дизайн, как это сделать и что он должен содержать?» ) Сколько времени занимает дизайн интерьера? Продолжительность проекта зависит от двух факторов: во-первых, объем работ по проекту. Это, конечно, не удивительно, что чем больше комнат на этот раз, тем длиннее и длиннее. Следовательно, момент, когда плиточник нетерпеливо Что такое Nvidia GeForce GTX 960?
Что такое Nvidia GeForce GTX 960? Второе поколение оборудования Maxwell от Nvidia появилось с высококлассным GTX 980 а также GTX 970 карты еще в сентябре, но до сих пор не принято для массовых частей прибыть. Вот тут и появляется GTX 960; он разработан для игр 1080p, а его цена в 160 фунтов Что такое DNS-сервер?
Что такое DNS-сервер? Система доменных имен (сокращенно DNS) - это то, что позволяет нам разрешать имя веб-страницы по ее IP-адресу . Таким образом, как пользователи, нам не нужно запоминать последовательность цифр, составляющих IP-адрес (или цифры и буквы в IPV6), и мы можем получить доступ, например, к веб-странице, например «www.facebook.com», по записать это в нашем браузере, а не вводить «31.13.92.36». Преобразование этого удобного для пользователя Что такое эхо-шоу?
Что такое эхо-шоу? Как мы говорим, Echo Show - это, по сути, Echo с сенсорным дисплеем. Новый 10-дюймовый дисплей в корне меняет внешний вид устройства и значительно улучшен по сравнению с 7-дюймовым экраном, представленным в квадратном первом поколении. Все по-прежнему направлено вверх, но новый дизайн ткани помогает интегрировать 1. Что такое продовольственные мили?
1. Что такое продовольственные мили? Продовольственные мили - это продовольственные километры, расстояние, которое продукты питания должны преодолеть, прежде чем они достигнут тарелки потребителя. Здесь зависимость проста: чем больше продовольственных миль, тем больше километров и тем больше времени проходит с момента сбора урожая до покупки. Нетрудно предсказать, что чем длиннее маршрут и время доставки, тем ниже свежесть и ниже пищевая ценность перевозимых продуктов. И как получается, что если на полках магазинов (по всей стране) тысячи экземпляров данной серии, то часто в выбранном магазине мы имеем дело с последним произведением искусства?
И как получается, что если на полках магазинов (по всей стране) тысячи экземпляров данной серии, то часто в выбранном магазине мы имеем дело с последним произведением искусства? Это маркетинговый метод, который хотел бы предложить нам (клиентам), что сейчас самое лучшее время стать владельцем этого телевизора, потому что завтра его может уже не быть? Не обязательно.
Хотите узнать больше о Bootstrap?
Что это такое и как мы можем сопоставить его с вашими потребностями?
Вы когда-нибудь были в ситуации, когда вам нужно было извлечь часть URL и превратить ее в переменную в Google Tag Manager?
Com/?
Что произошло на прошлой неделе, что не могло быть предсказано ранее, что приводит к тому, что заказ почтовых услуг правительством не отвечает общественным интересам?
Что такое Creative Commons?
Что такое Creative Commons?
Что такое нейтральный цвет?
Что это такое и как мы можем сопоставить его с вашими потребностями?
Виртуальный сервер - что это?