Css көмегімен веб -беттерді өңдеу
жүктеу/скачать 249,5 Kb.
|
Дәріс №2
Динара 5 соөж
- Бұл бет үшін навигация:
- Bootstrap дегеніміз не
- Bootstrap көмегімен бірінші веб -бетті құру
- Мобильді құрылғылардың дұрыс көрсетілуін қамтамасыз ету.
- Беттер үлгісі.
|
CSS көмегімен веб -беттерді өңдеу Каскадты стиль кестелері (CSS) веб -беттерді өңдеуді жеңілдетуге арналған. Олардың негізгі мақсаты - құжаттың дизайны (CSS) мен мазмұнын (HTML) ажырату. Дизайнды бөлек құрылымға алып тастау оны әр түрлі веб -беттерге орналастыруға және тек стильдерді өңдеу арқылы және құжаттың өзіне әсер етпей бүкіл дизайнды оңай өзгертуге мүмкіндік береді. CSS -тің тағы бір артықшылығы - стильдер қарапайым HTML -ге қарағанда форматтаудың көптеген нұсқаларын ұсынады. Сонымен қатар, стильдерді сыртқы файлда сақтауға болады, браузер мұндай құжаттарды кэштейді, сондықтан сайт сәл тезірек жүктеледі. CSS ережелері ресми CSS тілінде жазылған және стиль кестелерінде орналасқан, яғни стиль кестелерінде CSS ережелері бар. Бұл стиль кестелері сыртқы түрін сипаттайтын веб -құжаттың өзінде де, CSS форматы бар бөлек файлдарда да орналасуы мүмкін. (Негізінде, CSS форматы қарапайым мәтіндік файл. .Css файлында CSS ережелері мен түсініктемелер тізімінен басқа ештеңе жоқ.) Яғни, бұл стиль кестелерін олар сипаттайтын веб -құжатқа төрт түрлі жолмен енгізуге болады: Стиль кестесі бөлек файлда болған кезде, оны және тегтері арасында осы құжатта орналасқан тегінің көмегімен веб -құжатқа байланыстыруға болады. ( тегінде осы стиль кестесінің адресіне орнатылған href атрибуты болады). Бұл кестенің барлық ережелері бүкіл құжат бойынша жарамды; Стиль кестесі бөлек файлда болғанда, ол құжатта тегтерінің арасында орналасқан @import директивасы арқылы веб -құжатқа қосыла алады (олар өз кезегінде бұл құжатта және тегтерінің арасында) <стилі> тегінен кейін бірден орналасады, ол сонымен қатар (оның жақшаларында, url сөзінен кейін) осы стиль кестесінің адресін көрсетеді. Бұл кестенің барлық ережелері бүкіл құжат бойынша жарамды; Стиль кестесі құжаттың өзінде сипатталған кезде, оны тегтерінің арасында орналастыруға болады (олар өз кезегінде осы құжатта және тегтер). Бұл кестенің барлық ережелері бүкіл құжат бойынша жарамды; Стильдер кестесі құжаттың өзінде сипатталған кезде, оны осы құжаттың жеке тегінің (оның стилінің атрибуты арқылы) корпусында орналастыруға болады. Бұл кестедегі барлық ережелер тек осы тегтің мазмұнына қолданылады. Алғашқы екі жағдайда құжатқа сыртқы стильдер қолданылады, ал екінші екі жағдайда ішкі стильдер қолданылады. Bootstrap дегеніміз не? Bootstrap-бұл веб-сайтты жылдам әрі жеңіл дамытуға арналған ақысыз негіз. Bootstrap құрамында формаларға, түймелерге, кестелерге, навигацияларға, суреттерге және басқаларға арналған CSS дизайн шаблондары, сонымен қатар қосымша JavaScript плагиндері бар. Bootstrap сізге мобильдіден кең экранды жұмыс үстеліне дейін көптеген құрылғыларда автоматты түрде жақсы көрінетін жауап беретін дизайнды оңай құруға мүмкіндік береді. Қосылу. Bootstrap пайдаланудың екі нұсқасы бар: қашықтағы немесе жергілікті серверден. Егер сіз bootstrap файлдарын жергілікті серверге сақтағыңыз келмесе, онда келесі кодты бас тегке қосу қажет: Bootstrap көмегімен бірінші веб -бетті құру. Құжатқа HTML5 doctype қосамыз. Bootstrap HTML5 талап ететін HTML элементтері мен CSS қасиеттерін қолданады. Әрқашан HTML5 doctype беттің басына, lang атрибутымен және дұрыс таңбаны кодтауымен бірге енгізіңіз: Мобильді құрылғылардың дұрыс көрсетілуін қамтамасыз ету. Bootstrap 3 сонымен қатар мобильді құрылғыларға арналған. Дұрыс көрсету мен сенсорлық масштабтауды қамтамасыз ету үшін, бас тегінің ішіне келесі мета тегті қосыңыз: Width = device-width параметрі бет енін құрылғы экранының еніне сәйкес орнатады (ол құрылғыға тәуелді). initial-scale=1 параметрі браузер бетті бірінші рет жүктеген кезде бастапқы масштабтау деңгейін көрсетеді. Контейнерді таңдау. Bootstrap сайттың барлық мазмұнын орау үшін құрамында элементті қажет етеді. Таңдау үшін контейнерлердің екі класы бар: .container класы-бекітілген ені бар икемді контейнер .container-fluid класы-қарау терезесінің бүкіл енін қамтитын толық енді контейнер Ескерту: контейнерлерді бір -бірінің ішіне қоюға болмайды. Беттер үлгісі. Келесі мысалда ені бекітілген ені бар контейнері бар бетке арналған Bootstrap сымсыз байланыс коды көрсетілген Бұл мысалда ені бекітілмеген контейнері бар бетті көрсетеді. жүктеу/скачать 249,5 Kb. Достарыңызбен бөлісу:
|