Bootstrap 4: 7 қадамдарымен тегіс және қарапайым веб -сайтты қалай жасауға болады

2024 Автор: John Day | [email protected]. Соңғы өзгертілген: 2024-01-30 10:24

Нұсқаулықтың мақсаты - HTML немесе басқаша бағдарламалауды білетіндерге Bootstrap 4 көмегімен онлайн портфолио жасауға қарапайым кіріспе беру. Мен сізге веб -сайттың бастапқы баптауы, бірнеше түрлі мазмұн блоктарын құру туралы айтып беремін., және сізде бірнеше проблемалар туындауы мүмкін.

Портфолио оны басқаруға мүмкіндік беретін бірнеше кіші қадамдарға бөлінеді: HTML жақтауы, CSS фреймі, Javascript кадры, шарлау тақтасы және басты бет (мазмұн блоктары бар).

Егер менің түсініктемелерім сізді әлі де шатастыратын болса, сұрақтарыңызға, ұсыныстарыңызға немесе google -ге шатастырған элементте пікір қалдырыңыз. Веб -сайттар мен Bootstrap бағдарламалау үшін көптеген ресурстар бар.

Ескерту: Бұл нұсқаулық толық емес және оны HTML, CSS немесе Javascript-те бағдарламалауды үйрену үшін қолдануға болмайды.

Қажетті ресурстар

• Жүктеу жолағы 4
• jQuery 3.3.1

Қосымша ресурстар

• FontAwesome
• Google қаріптері
• бөлектеу.js

Егер сіз толық мысалға көшкіңіз келсе немесе репозиторийге қарағыңыз келсе:

• Толық мысал
• Репозиторий

Ескерту: Егер сіз сол мәтіндік редактормен бірге жүргіңіз келсе, мен мысалдар үшін Sublime суреттерінде қолданамын.

1 -қадам: Орнату

Қалтаны орнату

1. Біз жүктейтін барлық нәрсені сақтай алатын қалта жасаңыз. Бұл портфолио үшін сіздің негізгі каталогыңыз болады.
2. Оның ішінде «bootstrap» деп аталатын қалта жасаңыз
3. Өзіңіздің портфолио қалтаңызда «jquery» деп аталатын басқа қалта жасаңыз

Портфолио қалтасы

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

Жүктеу жолағы 4

1. Олардың веб -сайтына кіріп, «CSS және JS құрастырылған» бөлімінің астындағы «Жүктеу» түймесін басыңыз.
2. . Zip файлын «Жүктеулер» қалтасына немесе басқа ыңғайлы жерге сақтаңыз.
3. . Zip файлын ашып, бұрын жасаған «жүктеу жолағы» қалтасына «css» және «js» қалталарын шығарыңыз.

jQuery

1. Олардың веб -сайтына кіріп, «қысылмаған, дамытуға арналған jQuery 3.3.1» жүктеп алыңыз
2. Бұл файлды бұрын жасаған «jquery» қалтасында сақтаңыз.

Біз нақты портфолио бойынша жұмыс жасай бастағанда, барлық құрылымдар дайын.

2 -қадам: HTML Frame (index.html)

Сіздің атыңыз

Бұл кадр тым күрделі емес, бірақ мен орнатудың жалпы мақсатын түсіндіргім келеді.

JQuery кейін JS жүктеу

Bootstrap Javascript файлы мен jQuery файлдарының арасында бір -біріне сәйкес келетін сияқты. Мен бұл қабаттасудың қаншалықты кең екенін көру үшін тестілеуден өтпедім, бірақ бір мысал - мен шарлау тақтасында қолданатын ашылмалы функция. Егер сіз алдымен Bootstrap -ке жүктесеңіз, ашылмалы түйме жұмыс істемейді.

FontAwesome

Егер сіз кез келген веб -әзірлемені жасаған болсаңыз, FontAwesome деген не екенін білетін шығарсыз. Егер бұлай болмаса, бұл қосымша теңшеуге арналған құралдар жиынтығын қамтитын белгішелер жиынтығы. Егер сіз мен сияқты болсаңыз және мүлдем өнерлі талант болмаса, бұл өте пайдалы.

hightlight.js

Бұл жүйе веб -беттерде кодты динамикалық ерекшелеуге мүмкіндік береді. Сіз оны қарапайым бағдарламалау тілдерін қолдансаңыз, мен қолданатын басқа құрылымдар сияқты импорттай аласыз, бірақ тілдердің реттелетін жиынтығын жүктеу мүмкіндігі бар. Мен соңғы нұсқаны бірнеше макро және ини тілдерінің арқасында таңдадым, бірақ бұл сізге байланысты.

