Жәрдемдесу
Құжаттама құрастыру сценарийлері мен сынақтары арқылы Bootstrap әзірлеуге көмектесіңіз.
Құралдарды орнату
Bootstrap құжаттаманы құру және бастапқы файлдарды құрастыру үшін npm сценарийлерін пайдаланады. Біздің package.json кодты құрастыру, сынақтарды орындау және т.б. үшін осы сценарийлерді орналастырады. Бұлар біздің репозитарийден және құжаттамадан тыс пайдалануға арналмаған.
Құрастыру жүйемізді пайдалану және құжаттаманы жергілікті түрде іске қосу үшін сізге Bootstrap бастапқы файлдарының және Түйіннің көшірмесі қажет. Мына қадамдарды орындаңыз және сіз шайқауға дайын болуыңыз керек:
- Node.js жүктеп алыңыз және орнатыңыз , оны біз тәуелділіктерді басқару үшін қолданамыз.
- Bootstrap көздерін жүктеп алыңыз немесе Bootstrap репозиторийін ашыңыз .
- Түбірлік
/bootstrapкаталогқа өтіп, package.jsonnpm installішінде тізімделген жергілікті тәуелділіктерімізді орнату үшін іске қосыңыз .
Аяқтағаннан кейін пәрмен жолынан берілген әртүрлі пәрмендерді іске қоса аласыз.
npm сценарийлерін пайдалану
Біздің package.json жобаны әзірлеуге арналған көптеген тапсырмаларды қамтиды. npm runТерминалдағы барлық npm сценарийлерін көру үшін іске қосыңыз . Негізгі міндеттерге мыналар жатады:
| Тапсырма | Сипаттама |
|---|---|
npm start |
CSS және JavaScript құрастырады, құжаттаманы құрастырады және жергілікті серверді іске қосады. |
npm run dist |
dist/Компиляцияланған файлдармен каталог жасайды . Sass , Autoprefixer және terser қолданады . |
npm test |
Сынақтарды іске қосқаннан кейін жергілікті түрде жүргізедіnpm run dist |
npm run docs-serve |
Құжаттаманы жергілікті түрде жасайды және іске қосады. |
Сасс
Bootstrap Sass бастапқы файлдарын CSS файлдарына (біздің құрастыру процесіне кіреді) құрастыру үшін Dart Sass пайдаланады және Sass-ты жеке актив құбырын пайдаланып құрастырсаңыз, дәл солай істеуді ұсынамыз. Біз бұрын Bootstrap v4 үшін Node Sass қолдандық, бірақ LibSass және оның үстіне салынған пакеттер, соның ішінде Node Sass енді ескірген .
Dart Sass 10 дөңгелектеу дәлдігін пайдаланады және тиімділік себептері бойынша бұл мәнді реттеуге мүмкіндік бермейді. Жасалған CSS-ті одан әрі өңдеу кезінде, мысалы, кішірейту кезінде, біз бұл дәлдікті төмендетпейміз, бірақ мұны таңдасаңыз, шолғышты дөңгелектеуге қатысты мәселелерді болдырмау үшін кем дегенде 6 дәлдікті сақтауды ұсынамыз.
Автопрефиксер
Bootstrap құрастыру уақытында кейбір CSS сипаттарына жеткізуші префикстерін автоматты түрде қосу үшін Autoprefixer (құру процесіне кіреді) пайдаланады. Бұл бізге CSS-тің негізгі бөліктерін бір рет жазуға мүмкіндік беру арқылы уақыт пен кодты үнемдейді, сонымен бірге v3-де табылған жеткізушілер миксиндерінің қажеттілігін болдырмайды.
Autoprefixer арқылы қолдау көрсетілетін шолғыштардың тізімін GitHub репозиторийінде бөлек файлда сақтаймыз. Мәліметтер алу үшін .browserlistrc қараңыз.
RTLCSS
Bootstrap құрастырылған CSS-ні өңдеу және оларды RTL-ге түрлендіру үшін RTLCSSpadding-left пайдаланады – негізінен көлденең бағытты білу сипаттарын (мысалы, ) керісінше ауыстырады. Ол бізге CSS-ті бір рет жазуға және RTLCSS басқару және мән директивалары арқылы шағын түзетулер жасауға мүмкіндік береді.
Жергілікті құжаттама
Құжаттаманы жергілікті түрде іске қосу hugo-bin npm бумасы арқылы орнатылатын Hugo бағдарламасын пайдалануды талап етеді . Hugo - бұл бізге қамтамасыз ететін өте жылдам және өте кеңейтілетін статикалық сайт генераторы: негізгі қамтиды, Markdown негізіндегі файлдар, үлгілер және т.б. Оны қалай бастау керек:
- Барлық тәуелділіктерді орнату үшін жоғарыдағы құралдарды орнату арқылы іске қосыңыз .
- Түбірлік
/bootstrapкаталогтанnpm run docs-serveпәрмен жолында іске қосыңыз. http://localhost:9001/Браузеріңізде ашыңыз және voilà.
Құжаттарын оқу арқылы Hugo пайдалану туралы көбірек біліңіз .
Ақаулық себебін іздеу және түзету
Тәуелділіктерді орнату кезінде қиындықтар туындаса, барлық алдыңғы тәуелділік нұсқаларын (жаһандық және жергілікті) жойыңыз. Содан кейін қайта іске қосыңыз npm install.