Bootstrap 4 менен кантип жарашыктуу жана жөнөкөй вебсайт жасоо керек 4: 7 кадам

2024 Автор: John Day | [email protected]. Акыркы өзгөртүү: 2024-01-30 10:40

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

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

Эгерде менин бир нерсеге түшүндүрмөлөрүм дагы эле сизди түшүнүксүз кылып жатса, анда сурооңуз, сунуштарыңыз же комментарий калтырып, чаташтырып жаткан элементиңизди калтырыңыз. Вебсайттарды жана Bootstrapты программалоо үчүн көптөгөн ресурстар бар.

Эскертүү: Бул колдонмо бардыгын камтыбайт жана HTML, CSS же Javascriptте программалоону үйрөнүү үчүн колдонулбашы керек.

Керектүү ресурстар

• Bootstrap 4
• jQuery 3.3.1

Кошумча булактар

• FontAwesome
• Google Шрифттери
• баса.js

Эгерде сиз толук мисалга өтүүнү же репозиторийди кароону кааласаңыз:

• Толук мисал
• Репозиторий

Эскертүү: Эгерде сиз ошол эле текст редактору менен бирге иштөөнү кааласаңыз, мен мисалдар үчүн сүрөттөрдө Sublime колдоном.

1 -кадам: Орнотуу

Папканы орнотуу

1. Биз жүктөп жаткан нерселердин бардыгын сактай турган жерге папка түзүңүз. Бул портфолио үчүн сиздин түп каталогуңуз болот.
2. Анын ичинде "bootstrap" аттуу папка түзүңүз
3. Өзүңүздүн портфолио папкаңыздын ичинде "jquery" деген башка папка түзүңүз

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

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

Bootstrap 4

1. Алардын вебсайтына кирип, "Compiled CSS and JS" бөлүмүнүн астындагы "Download" баскычын чыкылдатыңыз.
2. . Zip файлын "Жүктөөлөр" папкасына же башка ыңгайлуу жерге сактаңыз.
3. . Zip файлын ачып, "css" жана "js" папкаларын мурда жасаган "bootstrap" папкасына чыгарыңыз.

jQuery

1. Алардын веб -сайтына кирип, "кысылбаган, иштеп чыгуу jQuery 3.3.1" жүктөп алыңыз
2. Бул файлды мурда жасаган "jquery" папкасынын ичинде сактаңыз.

Биз чыныгы портфолионун үстүндө иштей баштаганда, бардык алкактар азыр даяр.

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

Сиздин Атыңыз

Бул алкак өтө татаал нерсе эмес, бирок мен орнотуунун жалпы максаттарын түшүндүргүм келет.

JQueryден кийин Bootstrap JS

Bootstrapтын Javascript файлы менен jQueryдин ортосунда кандайдыр бир окшоштук бар окшойт. Мен бул кайчылашуунун канчалык кеңири экенин текшерген жокмун, бирок бир мисал - мен навигация тилкесинде колдонгон ачылуучу функция. Эгер сиз биринчи Bootstrapка жүктөсөңүз, ачылуучу баскыч иштебейт.

FontAwesome

Эгерде сиз кандайдыр бир вебди иштеп чыксаңыз, анда FontAwesome деген эмне экенин билишиңиз мүмкүн. Бирок андай эмес болсо, бул кошумча ыңгайлаштыруу үчүн инструменттерди камтыган сөлөкөттөр топтому. Эгерде сиз мага окшош болсоңуз жана эч кандай көркөм талантыңыз болбосо, бул абдан пайдалуу.

hightlight.js

Бул алкак веб -беттерде динамикалык кодду бөлүп көрсөтүүгө мүмкүндүк берет. Сиз аны кадимки программалоо тилдерин гана колдонсоңуз, мен колдонгон башка алкактар сыяктуу эле импорттой аласыз, бирок тилдердин ыңгайлаштырылган топтомун жүктөө мүмкүнчүлүгү да бар. Мен акыркы вариантты бир нече макро жана ини тилдеринен улам тандадым, бирок бул толугу менен сизге байланыштуу.

Эскертүү: Мен эки сүрөтчөлөргө жана онцолуу.js сыяктуу файлдарга каттуу шилтемелерди колдонгон жерлерден кабардар болуңуз. Ошондой эле, Bootstrap жана jQuery гана талап кылынгандыктан, башка алкактарды кошуп же алып салыңыз. Эгерде сиз бирөөнү алып салсаңыз, кийинчерээк туура келген коддорду алып салууну унутпаңыз.

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

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

/*

* Бул nav барынын бардыгынын үстүндө турганын текшерет */ nav {z-index: 9999; }

/*

* Бул абзацтын текстин окууга ыңгайлуу кылышы керек */ p {font-size: 18px; маржа-топ: 5px; маржа-түбү: 5px; }

/*

* Бул менин бардык код блокторумдун туура форматталганын текшерет */ code {text-align: left; }

/*

* Мен тизмелердин окчолорго ээ болушун каалабайм */ li {list-style-type: none; }

/*

* Шилтемелер демейки боюнча көк түстө, мен алардын Bootstrap стилине */ ли а, a {color: white; }