Ескерту: Мен екі белгіше мен ta'kid.js сияқты файлдарға қатаң кодталған сілтемелерді қолданатын жерлер туралы біліңіз. Сонымен қатар, тек Bootstrap және jQuery қажет болғандықтан, кез келген басқа жақтауды қосуға немесе алып тастауға болады. Егер сіз біреуін жойсаңыз, кейінірек сәйкес келетін код жолдарын алып тастауды ұмытпаңыз.

3 -қадам: CSS Frame (style.css)

/ * * Bg түсінің сұр түске боялуы және қаріп стилінің өзгеруі веб -сайтты тұтынуды жеңілдетеді деп үміттенемін */ body {background: grey; font-family: 'Open Sans', sans-serif; }

/*

* Бұл навигациялық жолақтың барлығының үстінде екеніне көз жеткізеді */ nav {z-index: 9999; }

/*

* Бұл абзац мәтінін оқуға ыңғайлы етеді */ p {font-size: 18px; жоғарғы жиегі: 5 пиксель; төменгі жиегі: 5 пиксель; }

/*

* Бұл менің барлық код блоктарымның дұрыс пішімделгеніне көз жеткізеді */ code {text-align: left; }

/*

* Мен тізімдерде таңбалардың болуын қаламаймын */ li {list-style-type: none; }

/*

* Сілтемелер әдепкі бойынша көк болады, мен олардың Bootstrap стиліне сәйкес келуін қалаймын */ li a, {{color: white; }

/*

* Мазмұн қабаттаспағанына көз жеткізу үшін мен навигацияны қамтитын div-ге сынып белгісін байлап қоямын */.navFix {padding-bottom: 70px; }

/*

* Көлемі ұлғайтады navbar */.social-media {font-size: 1.3em; }

/*

* Ашылмалы сілтемелер үшін әдепкі түс-ақ */.dropdown-menu a: hover {background-color: #212529; }

/*

* Белгілі бір биіктікке pdf файлдарын көрсететін divs мәжбүрлейді */.pdfFill {height: 45rem; }

/*

* Түймелер мен код блоктары арасында біраз аралық қосыңыз */.codeStyle {padding-top: 30px; }

Мен сізді біраз уақыттан кейін үнемдеу үшін осы кадрға мазмұнға негізделген CSS элементтерін қостым. Олардың барлығы өте қарапайым және оқырмандар үшін портфолио арқылы өзара әрекеттесуді жеңілдететін өмір сапасындағы өзгерістер.

nav z-индексі

Менде веб-әзірлеу тәжірибесі өте шектеулі, сондықтан мен бұл Bootstrap-тің навигациялық жолағын іске асыру кезінде жиі кездесетін мәселе екеніне сенімді емеспін, бірақ кез-келген бағыттау сипаттамасы болмаса, навигация жолағы басқа мазмұнның астында пайда болады. Bootstrap карталары. Бұл жиналмалы шарлау тақтасында байқалады, бірақ мен қауіпсіздік үшін индекстің өзгеруін енгіздім.

кодты туралау

Мен әдетте элементтерді туралау үшін Bootstrap-тің «негіздеу-мазмұн-орталығы» және «мәтін орталығы» сыныптарын қолданатындықтан, менің кодымның орталыққа теңестірілген табиғатты мұра етуін қаламаймын. Бұл кез келген туралау өзгерістерін қайта жазу және код тегтерін солға туралау арқылы оңай түзетіледі: бұл кодтағы қойынды аралығын сақтайды.

navFix толтыру

Bootstrap шарлау тақтасы беттің жоғарғы жағына жабысып қалса, оның астында мазмұн жүктеледі. Менің ойымша, бұл орын алады, себебі навигациялық жолақ беттің орнына көріну терезесінің жоғарғы жағында орналасқан. Қарамастан, бұл навигация мен мазмұнның қалған бөлігі арасындағы кеңістікті ұлғайту арқылы шешіледі.

pdf биіктігі

Pdf файлдарының әдепкі биіктігі өте аз. Бұл оқылмайды, сондықтан мен бір уақытта шамамен бір бетке жеткілікті орын беру үшін биіктігін өзгерттім.

4 -қадам: Javascript Frame (javascript.js)

/ * * Бұл 'ауыстыру' класы бар кез келген элементті іздейді және оны жасырады немесе жасырады */ функция 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 = «блок»;

}

жалған қайтару;

}

/*

* Белгілі бір ретпен іске қосылуы қажет код */ $ (құжат).ready (функция () {/ * * Файлдардан мазмұнды жүктеу */

/*

* Кішігірім кідірісті деректерді жүктеуге мәжбүрлеңіз */ setTimeout (function () {/ * * */ $ ('алдын ала код')) жүктелген барлық кодты бөлектеңіз. Әрқайсысы (функция (i, блок) { hljs.highlightBlock (блок);});}, 1000); });

