Как сделать изящный и простой веб-сайт с помощью Bootstrap 4: 7 шагов

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:50

Цель этого руководства - дать тем, кто знаком с программированием - HTML или каким-либо другим способом, - простое введение в создание онлайн-портфолио с помощью Bootstrap 4. Я проведу вас через первоначальную настройку веб-сайта, как создать несколько различных блоков контента., и несколько проблем, с которыми вы можете столкнуться.

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

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

Примечание. Это руководство не является всеобъемлющим и не должно использоваться вместо того, чтобы научиться программировать на HTML, CSS или Javascript.

Необходимые ресурсы

• Бутстрап 4
• jQuery 3.3.1

Дополнительные ресурсы

• FontAwesome
• Google шрифты
• highlight.js

Если вы хотите перейти к полному примеру или взглянуть на репозиторий:

• Полный пример
• Репозиторий

Примечание: я буду использовать Sublime на изображениях для своих примеров, если вы хотите использовать тот же текстовый редактор.

Шаг 1. Настройка

Настройка папки

1. Создайте где-нибудь папку, в которой вы сможете хранить все, что мы собираемся загружать. Это будет ваш корневой каталог для портфолио.
2. Внутри него создайте папку с именем «bootstrap».
3. Создайте в корневой папке портфолио еще одну папку с именем jquery.

Папка портфолио

| ----- начальной загрузки | ----- jquery

Бутстрап 4

1. Посетите их веб-сайт и нажмите кнопку «Загрузить» под разделом «Скомпилированные CSS и JS».
2. Сохраните файл.zip в папке «Загрузки» или в другом удобном месте.
3. Откройте файл.zip и извлеките папки «css» и «js» в папку «bootstrap», которую вы создали ранее.

jQuery

1. Посетите их веб-сайт и загрузите «несжатый, разрабатываемый jQuery 3.3.1».
2. Сохраните этот файл в папке «jquery», которую вы создали ранее.

Теперь все фреймворки готовы, когда мы начнем работать над реальным портфолио.

Шаг 2: HTML-фрейм (index.html)

Ваше имя

В этом кадре нет ничего слишком сложного, но я хочу объяснить общие цели установки.

Bootstrap JS после jQuery

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

FontAwesome

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

hightlight.js

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

Примечание. Имейте в виду, что я использую жестко запрограммированные ссылки на файлы, такие как два значка и highlight.js. Кроме того, поскольку требуются только Bootstrap и jQuery, не стесняйтесь добавлять или удалять любые другие фреймворки. Если вы их удалите, не забудьте удалить соответствующие строки кода позже.

Шаг 3: CSS-фрейм (style.css)

/ * * Надеюсь, уменьшение цвета bg до серого и изменение стиля шрифта облегчит использование веб-сайта * / body {background: gray; семейство шрифтов: «Open Sans», без засечек; }