/*

* Мен мазмундун бири-бирине дал келбеши үчүн, класстын тегин навбарды камтыган divга байлап коём */.navFix {padding-bottom: 70px; }

/*

* Өлчөмү чоңойгон navbar */.social-media {font-size: 1.3em; }

/*

* Ачылуучу шилтемелер үчүн демейки бөлүп көрсөтүү түсү ак */.dropdown-меню a: hover {background-color: #212529; }

/*

* Белгилүү бир бийиктикке pdfs көрсөткөн divs мажбурлоо */.pdfFill {бийиктиги: 45rem; }

/*

* Баскычтар менен код блокторунун ортосуна бир аз боштукту кошуңуз */.codeStyle {padding-top: 30px; }

Мен кийинчерээк бир аз убакытты сактап калуу үчүн, контентке негизделген CSS элементтерин бул алкакка коштум. Алардын баары абдан жөнөкөй жана негизинен окурмандар үчүн портфолио менен иштөөнү жеңилдетүүчү жашоо сапаты өзгөрүүлөрү.

nav z-index

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

кодду тегиздөө

Мен, адатта, элементтерди тегиздөө үчүн Bootstrapтын "justify-content-center" жана "text-center" класстарын колдонгонум үчүн, менин кодум ошол борборлоштурулган табиятты мурасташын каалабайм. Бул оңдоп-түзөө боюнча бардык өзгөртүүлөрдү кайра жазуу жана код тегдерин солго тегиздөө аркылуу оңдолот: бул коддогу өтмөктөр аралыкты сактайт.

navFix толтуруу

Bootstrapтын навигациялык тилкеси беттин жогору жагына жабышканда, мазмуну анын астына жүктөлөт. Мен ишенем, бул navbar чындыгында баракчанын ордуна көрүү терезесинин чокусуна жабышкан. Карабастан, бул навбар менен калган мазмундун ортосундагы боштукту көбөйтүү менен чечилет.

pdf бийиктиги

PDF файлдарынын демейки бийиктиги укмуштай кичине. Бул негизи окулбайт, ошондуктан мен бийиктигин өзгөртүп, бир убакта болжол менен бир барак үчүн жетиштүү орун бердим.

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

/ * * Бул 'которуштуруу' классы бар каалаган элементти издейт жана аны жашырат же көрсөтпөйт */ 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 = "none"; }

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

}

жалган кайтаруу;

}

/*

* Белгилүү бир тартипте иштетилиши керек болгон код */ $ (документ).ready (function () {/ * * Файлдардан мазмунду жүктөө */

/*

* Маалыматтарды жүктөө үчүн бир аз кечигүүнү мажбурлаңыз */ setTimeout (function () {/ * * */ $ ('алдын ала код') ичинде жүктөлгөн бардык кодду бөлүп көрсөтүңүз. Ар бири (функция (i, блок) { hljs.highlightBlock (блок);});}, 1000); });

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

toggleSection

Мен кайсы мазмунун көрсөтүү же жашыруу керектигин башкаруу үчүн класс баалуулуктарын колдондум, анткени көбүнчө бир нече элементтерди бөлүү жана топтоо үчүн divs колдонуп жатам. Сиз муну жеке баскычтарды топтоштуруу үчүн колдоно аласыз, бирок эч кандай мазмун көрсөтүлбөшү үчүн "блок" дисплейин орнотуудан мурун кошумча текшерүүнү талап кылат.

документ жүктөө

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

$ ('#mq2-intro'). load ("files/tutorials/mq2/mq2-intro/content.html");

Бул контентти кантип жүктөөбүздүн мисалы.

5 -кадам: Чабыттоо тилкеси

Баш тамгалар

• Үй
• Мен жөнүндө
• Projects Tutorials
• Мени менен байланыш

