მიდგომა

მიუხედავად იმისა, რომ საწყისი გვერდები გთავაზობთ პროექტის შესავალ ტურს და რას გვთავაზობს, ეს დოკუმენტი ყურადღებას ამახვილებს იმაზე, თუ რატომ ვაკეთებთ იმას, რასაც ვაკეთებთ Bootstrap-ში. ის განმარტავს ჩვენს ფილოსოფიას, რომ შევქმნათ ინტერნეტში, რათა სხვებმა ისწავლონ ჩვენგან, წვლილი შეიტანონ ჩვენთან ერთად და დაგვეხმარონ გაუმჯობესებაში.

ხედავთ რაღაცას, რაც არ ჟღერს, ან იქნებ უკეთესად გაკეთდეს? გახსენით საკითხი - ჩვენ სიამოვნებით ვიმსჯელებთ თქვენთან.

Შემაჯამებელი

ჩვენ უფრო მეტად ჩავუღრმავდებით თითოეულ მათგანს, მაგრამ მაღალ დონეზე, აი, რა ხელმძღვანელობს ჩვენს მიდგომას.

• კომპონენტები უნდა იყოს პასუხისმგებელი და მობილური პირველ რიგში
• კომპონენტები უნდა აშენდეს საბაზისო კლასით და გაფართოვდეს მოდიფიკატორის კლასების მეშვეობით
• კომპონენტის მდგომარეობები უნდა ემორჩილებოდეს საერთო z-ინდექსის შკალას
• შეძლებისდაგვარად, უპირატესობა მიანიჭეთ HTML და CSS დანერგვას JavaScript-ზე
• შეძლებისდაგვარად გამოიყენეთ კომუნალური პროგრამები მორგებულ სტილებთან შედარებით
• შეძლებისდაგვარად, მოერიდეთ მკაცრი HTML მოთხოვნების შესრულებას (ბავშვთა სელექტორები)

საპასუხო

Bootstrap-ის საპასუხო სტილები შექმნილია იმისთვის, რომ იყოს პასუხისმგებელი, მიდგომა, რომელსაც ხშირად უწოდებენ მობილურს პირველს . ჩვენ ვიყენებთ ამ ტერმინს ჩვენს დოკუმენტებში და დიდწილად ვეთანხმებით მას, მაგრამ ზოგჯერ ის შეიძლება იყოს ძალიან ფართო. მიუხედავად იმისა, რომ ყველა კომპონენტი არ უნდა იყოს მთლიანად პასუხისმგებელი Bootstrap-ში, ეს პასუხისმგებელი მიდგომა ეხება CSS-ის გადაფარვის შემცირებას, რაც გიბიძგებთ სტილის დასამატებლად, რადგან ხედის პორტი უფრო დიდი ხდება.

Bootstrap-ში, ამას ყველაზე ნათლად ნახავთ ჩვენს მედია შეკითხვებში. უმეტეს შემთხვევაში, ჩვენ ვიყენებთ min-widthშეკითხვებს, რომლებიც იწყებენ გამოყენებას კონკრეტულ წყვეტის წერტილში და აგრძელებენ უფრო მაღალ წერტილებს. მაგალითად, a .d-noneვრცელდება min-width: 0უსასრულობამდე. მეორეს მხრივ, a .d-md-noneმოქმედებს საშუალო წყვეტის წერტილიდან და ზემოთ.

ზოგჯერ ჩვენ გამოვიყენებთ max-width, როდესაც კომპონენტის თანდაყოლილი სირთულე ამას მოითხოვს. ხანდახან, ეს უგულებელყოფა ფუნქციურად და გონებრივად უფრო მკაფიოა დანერგვა და მხარდაჭერა, ვიდრე ძირითადი ფუნქციების გადაწერა ჩვენი კომპონენტებიდან. ჩვენ ვცდილობთ შევზღუდოთ ეს მიდგომა, მაგრამ დროდადრო გამოვიყენებთ მას.

კლასები

გარდა ჩვენი გადატვირთვისა, ბრაუზერის ჯვარედინი ნორმალიზების სტილის ფურცელი, ყველა ჩვენი სტილი მიზნად ისახავს გამოიყენოს კლასები, როგორც სელექტორები. ეს ნიშნავს, რომ თავიდან აიცილოთ ტიპის ამომრჩეველები (მაგ., input[type="text"]) და უცხო მშობლების კლასები (მაგ., .parent .child), რომლებიც სტილებს ზედმეტად სპეციფიკურს ხდის და ადვილად გადალახავს.

