Как да си направим елегантен и прост уебсайт с Bootstrap 4: 7 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:51

Целта на тази инструкция е да даде на запознатите с програмирането - HTML или по друг начин - просто въведение в създаването на онлайн портфолио с Bootstrap 4. Ще ви преведа през първоначалната настройка на уебсайта, как да създадете няколко различни блока със съдържание, и няколко проблема, които може да срещнете.

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

Ако моите обяснения за нещо все още ви оставят объркани, не се колебайте да оставите коментар с вашите въпроси, предложения или да потърсите в гугъл елемента, който ви вълнува. Налични са много ресурси за програмиране на уебсайтове и Bootstrap.

Забележка: Това ръководство не е всеобхватно и не трябва да се използва като заместител, за да научите как да програмирате в HTML, CSS или Javascript.

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

• Bootstrap 4
• jQuery 3.3.1

Незадължителни ресурси

• FontAwesome
• Google шрифтове
• highlight.js

Ако искате да преминете към пълния пример или да разгледате хранилището:

• Пълен пример
• Хранилище

Забележка: Ще използвам Sublime в снимките за моите примери, ако искате да следвате заедно със същия текстов редактор.

Стъпка 1: Настройка

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

1. Създайте папка някъде, където можете да съхранявате всичко, което ще изтегляме. Това ще бъде вашата основна директория за портфолиото.
2. Създайте папка вътре в тази, наречена „bootstrap“
3. Създайте друга папка в папката на основното портфолио с име „jquery“

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

| ----- bootstrap | ----- jquery

Bootstrap 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: grey; font-family: 'Open Sans', sans-serif; }

/*

* Това гарантира, че навигационната лента е отгоре на всичко */ nav {z-index: 9999; }

/*

* Това би трябвало да направи текста на абзаца по-четим */ p {font-size: 18px; margin-top: 5px; margin-bottom: 5px; }

/*

* Това гарантира, че всичките ми кодови блокове са форматирани правилно */ 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-меню a: hover {background-color: #212529; }

/*

* Принудителни диви, показващи pdfs на определена височина */.pdfFill {височина: 45rem; }

/*

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

Включих съдържателните CSS елементи в тази рамка, за да се опитам да ви спестя време по-късно. Всички те са много прости и са предимно промени в качеството на живот, които улесняват взаимодействието с портфолиото за читателите.

nav z-индекс

Имам много ограничен опит в уеб разработката, така че не съм сигурен дали това е често срещан проблем при внедряването на лентата за навигация на Bootstrap, но без спецификации за ориентация отпред към гърба, лентата за навигация всъщност ще се показва под друго съдържание, като например Карти на Bootstrap. Това е най -забележимо при сгъваемата навигационна лента, но все пак включих промяната на индекса за безопасност.

подравняване на кода

Тъй като обикновено използвам класовете "justify-content-center" и "text-center" на Bootstrap за подравняване на елементите, не искам кодът ми да наследи тази центрирана природа. Това лесно се коригира, като се презапишат всички промени в подравняването и се правят кодови тагове подравнени вляво: това запазва разстоянието между разделите в кода.

подложка navFix

Когато лентата за навигация на Bootstrap е залепена в горната част на страницата, съдържанието ще се зареди под нея. Вярвам, че това се случва, защото навигационната лента всъщност е залепена в горната част на прозореца за изглед вместо на самата страница. Независимо от това, това се коригира чрез увеличаване на пространството между навигационната лента и останалото съдържание.

височина на pdf

Височината на pdf файловете по подразбиране е невероятно малка. По същество е нечетлив, затова промених височината, за да се опитам да дам достатъчно място за приблизително една страница наведнъж.

Стъпка 4: Javascript Frame (javascript.js)

/ * * Това търси всеки елемент с 'toggle' клас и го скрива или скрива */ function toggleSection (id, toggleID) {if (document.getElementById (id)) {var divID = document.getElementById (id); var divArray = document.getElementsByClassName (toggleID);

for (var i = 0; i <divArray.length; i ++) {divArray .style.display = "няма"; }

divID.style.display = "блок";

}

return false;

}

/*

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

/*

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

За да направя това портфолио лесно да се променя и управлява, реших да използвам едностраничен формат. Той поддържа всичко локално в по -голямата си част и прави зареждането на съдържанието по -бързо.

toggleSection

Използвах стойностите на класа, за да управлявам какво съдържание трябва да се показва или скрива, защото през повечето време използвам divs за разделяне и групиране на няколко елемента заедно. Можете да използвате това и за групиране на отделни бутони, но това изисква допълнителна проверка, преди да настроите дисплея „блокиране“, за да не се показва съдържание.

зареждане на документи

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

$ ('#mq2-intro'). load ("files/tutorials/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 с идентификационните номера за диви.

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

  Етикетите „code“са маркерите по подразбиране, които highlight.js използва за управление на всички откроявания. Ако си спомняте от файла javascript.js, има раздел за зареждане на съдържание от други файлове.

  $ ('#home-programmer-macro'). load ("files/home/watchLoot.mac");

  • Първата част от това търси „id“на елемента, в който искате да вмъкнете съдържанието.
  • Втората част е местоположението на файла, който искате да заредите.

  Забележка: Съдържанието всъщност няма да се зареди напълно, защото има голям шанс да редактирате тази уеб страница локално, вместо на сървър. Това може да бъде разрешено по няколко различни начина, които ще разгледам в края на Instructable.

  YouTube видео

  Вградената „iframe“всъщност идва от самия YouTube. Няма да обяснявам подробно как да ги получа, но когато отидете на „Споделяне“на видеоклип, има опция „Вграждане“, която ще ви помогне да генерирате кода, необходим за показване на видеоклипа ви на уеб страницата.

  Стъпка 7: Гледане напред

  Има голям шанс да не покрия някакъв елемент или тип съдържание, който искате да включите във вашия уебсайт. За щастие има много добри възможности да направите сами следващите стъпки.

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

  Документацията на Bootstrap е чудесно място за начало, ако търсите предварително програмирани елементи и имате примери, с които можете да копирате и поставите в портфолиото си, за да експериментирате. Не докосвах карти, въртележки или формуляри. Силно препоръчвам да разгледате раздела „Компоненти“, за да видите опциите.

  W3Schools

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

  Хостинг на вашето портфолио

  Тази инструкция ви учи как да хоствате уебсайта си на няколко различни платформи. Това са стъпките, които трябва да предприемете, ако искате да можете да покажете на портфолиото си на хора, служители за набиране на персонал и т.н.

  Експериментирайте и се забавлявайте

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