Бұл портфолионы өзгерту мен басқаруды жеңілдету үшін мен бір беттік форматты қолдануды шештім. Ол бәрін жергілікті түрде сақтайды және мазмұнды жүктеуді тездетеді.

toggleSection

Мен қандай мазмұнды көрсету немесе жасыру керектігін басқару үшін сынып мәндерін қолдандым, себебі мен көбінесе көптеген элементтерді бөлу және топтау үшін divs қолданамын. Сіз мұны жеке түймелерді біріктіру үшін пайдалана аласыз, бірақ мазмұнды көрсетпеу үшін «блок» дисплейін орнатпас бұрын қосымша тексеруді қажет етеді.

құжатты жүктеу

Мен бұны қостым, себебі тұрақты HTML файлдарына тәуелсіз бағдарламалау кодын қосуға болады. Біз басқа файлдардан мазмұнды жүктегеннен кейін процесті мәжбүрлеу үшін динамикалық бөлектеудің бұл әдісін қолдана аламыз.

$ ('#mq2-кіріспе'). жүктеу («файлдар/оқулықтар/mq2/mq2-кіріспе/мазмұн.html»);

Бұл мазмұнды қалай жүктейтіндігіміздің мысалы.

5 -қадам: Шарлау тақтасы

Алғашқы әріптер

• Үй
• Мен туралы
• Жобалар оқулықтары
• Менімен хабарлас