როგორც ასეთი, კომპონენტები უნდა აშენდეს საბაზისო კლასით, რომელშიც განთავსებულია საერთო, დაუშვებელი ქონების ღირებულების წყვილები. მაგალითად .btnდა .btn-primary. ჩვენ ვიყენებთ .btnყველა გავრცელებულ სტილს, როგორიცაა display, paddingდა border-width. შემდეგ ჩვენ ვიყენებთ მოდიფიკატორებს, როგორიცაა .btn-primaryფერის, ფონის ფერის, საზღვრის ფერის და ა.შ.

მოდიფიკატორის კლასები უნდა იქნას გამოყენებული მხოლოდ მაშინ, როდესაც არსებობს მრავალი თვისება ან მნიშვნელობა, რომელიც უნდა შეიცვალოს მრავალ ვარიანტში. მოდიფიკატორები ყოველთვის არ არის საჭირო, ასე რომ, დარწმუნდით, რომ რეალურად ინახავთ კოდის ხაზებს და თავიდან აიცილებთ არასაჭირო გადახრებს მათი შექმნისას. მოდიფიკატორების კარგი მაგალითებია ჩვენი თემის ფერის კლასები და ზომის ვარიანტები.

z-ინდექსის სასწორები

Bootstrap-ში არის ორი z-indexმასშტაბი - ელემენტები კომპონენტში და გადაფარვის კომპონენტები.

კომპონენტის ელემენტები

• Bootstrap-ის ზოგიერთი კომპონენტი აგებულია გადახურვის ელემენტებით, რათა თავიდან აიცილონ ორმაგი საზღვრები borderსაკუთრების შეცვლის გარეშე. მაგალითად, ღილაკების ჯგუფები, შეყვანის ჯგუფები და პაგირება.
• ეს კომპონენტები იზიარებენ სტანდარტული z-indexმასშტაბის 0მეშვეობით 3.
• 0არის ნაგულისხმევი (საწყისი), 1არის :hover, 2არის :active/ .active, და 3არის :focus.
• ეს მიდგომა ემთხვევა ჩვენს მოლოდინებს მომხმარებლის უმაღლესი პრიორიტეტის შესახებ. თუ ელემენტი ფოკუსირებულია, ის მხედველობაში და მომხმარებლის ყურადღებაშია. აქტიური ელემენტები მეორე ადგილზეა, რადგან ისინი მიუთითებენ მდგომარეობაზე. Hover არის მესამე ყველაზე მაღალი, რადგან ის მიუთითებს მომხმარებლის განზრახვაზე, მაგრამ თითქმის ყველაფრის გადატანა შესაძლებელია.

გადაფარვის კომპონენტები

Bootstrap მოიცავს რამდენიმე კომპონენტს, რომლებიც ფუნქციონირებს, როგორც რაიმე სახის გადაფარვა. ეს მოიცავს, უმაღლესი თანმიმდევრობით z-index, ჩამოსაშლელ ჩამონათვალს, ფიქსირებულ და წებოვან პანელს, მოდალებს, ხელსაწყოების მინიშნებებს და პოპოვერებს. ამ კომპონენტებს აქვთ საკუთარი z-indexმასშტაბი, რომელიც იწყება 1000. ეს საწყისი ნომერი აირჩია თვითნებურად და ემსახურება როგორც პატარა ბუფერს ჩვენს სტილებსა და თქვენი პროექტის მორგებულ სტილებს შორის.

გადაფარვის თითოეული კომპონენტი z-indexოდნავ ზრდის მის მნიშვნელობას ისე, რომ საერთო ინტერფეისის პრინციპები საშუალებას აძლევს მომხმარებელზე ორიენტირებულ ან გადასაფარებელ ელემენტებს მუდმივად დარჩეს მხედველობაში. მაგალითად, მოდალი არის დოკუმენტის დაბლოკვა (მაგ., თქვენ არ შეგიძლიათ განახორციელოთ სხვა ქმედება მოდალის მოქმედების გარდა), ამიტომ ჩვენ ამას ვდებთ ჩვენს ნავიგაციის ზემოთ.

შეიტყვეთ მეტი ამის შესახებ ჩვენს z-indexგანლაგების გვერდზე .

HTML და CSS JS-ზე

შეძლებისდაგვარად, ჩვენ გვირჩევნია დავწეროთ HTML და CSS JavaScript-ზე. ზოგადად, HTML და CSS უფრო ნაყოფიერი და ხელმისაწვდომია სხვადასხვა გამოცდილების დონის მეტი ადამიანისთვის. HTML და CSS ასევე უფრო სწრაფია თქვენს ბრაუზერში, ვიდრე JavaScript და თქვენი ბრაუზერი ზოგადად გთავაზობთ დიდ ფუნქციონირებას თქვენთვის.