• Навигация тилкеси портфелдеги баарынан татаал элемент. Класстардын ачык айкалышы аны эреже китебине үзгүлтүксүз кароону талап кылган табышмак сыяктуу кылат.

  Bootstrap Функционалдуулугу

  Bootstrap негизинен ар кандай класстык баалуулуктар аркылуу иштейт. "Нав" элементинин өзүнө карап, ар бир класстын максатын аныктоо өтө кыйын эмес:

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

  Бренд

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

  Эскертүү: "i" тегдери чындыгында FontAwesome сүрөтчөлөрү болуп саналат жана сиз бул белгилерди каалаган сөлөкөттүн баракчасынан аласыз.

  Которуу/жыйноо баскычы (мобилдик)

  Бул баскыч мобилдик түзмөктөрдө гана көрүнөт. Бирок биз навигациялык тилкени кеңейтүү керектигин "nav" декларациясына киргизгендиктен, бул элементтер бири-бирине идентификаторлору жана "data-toggle" идентификаторлору аркылуу туташат.

  Navbar шилтемелери (сол жагы)

  Бул шилтемелер толугу менен портфолиоңузга кандай категорияларга муктаж экениңизден көз каранды. Мен баштапкы чекит катары бир нече типтүү мисалдарды киргиздим, бирок эч ким окшош эмес. Сизге "Окутуулар" бөлүмүнүн кереги жок болушу мүмкүн, анткени сиз көркөм скульптураларды жасоого басым жасайсыз. Ар бир "ли" пунктун көчүрүп, чаптап койсо болот, андыктан сизге эмне керек экенин түшүнгөндөн кийин, навигацияны орнотуу оңой.

  Эскертүү: Техникалык түрдө ачылуучу менюларды башка ачылуучу менюларда түзө аласыз, бирок интерфейсти таза кылуу үчүн көбүрөөк CSS жана Javascript кошууну каалабасаңыз, мен аны сунуштабайт элем.

  Navbar шилтемелери (оң жагы)

  Шилтемелердин туура тизмесин "мл-авто" классын берүү менен, Bootstrap эки тизмени бирдей бөлөт. Бул таза сол жана оң жактагы бөлүнүүнү түзөт. Мен бул мейкиндикти социалдык медиа шилтемелери үчүн колдонууну чечтим, анткени бул сиздин катышууңузду жогорулатуунун эң кеңири таралган жана популярдуу ыкмасы. Эгер бул тиешеси жок болсо, анда бул шилтемелерди издөө тилкесине, кирүү маалыматына, ж.б.. Бирок бул жөн гана колдонуу үчүн маанилүү мейкиндик экенин унутпаңыз. Жана сол жагындагы navbar шилтемелерине окшош, буларды да көчүрүп, чаптап койсоңуз болот.

  Эскертүү: Эгер менде мурунтан эле орнотулган шилтемелерди колдонууну пландап жатсаңыз, анда "href" шилтемелериндеги "колдонуучунун атын" өзгөртүңүз.

  6 -кадам: Башкы бет

  

  

  

  Сиздин Атыңыз

  Программист Жазуучу Геймер

  Бул бөлүм жана сиздин кийинки мазмундагы баракчаларыңыз портфолиоңузга эмнени салгыңыз келгенине жараша болот. Мен, албетте, ар бир мазмун түрүнө кайрыла албайм, бирок мен сүрөттөрдү, PDF файлдарды, видеолорду, код блокторун, кээ бир типтүү киргизүүлөрдү киргизүүгө аракет кылдым.

  Таблицанын форматы

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

  Баскычтар

  Булар кадимки баскычтар сыяктуу иштейт. Бул жерде жалгыз чыныгы Bootstrap интеграциясы калган темага дал келген стилден келип чыгат. Болбосо, мазмунуңузду көрсөтүшүңүз керек болгон көп же кичине баскычтарды түзүп, href шилтемелерин divs IDлерине дал келтирүүнү текшериңиз.

  Программалоо кодунун мазмуну

  "Код" тегдери - бул баса белгилөөнүн баарын башкаруу үчүн колдонуучу default.js теги. Эгерде сиз javascript.js файлынан эстесеңиз, анда башка файлдардын мазмунун жүктөө үчүн бөлүм бар.

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

  • Мунун биринчи бөлүгү контентти киргизүүнү каалаган элементтин "id" издейт.
  • Экинчи бөлүк - сиз жүктөгүңүз келген файлдын жайгашкан жери.

  Эскертүү: Мазмун чындыгында толугу менен жүктөлбөйт, анткени бул веб -баракчаны серверде эмес, жергиликтүү түрдө түзөтүү мүмкүнчүлүгүңүз бар. Бул ар кандай жолдор менен чечилиши мүмкүн, мен инструкциянын аягында айтам.

  YouTube Video

  Киргизилген "iframe" чындыгында YouTubeдан келет. Мен аларды кантип алуу керектигин кеңири түшүндүрбөйм, бирок сиз видеону "Бөлүшүү" бөлүмүнө барганда, видеону веб -бетте көрсөтүү үчүн керектүү кодду чыгарууга жардам бере турган "Кыстаруу" опциясы бар.

  7 -кадам: Алдыга карай

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

  Bootstrapтын документтери

  Bootstrapтын документтери-эгер сиз алдын ала программаланган элементтерди издеп жүрсөңүз жана баштоо үчүн эң сонун жер, эгер сиз эксперимент үчүн портфолиоңузга көчүрүп койсоңуз болот. Мен карталарга, каруселдерге же формаларга тийген жокмун. Варианттарды көрүү үчүн "Компоненттер" бөлүмүн кароону сунуштайм.

  W3Schools

  W3Schools - бул веб -программалоо жана өнүктүрүү менен байланышкан бардык нерселерди биле ала турган сонун вебсайт. Алар менден алда канча акылдуу жана алар сиз ойлогон HTML, CSS жана Javascriptтин дээрлик бардык функцияларын камтыйт.

  Сиздин Портфолиону Хостинг

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

  Эксперимент жана көңүл ачуу

  Мыкты портфолио түзүүнүн бирден -бир жолу - бул эксперимент жүргүзүү жана кызыктуу көрүнгөн нерселерди жана бардык нерсени сынап көрүү. Көптөгөн кооз дизайн портфолиолору жана веб-сайттар улуу өткөөл эффекттерди же динамикалык фондорду колдонушат, бирок алардын бири дагы алдын ала жасалган эмес.