• Навигациялық жолақ портфельдегі барлығының ішіндегі ең күрделі элемент болып табылады. Сыныптардың таза үйлесімі оны ереже кітабына үздіксіз қарауды қажет ететін жұмбақ тәрізді етеді.

  Bootstrap функциясы

  Bootstrap әр түрлі сынып мәндері арқылы жұмыс істейді. «Нав» элементіне қарап, әр сыныптың мақсатын анықтау қиын емес:

  Біздің «навбар» - бұл «md» (орташа), «кеңейту» мүмкіндігі бар, «қараңғы» опциясы. Ал біз оны «жоғарыға» «бекітіп» қойдық. Бұл түсініксіз болып көрінеді, себебі бұл идентификаторлардың жиынтығы, бірақ егер сіз оларға сын есім ретінде қарасаңыз, не болып жатқанын түсіну оңайырақ болады.

  Бренд

  Бренд - бұл сол жақ жоғарғы жағындағы әрбір веб -сайтта кездесетін әдеттегі логотип пен атау. Бұл әр қолданушы дәл осы сәтте күтетін сыналған дизайн элементі.

  Ескерту: «i» тегтері - бұл FontAwesome белгішелері, және сіз бұл тегтерді кез келген белгішенің бетінен аласыз.

  Ауыстырғыш/жиналмалы түйме (ұялы)

  Бұл түйме мобильді құрылғыларда ғана көрсетіледі. Бірақ біз навигация жолағын кеңейту керек деп «nav» декларациясын енгізгендіктен, бұл элементтер бір-біріне өздерінің идентификаторлары мен «деректерді ауыстыру» идентификаторлары арқылы қосылады.

  Navbar сілтемелері (сол жақта)

  Бұл сілтемелер сіздің портфолио үшін қандай санаттар қажет екеніне байланысты. Мен бастапқы мысал ретінде бірнеше типтік мысалдарды енгіздім, бірақ ешкім бірдей емес. Сізге «Оқулықтар» бөлімі қажет болмауы мүмкін, себебі сіз көркем мүсіндерді жасауға назар аударасыз. Әрбір «li» элементін көшіруге және қоюға болады, сондықтан сізге не қажет екенін анықтағаннан кейін навигацияны реттеу оңай.

  Ескерту: Сіз басқа ашылмалы мәзірлерде ашылмалы мәзірлерді техникалық түрде жасай аласыз, бірақ интерфейсті таза ету үшін көбірек CSS және Javascript қосқыңыз келмесе, мен оны ұсынбаймын.

  Navbar сілтемелері (оң жақта)

  Сілтемелердің дұрыс тізімін «ml-auto» класын бере отырып, Bootstrap екі тізімді біркелкі бөледі. Бұл таза және оң жақ бөлуді жасайды. Мен бұл кеңістікті әлеуметтік медиа сілтемелері үшін пайдалануды шештім, себебі бұл сіздің қатысуды арттыру үшін өте кең таралған және танымал әдіс. Егер бұл маңызды болмаса, сіз бұл сілтемелерді іздеу жолағы, кіру ақпараты және т.б. үшін алып тастай аласыз. Бірақ бұл маңызды кеңістік екенін ұмытпаңыз. Сол жақтағы навигациялық сілтемелерге ұқсас, сіз оларды көшіріп, қоюға болады.

  Ескерту: Егер менде орнатылған сілтемелерді пайдалануды жоспарласаңыз, нақты «href» сілтемелеріндегі «пайдаланушы атын» өзгертіңіз.

  6 -қадам: Басты бет

  

  

  

  Сіздің атыңыз

  Бағдарламашы жазушы Геймер

  Бұл бөлім және сіздің мазмұнның келесі беттері сіздің портфолиоға не қосқыңыз келетініне байланысты болады. Мен әр мазмұн түріне жауап бере алмаймын, бірақ мен суреттерді, pdf файлдарды, бейнелерді, код блоктарын, кейбір типтік қосуларды қосуға тырыстым.

  Кесте форматы

  Басты бет кесте ретінде жұмыс істеуге арналған. Мен сіздің түпкілікті өнімді жасау үшін таңғажайып дизайнерлік дағдыларыма сенбеймін, бірақ мен оның динамикалық және икемді екенін көрсету үшін жолдар мен бағандар комбинацияларының әр түрлі нұсқаларын қостым. Сіз 3 жол мен 2 баған жасай аласыз, сол жақта батырмалар, ал мазмұн оң жақта болады немесе мүлде басқа нәрсе жасай аласыз. Кішкене эксперимент қажет.

  Түймелер

  Бұл функциялар кәдімгі түймелер сияқты жұмыс істейді. Бұл жерде Bootstrap -тің жалғыз нақты интеграциясы тақырыптың қалған бөлігіне сәйкес келетін сәндеуден туындайды. Әйтпесе, мазмұныңызды көрсету үшін қажет болғанша көп немесе аз түймешіктер жасаңыз, содан кейін hvef сілтемелерін divs идентификаторларымен сәйкестендіріңіз.

  Код мазмұнын программалау

  «Код» тегтері - бөлектеудің барлық элементтерін басқару үшін focus.js пайдаланатын әдепкі тегтер. Егер сіз javascript.js файлынан есте сақтасаңыз, басқа файлдардың мазмұнын жүктеуге арналған бөлім бар.

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

  • Мұның бірінші бөлігі мазмұнды енгізгіңіз келетін элементтің «идентификаторын» іздейді.
  • Екінші бөлім - сіз жүктегіңіз келетін файлдың орналасқан жері.

  Ескерту: Мазмұн толық жүктелмейді, себебі бұл веб -бетті серверде емес, жергілікті жерде өңдеуге мүмкіндік бар. Мұны Нұсқаулықтың соңында айтатын әртүрлі әдістермен шешуге болады.

  YouTube бейнесі

  Енгізілген «iframe» іс жүзінде YouTube -тен келеді. Мен оларды қалай алуға болатынын кеңінен түсіндірмеймін, бірақ сіз «Бөлісу» бөліміне кіргенде, веб -бетте бейнеңізді көрсету үшін қажетті кодты құруға көмектесетін «Ендіру» опциясы бар.

  7 -қадам: Алға қарау

  Мен сіздің веб -сайтыңызға қосқыңыз келетін кейбір элементтерді немесе мазмұнды қамтымағаныма өте жақсы мүмкіндік бар. Бақытымызға орай, келесі қадамдарды өзіңіз жасаудың көптеген жақсы нұсқалары бар.

  Bootstrap құжаттамасы

  Bootstrap құжаттамасы-егер сіз алдын-ала бағдарламаланған элементтерді іздесеңіз және эксперимент жасау үшін портфолиоға қоюға болатын мысалдар болса, бастау үшін тамаша орын. Мен карталарға, карусельдерге немесе формаларға тиіспедім. Мен опцияларды көру үшін «Компоненттер» бөлімін қарауды ұсынамын.

  W3 Мектептері

  W3Schools - бұл веб -бағдарламалау мен дамытуға қатысты барлық нәрсені білуге болатын тамаша веб -сайт. Олар меннен әлдеқайда ақылды, және олар сіз ойлаған барлық HTML, CSS және Javascript функцияларын қамтиды.

  Сіздің портфолиоңызды орналастыру

  Бұл нұсқаулық сіздің веб -сайтыңызды бірнеше платформада орналастыруды үйретеді. Бұл сізге портфолиоңызды адамдарға, рекрутерлерге және т.б. көрсете алу үшін қажет қадамдар.

  Тәжірибе жасап, көңіл көтеріңіз

  Керемет портфолио құрудың бірден -бір жолы - эксперимент жасау және қызықты болып көрінетін нәрсені және бәрін сынап көру. Көптеген сәнді дизайн портфолиолары мен веб-сайттар керемет ауысу эффектілерін немесе динамикалық фонды пайдаланады, бірақ олардың ешқайсысы алдын ала дайындалған жоқ.