ეს პრინციპი არის ჩვენი პირველი კლასის JavaScript API dataატრიბუტების გამოყენებით. თქვენ არ გჭირდებათ თითქმის ნებისმიერი JavaScript-ის დაწერა ჩვენი JavaScript დანამატების გამოსაყენებლად; ამის ნაცვლად, დაწერეთ HTML. წაიკითხეთ მეტი ამის შესახებ ჩვენს JavaScript-ის მიმოხილვის გვერდზე .

და ბოლოს, ჩვენი სტილები ეფუძნება საერთო ვებ ელემენტების ფუნდამენტურ ქცევას. შეძლებისდაგვარად, ჩვენ ურჩევნიათ გამოვიყენოთ ის, რასაც ბრაუზერი გვაწვდის. მაგალითად, შეგიძლიათ .btnკლასი დააყენოთ თითქმის ნებისმიერ ელემენტზე, მაგრამ ელემენტების უმეტესობა არ იძლევა რაიმე სემანტიკურ მნიშვნელობას ან ბრაუზერის ფუნქციას. ამის ნაცვლად, ჩვენ ვიყენებთ <button>s და <a>s.

იგივე ეხება უფრო რთულ კომპონენტებს. მიუხედავად იმისა, რომ ჩვენ შეგვიძლია დავწეროთ ჩვენი ფორმის ვალიდაციის მოდული, რათა დავამატოთ კლასები მშობელ ელემენტში შეყვანის მდგომარეობიდან გამომდინარე, რითაც საშუალებას მოგვცემს შევიტანოთ ტექსტის სტილი, ვთქვათ წითელი, ჩვენ გვირჩევნია გამოვიყენოთ :valid/ :invalidფსევდო-ელემენტები, რომლებსაც ყველა ბრაუზერი გვაწვდის.

კომუნალური მომსახურება

კომუნალური კლასები - ყოფილი დამხმარეები Bootstrap 3-ში - ძლიერი მოკავშირეა CSS bloat და ცუდი გვერდის მუშაობის წინააღმდეგ საბრძოლველად. სასარგებლო კლასი, როგორც წესი, არის ერთი, უცვლელი თვისება-მნიშვნელობის დაწყვილება, რომელიც გამოხატულია კლასის სახით (მაგ., .d-blockწარმოადგენს display: block;). მათი მთავარი მიმზიდველობა არის გამოყენების სიჩქარე HTML-ის წერისას და პერსონალური CSS-ის რაოდენობის შეზღუდვა, რომელიც უნდა დაწეროთ.

კონკრეტულად რაც შეეხება მორგებულ CSS-ს, უტილიტებს შეუძლიათ დაეხმარონ ფაილის ზომის გაზრდას თქვენი ყველაზე ხშირად განმეორებადი საკუთრების ღირებულების წყვილების ერთ კლასებად შემცირებით. ამას შეიძლება ჰქონდეს დრამატული ეფექტი თქვენს პროექტებზე მასშტაბით.

მოქნილი HTML

მიუხედავად იმისა, რომ ყოველთვის არ არის შესაძლებელი, ჩვენ ვცდილობთ თავიდან ავიცილოთ ზედმეტად დოგმატური კომპონენტების HTML მოთხოვნები. ამრიგად, ჩვენ ყურადღებას ვამახვილებთ ერთ კლასებზე ჩვენს CSS სელექტორებში და ვცდილობთ თავიდან ავიცილოთ უშუალო ბავშვების სელექტორები ( >). ეს გაძლევთ უფრო მეტ მოქნილობას თქვენს განხორციელებაში და გეხმარებათ ჩვენი CSS უფრო მარტივი და ნაკლებად სპეციფიკური იყოს.

კოდის კონვენციები

კოდის სახელმძღვანელო (Bootstrap-ის თანაშემქმნელიდან, @mdo) ადასტურებს, თუ როგორ ვწერთ ჩვენს HTML და CSS-ს Bootstrap-ში. იგი აკონკრეტებს მითითებებს ზოგადი ფორმატირებისთვის, საღი აზრის ნაგულისხმევი პარამეტრების, საკუთრების და ატრიბუტების შეკვეთებისთვის და სხვა.

ჩვენ ვიყენებთ Stylelint- ს ამ და სხვა სტანდარტების აღსასრულებლად ჩვენს Sass/CSS-ში. ჩვენი მორგებული Stylelint კონფიგურაცია არის ღია წყარო და ხელმისაწვდომია სხვებისთვის გამოსაყენებლად და გაფართოებისთვის.

ჩვენ ვიყენებთ vnu-jar- ს სტანდარტული და სემანტიკური HTML-ის აღსასრულებლად, ასევე საერთო შეცდომების გამოსავლენად.