/*

* Это гарантирует, что панель навигации находится поверх всего * / nav {z-index: 9999; }

/*

* Это должно сделать текст абзаца более читабельным * / p {font-size: 18px; маржа сверху: 5 пикселей; нижнее поле: 5 пикселей; }

/*

* Это гарантирует, что все мои блоки кода отформатированы правильно * / code {text-align: left; }

/*

* Я не хочу, чтобы в списках были маркеры * / li {list-style-type: none; }

/*

* Ссылки по умолчанию синие, и я хочу, чтобы они соответствовали стилю Bootstrap * / li a, a {color: white; }

/*

* Я привязываю тег класса к div, который содержит панель навигации, чтобы убедиться, что содержимое не перекрывается * /.navFix {padding-bottom: 70px; }

/*

* Увеличенный размер растягивает панель навигации * /.social-media {font-size: 1.3em; }

/*

* Цвет выделения по умолчанию для раскрывающихся ссылок - белый * /.dropdown-menu a: hover {background-color: # 212529; }

/*

* Принудительно устанавливает div, отображающие PDF-файлы на определенную высоту * /.pdfFill {height: 45rem; }

/*

* Добавьте интервал между кнопками и блоками кода * /.codeStyle {padding-top: 30px; }

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

nav z-index

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

выравнивание кода

Поскольку я обычно использую классы Bootstrap «justify-content-center» и «text-center» для выравнивания элементов, я не хочу, чтобы мой код унаследовал этот характер выравнивания по центру. Это легко исправить, перезаписав любые изменения выравнивания и сделав теги кода выровненными по левому краю: это сохраняет интервал табуляции в коде.

заполнение navFix

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

pdf высота

Высота файлов PDF по умолчанию невероятно мала. По сути, он нечитабелен, поэтому я изменил высоту, чтобы оставить достаточно места примерно для одной страницы за раз.

Шаг 4. Фрейм Javascript (javascript.js)

/ * * Это ищет любой элемент с классом toggle и либо скрывает, либо показывает его * / function toggleSection (id, toggleID) {if (document.getElementById (id)) {var divID = document.getElementById (id); var divArray = document.getElementsByClassName (toggleID);

для (var я = 0; я <divArray.length; я ++) {divArray [я].style.display = "нет"; }

divID.style.display = «блок»;

}

вернуть ложь;

}

/*

* Код, который необходимо запускать в определенном порядке * / $ (document).ready (function () {/ * * Загрузить содержимое из файлов * /

/*

* Принудительная небольшая задержка для загрузки данных * / setTimeout (function () {/ * * Выделите весь код, который был загружен в * / $ ('pre code'). Each (function (i, block) { hljs.highlightBlock (block);});}, 1000); });

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

toggleSection

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

загрузка документа

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

$ ('# mq2-intro'). load ("файлы / учебники / mq2 / mq2-intro / content.html");

Это пример того, как мы загружаем контент.

Шаг 5: панель навигации

Инициалы

• Дом
• Обо мне
• Учебники по проектам
• Свяжитесь со мной

• Панель навигации - самый сложный элемент из всего в портфолио. Само сочетание классов делает его чем-то вроде головоломки, требующей от вас постоянного просмотра свода правил.

  Функциональность Bootstrap

  Bootstrap функционирует в основном через разные значения классов. Глядя на сам элемент "nav", нетрудно определить назначение каждого класса:

  Наша «панель навигации» - это вариант «md» (средний), «расширять», «темный». И мы «закрепили» его на «вершине». Это выглядит сбивающим с толку, потому что это беспорядок идентификаторов, но если вы посмотрите на них как на прилагательные к элементу, становится намного легче понять, что происходит.

  Марка

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

  Примечание. Теги «i» на самом деле являются значками FontAwesome, и вы можете получить эти теги со страницы любого значка.

  Переключатель / складная кнопка (мобильный)

  Эта кнопка отображается только на мобильных устройствах. Но поскольку мы включили в объявление «nav», что панель навигации должна быть расширяемой, эти элементы соединяются друг с другом через свои идентификаторы и идентификаторы «переключения данных».

  Ссылки на навигационную панель (левая сторона)

  Эти ссылки полностью зависят от того, какие категории вам нужны для вашего портфолио. Я включил несколько типичных примеров в качестве отправной точки, но все они не совпадают. Возможно, вам не понадобится раздел «Учебники», потому что вы специализируетесь на создании художественных скульптур. Каждый элемент «li» можно скопировать и вставить, поэтому, как только вы определите, что вам нужно, легко настроить навигацию.

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

  Ссылки на навигационную панель (правая сторона)

  Предоставляя правильный список ссылок классу "ml-auto", Bootstrap равномерно разделяет два списка. Это создает четкое разделение на левую и правую стороны. Я решил использовать это пространство для ссылок в социальных сетях, потому что это очень распространенный и популярный метод увеличения вашего присутствия. Если это не актуально, вы можете удалить эти ссылки, чтобы найти строку поиска, информацию для входа и т. Д. Но просто помните, что это важное пространство для использования. И аналогично ссылкам на панели навигации слева, вы также можете скопировать и вставить их.

  Примечание. Если вы планируете использовать уже настроенные мной ссылки, измените «имя пользователя» в самих ссылках «href».

  Шаг 6. Домашняя страница

  

  

  

  Ваше имя

  Программист Писатель Геймер

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

  Формат таблицы

  Домашняя страница настроена как таблица. Я бы не стал полагаться на свои потрясающие дизайнерские навыки при создании вашего конечного продукта, но я добавил различные варианты комбинаций строк и столбцов, чтобы показать, что это очень динамично и гибко. Вы можете создать 3 строки и 2 столбца, чтобы кнопки располагались слева, а содержимое - справа, или вы можете сделать что-то совершенно другое. Просто нужно немного поэкспериментировать.

  Кнопки

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

  Содержание программного кода

  Теги «code» - это теги по умолчанию, которые highlight.js использует для управления выделением. Если вы помните из файла javascript.js, там есть раздел для загрузки содержимого из других файлов.

  $ ('# домашний-программист-макрос'). load ("files / home / watchLoot.mac");

  • Первая часть ищет «id» элемента, в который вы хотите вставить контент.
  • Вторая часть - это расположение файла, который вы хотите загрузить.

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

  YouTube видео

  Встроенный iframe на самом деле исходит от самого YouTube. Я не буду подробно объяснять, как их получить, но когда вы выбираете «Поделиться» видео, есть опция «Встроить», которая поможет вам сгенерировать код, необходимый для отображения вашего видео на веб-странице.

  Шаг 7. Заглядывая в будущее

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

  Документация Bootstrap

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

  W3Школы

  W3Schools - замечательный веб-сайт, на котором вы можете узнать обо всем, что связано с веб-программированием и разработкой. Они намного умнее меня и охватывают практически все функции HTML, CSS и Javascript, о которых вы только можете подумать.

  Размещение вашего портфолио

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

  Экспериментируйте и получайте удовольствие

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