Bootstrap სამეურვეო


bootstrap 4 სამეურვეო


Bootstrap არის წინა დონის ჩარჩო, რომელიც დაგეხმარებათ სწრაფად და მარტივად შექმნათ მობილური პასუხისმგებლობის მქონე ვებსაიტები. პირველად Twitter– ის მიერ შემუშავებული, Bootstrap ახლა გამოიყენება ვებ – პროგრამების დაწყებამდე WordPress– ის თემებისთვის. ის ასევე არის სრულიად უფასო, მრავალმხრივი და ინტუიციური.

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

დაბოლოს, რაც არანაკლებ მნიშვნელოვანია, ის უამრავ მალსახმობას გაძლევთ ვებ – გვერდების შესაქმნელად, რაც დაზოგავს თქვენს დროსა და ენერგიას. თქვენ გჭირდებათ HTML და CSS ძირითადი გაგება, რომ შექმნან რეაგირებადი, მობილური პირველი და ყველა თანამედროვე ბრაუზერისთვის თავსებადი..

P.S. Bootstrap არ არის სრულყოფილი ვარიანტი დამწყებთათვის. ზოგიერთი HTML და CSS ცოდნა სასარგებლო იქნება. ალტერნატიულად, შეგიძლიათ გამოიყენოთ ვებგვერდის შემქმნელები ან WordPress, რომ შექმნათ ვებგვერდი.

როგორ შევქმნათ ვებ – გვერდი Bootstrap (შინაარსების ცხრილი) გამოყენებით:

  1. Ნაბიჯი 1: კონფიგურაცია და მიმოხილვა
    1. შექმენით HTML გვერდი
    2. ჩატვირთეთ Bootstrap CDN– ით ან მასპინძეთ ადგილობრივად
    3. ჩართეთ jQuery
    4. ჩატვირთვა JavaScript Bootstrap
    5. ყველაფერი ერთად მოათავსეთ
  2. ნაბიჯი 2: შექმენით თქვენი სადესანტო გვერდი
    1. დაამატეთ სანავიგაციო ზოლი
    2. ჩართეთ საბაჟო CSS
    3. შექმენით გვერდის შინაარსის კონტეინერი
    4. დაამატეთ ფონის სურათი და საკუთარი JavaScript
    5. დაამატეთ გადახურვა
    6. შეიტანეთ გვერდის სათაური და სხეულის ტექსტი
    7. შექმენით CTA ღილაკი
    8. დააყენეთ სამსაფეხურიანი განყოფილება
    9. დაამატეთ საკონტაქტო ფორმა
    10. შექმენით ორი სვეტიანი საყრდენი
    11. დაამატეთ მედია შეკითხვებს
    12. მიიღეთ თქვენი ვებ – გვერდი პირდაპირ ეთერში

მთლიანი დრო, რომ შექმნათ ვებ – გვერდი Bootstrap– ის გამოყენებით: 3-4 საათი.
Უნარის დონე: დამწყებთათვის შუამავალი

Contents

ნაბიჯი 1: კონფიგურაცია და მიმოხილვა


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

1. შექმენით HTML გვერდი

როგორც პირველი ნაბიჯი, ჩვენ შევქმნით მარტივ HTML შაბლონს, როგორც ბაზას, სადაც გამოვიყენებთ Bootstrap. ამისათვის, პირველი რაც თქვენ გსურთ გააკეთოთ, შექმნათ საქაღალდე თქვენს კომპიუტერში ან სერვერზე პროექტის ფაილებისთვის. ამ შემთხვევაში, მე უბრალოდ დავარქმევ bootstrap. აქ შექმენით ახალი ტექსტური ფაილი და დაურეკეთ მას index.html. გახსენით თქვენი ტექსტური რედაქტორი თქვენი არჩევანით (მაგ. რვეული++) და შემდეგ ჩასვით კოდი მასში.





ჩატვირთვის ინსტრუქციის ნიმუშის გვერდი








ნუ დაივიწყებთ ფაილის შენახვას, სანამ გადაადგილდებით!

2 ა. ჩატვირთვა ჩატვირთვა CDN- ის საშუალებით

როგორც უკვე ავუხსენით, Bootstrap ძირითადად სტილის სტილის და სკრიპტებისგან შედგება. როგორც ასეთი, მათი დატვირთვა შესაძლებელია თქვენს ვებ – გვერდის სათაურსა და ქვედა გვერდზე, ისევე როგორც სხვა აქტივები, როგორიცაა საბეჭდი შრიფტები. ჩარჩო გთავაზობთ CDN (შინაარსის მიწოდების ქსელს) მისასვლელ გზას. შეგიძლიათ იპოვოთ იგი საიტზე ჩატვირთვისას გვერდი, შემდეგ ქვემოთ.

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

ფაილის შენახვისას, ნებისმიერი ბრაუზერი, რომელიც გახსნის მას, ავტომატურად დატვირთავს Bootstrap- ის აქტივებს.

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

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

2 ბ. მასპინძელი Bootstrap ადგილობრივად

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

მას შემდეგ რაც გააკეთეთ, გაუქმეთ ფაილი და დააკოპირეთ მისი შინაარსი იმავე დირექტორიაში, როგორც index.html. ამის შემდეგ, შეგიძლიათ ჩატვირთოთ Bootstrap CSS თქვენს პროექტში შემდეგნაირად:

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

3. ჩართეთ jQuery

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

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

ალტერნატიულად, ჩამოტვირთეთ jQuery (მარჯვენა ღილაკით>) Შეინახე ბმული როგორც…), გააქტიურეთ და განათავსეთ იგი საქაღალდეში. შემდეგ, შეიტანეთ იგი იმავე ადგილზე, როგორც თქვენი ფაილი ამ გზით:

კვლავ დარწმუნდით, რომ გზა შეესაბამება თქვენს დაყენებას.

4. ჩატვირთეთ JavaScript Bootstrap

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

შეგიძლიათ დისტანციურად ასე მოიქცეთ:

ან ადგილობრივად ასე:

5. განათავსეთ ეს ყველაფერი ერთად

თუ სწორად მიყევით ზემოთ მოცემულ ნაბიჯებს, უნდა დასრულდეს ფაილი, რომელიც ასე გამოიყურება დისტანციური გადაწყვეტისთვის:

   ჩატვირთვის ინსტრუქციის ნიმუშის გვერდი         

გარდა ამისა, თუ ადგილობრივად მასპინძელი ხართ, თქვენი გვერდის შაბლონი უნდა წააგოს ქვემოთ მოცემულ კოდს:

   ჩატვირთვის ინსტრუქციის ნიმუშის გვერდი         

თუ ეს არის ის, რაც თქვენ გაქვთ და შეინახეთ თქვენი სამუშაო, ახლა მზად ხართ გადასვლა შემდეგ ეტაპზე.

ნაბიჯი 2: შექმენით თქვენი სადესანტო გვერდი


რა თქმა უნდა, ეს იყო მომზადების მრავალი სამუშაო. თუმცა, ეს არ იყო ძალიან რთული, ასე იყო? გარდა ამისა, ახლა გართობა იწყება.

იმ მომენტში, როდესაც თქვენ ათვალიერებთ თქვენს ნიმუშს, უბრალოდ უნდა ნახოთ ცარიელი გვერდი. ამის შეცვლის დრო.

1. დაამატეთ სანავიგაციო ზოლი

პირველი რაც გვინდა გავაკეთოთ არის გვერდის ზედა ნაწილში სანავიგაციო ზოლის დამატება. ეს საშუალებას აძლევს თქვენს ვიზიტორებს დაათვალიერონ თქვენი საიტი და აღმოაჩინონ დანარჩენი თქვენი გვერდები.

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

ჩვენ გამოვიყენებთ მას, როგორც ქვემოთ და განათავსებთ მას ქვემოთ ტეგა:

 ლოგო   

ზოგიერთი განმარტება:

  • navbar-expand-md – ეს ნიშნავს, თუ რომელ წერტილში სანავიგაციო ზოლი ვრცელდება ვერტიკალური ან ჰამბურგერის ხატიდან სრულ ზომის ჰორიზონტალურ ზოლზე. ამ შემთხვევაში, ჩვენ დავაყენეთ იგი საშუალო ეკრანებზე, რაც Bootstrap– ში უფრო დიდია, ვიდრე 768px.
  • ნავარის ბრენდი – ეს გამოიყენება თქვენი ვებსაიტის ბრენდინგისთვის. აქვე შეგიძლიათ შეიტანოთ ლოგო გამოსახულების ფაილი.
  • navbar-toggler – აღნიშნავს მენიუს ჩამონგრევის ღილაკს გადართვისთვის. Მშვიდობა data-toggle = "ჩამონგრევა" განმარტავს, რომ ეს გახდება ჰამბურგერის მენიუს, არა ჩამოსაშლელად, რაც სხვა ვარიანტია. მნიშვნელოვანია, რომ განსაზღვროთ მონაცემთა სამიზნე CSS id (განსაზღვრულია #) და შეფუთეთ a დივ ამავე სახელწოდებით ფაქტობრივი ნავარი ელემენტი.
  • navbar-toggler-icon – როგორც თქვენ ალბათ მიხვდებით, ეს ქმნის ხატის მომხმარებლებს, რომლებიც დააჭირეთ ღილაკს, რომ მენიუს პატარა ეკრანებზე გახსნან.
  • ნავარ-ნავი – კლასში
      მენიუს ელემენტები. ამ უკანასკნელებს ახსენებენ ნავი-ნივთი და nav-link.

    რატომ ვხსნი ამდენს?

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

    ზემოთ მოყვანილი საკმარისია თქვენს საიტზე სანავიგაციო ზოლის დამატება. თუმცა, ამ მომენტში, ჯერ კიდევ ძალიან ცოტა გამოიყურება.

    bootstrap სამეურვეო დამატება სანავიგაციო ბარი

    ეს იმიტომ, რომ მას არ აქვს მიბმული ბევრი სტილი. ხოლო თქვენ შეგიძლიათ დაამატოთ ნაგულისხმევი ფერები (მაგალითად, Navbar- ს კლასს მივანიჭებ, მაგალითად bg-dark navbar-dark) ამის ნაცვლად, ჩვენ გვინდა საკუთარი თავის დამატება.

    2. ჩართეთ საბაჟო CSS

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

    ამისათვის, უბრალოდ შექმენით ცარიელი ფაილი ტექსტის რედაქტორთან და დარეკეთ მას main.css. შეინახეთ ეს, შემდეგ დაამატეთ იგი თქვენი Bootstrap საიტის სათაურის განყოფილებაში:

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

    აქედან, თქვენ შეგიძლიათ დაამატოთ პერსონალური CSS თქვენს საიტზე. მაგალითად, სანავიგაციო ზოლის და მისი ელემენტების სტილის შესაქმნელად, შეგიძლიათ გამოიყენოთ მარკირება ასე:

    სხეული padding: 0; ზღვარი: 0; ფონი: # f2f6e9; } / * --- ნავიგაციის ბარი --- * / .navbar ფონი: # 6ab446; } .nav-link, .navbar-brand { ფერი: #fff; კურსორი: მაჩვენებელი; } .nav-link { ზღვარი-მარჯვენა: 1em! მნიშვნელოვანია; } .nav-link: hover { ფერი: # 000; } .ნავი-დაშლა { გამართლება-შინაარსი: flex-end; }

    და ეს არის შედეგი:

    bootstrap სამეურვეო სტილის სანავიგაციო ზოლი

    უკეთ გამოიყურება, ვიდრე ადრე, ასე არ არის?

    3. შექმენით გვერდის შინაარსის კონტეინერი

    ნავიგაციის ხაზის შემდეგ, შემდეგი რაც გსურთ, არის კონტეინერი გვერდის შინაარსისთვის. Bootstrap- ში ეს მართლაც ადვილია, რადგან ამისათვის მხოლოდ ის გჭირდებათ.

    ყურადღება მიაქციეთ კონტეინერი-სითხე კლასი. ეს არის კიდევ ერთი იმ Bootstrap- ის ნაგულისხმევი კლასები. მისი გამოყენება დივ ელემენტი მას ავტომატურად მიმართავს CSS- ს თაიგულს.

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

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

    4. დაამატეთ ფონის სურათი და საკუთარი JavaScript

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

    თქვენ იმით იქცევით, როგორსაც შეიტანთ საბაჟო CSS. პირველი, შექმენით სახელის ტექსტური ფაილი მთავარი.ჯსი და განათავსეთ იგი თქვენი საიტის საქაღალდეში. შემდეგ, დარეკეთ დახურვამდე წარწერა შიგნით index.html.

    ამის შემდეგ, თქვენ შეგიძლიათ დააკოპიროთ და ჩასვათ ეს კოდი

    ელემენტის მონაკვეთი მთელ ეკრანზე:
    $ (დოკუმენტი). უკვე (ფუნქცია () $ ('. header'). სიმაღლე ($ (ფანჯარა). სიმაღლე ()); })

    ამის შემდეგ, ერთადერთი, რაც დარჩა, არის ფონის სურათის დაყენება. ამის გაკეთება შეგიძლიათ შიგნით main.css:

    .თავსართი { background-image: url ('images / header-background.jpg'); ფონის ზომა: ყდა; ფონის-პოზიცია: ცენტრი; პოზიცია: ნათესავი; }

    თუ ზემოთ მოყვანილი ბილიკით მითითებულ ადგილას განათავსებთ საკმარის ზომას სურათს, მიაღწევთ შედეგს, რომელიც მსგავსია:

    bootstrap– ის სახელმძღვანელო მოიცავს სათაურის ფონის სურათს

    5. დაამატეთ გადახურვა

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

    ამის შემდეგ შეგიძლიათ დაამატოთ შემდეგი თქვენს CSS ფაილში:

    .გადახურვა { პოზიცია: აბსოლუტური; მინ-სიმაღლე: 100%; მინ-სიგანე: 100%; მარცხენა: 0; ზედა: 0; ფონი: rgba (0, 0, 0, 0.6); }

    ეს შექმნის ამ ლამაზ გადახურვას იმ სურათზე, რომელსაც ადრე შეიტანთ:

    bootstrap სამეურვეო დამატების გადახურვა

    6. შეიტანეთ გვერდის სათაური და სხეულის ტექსტი

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

    ამის შესაქმნელად, უბრალოდ დაამატეთ ეს ნაჭერი შიგნით, რომელიც თქვენ დააყენეთ ბოლო ნაბიჯში, გადახურვის ქვემოთ:

    კეთილი იყოს თქვენი მობრძანება სადესანტო გვერდზე!

    Lorem ipsum dolor sit to amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dol id id sapien rutrum, id vulputate quac iaculis. შეჩერებულია ჩემი სახელით, რომლითაც ვსვამთ ფერსტრასს.

    ამის შემდეგ, დაამატეთ შემდეგი აღნიშვნა main.css.

    .აღწერა მარცხენა: 50%; პოზიცია: აბსოლუტური; ზედა: 45%; გარდაქმნა: თარგმნა (-50%, -55%); text-გასწორება: ცენტრი; } .აღწერა h1 { ფერი: # 6ab446; } .აღწერა p ფერი: #fff; შრიფტის ზომა: 1.3rem; ხაზის სიმაღლე: 1.5; }

    როდესაც თქვენ გააკეთებთ, ახლა გვერდი გვერდზე გამოიყურება ასე:

    bootstrap tutorial დაამატეთ გვერდის სათაური და აღწერა

    ეს ნამდვილად ერთად იწყება, ასე არ არის?

    7. შექმენით CTA ღილაკი

    არცერთი გვერდი არ არის სრული მოქმედების ზარის გარეშე, ყველაზე ხშირად ღილაკის სახით. ამის გამო, არ შეგვიძლია ვიცოდეთ, თუ როგორ უნდა შექმნათ ამ Bootstrap სამეურვეო პროგრამაში.

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

    ამის გარდა, ამ CSS- ს ვამატებ main.css:

    .აღწერა ღილაკი { საზღვარი: 1px მყარი # 6ab446; ფონი: # 6ab446; სასაზღვრო-რადიუსი: 0; ფერი: #fff; } .აღწერა ღილაკი: hover საზღვარი: 1px მყარი #fff; ფონი: #fff; ფერი: # 000; }

    დაზოგვისა და გადმოტვირთვის შემდეგ, ასე გამოიყურება:

    bootstrap სამეურვეო დამატება ზარის მოქმედების ღილაკზე

    8. შექმენით სამსაფეხურიანი განყოფილება

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

    Lorem ipsum

    Lorem ipsum dolor sit to amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dol id id sapien rutrum, id vulputate quac iaculis.

    Lorem ipsum

    Lorem ipsum dolor sit to amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dol id id sapien rutrum, id vulputate quac iaculis.

    პირველი რაც თქვენ შეამჩნევთ არის რიგი ელემენტი. თქვენ გჭირდებათ ეს, როდესაც შექმნით სვეტებს, იმოქმედოთ ქსელის კონტეინერად.

    რაც შეეხება სვეტებს, მათ ყველა აქვთ რამდენიმე კლასი: col-lg-4, col-md-4 და col-sm-12. ეს მიუთითებს იმაზე, რომ საქმე გვაქვს სვეტებთან და მათ ეკრანზე ზომა.

    ამის გასაგებად, თქვენ უნდა იცოდეთ, რომ Bootstrap- ის ქსელში, ყველა მწკრივის ერთ მწკრივში ყოველთვის დაამატებთ რიცხვს 12. ასე რომ, მათ ზემოთ მოცემული კლასების მიცემა ნიშნავს, რომ ისინი დაიკავებენ ეკრანის ერთ მესამედს დიდ და საშუალოზე ეკრანები (12 დაყოფილია 3 – ით არის 4), მაგრამ მთელი ეკრანი მცირე მოწყობილობებზე (12 სვეტიდან 12).

    აზრი აქვს, არა?

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

    ამის გარდა, თქვენ გაქვთ შემდეგი სტილი, რომელიც შედის ჩვეულებრივ ადგილას:

    .მახასიათებლები { ზღვარი: 4em ავტომატი; padding: 1em; პოზიცია: ნათესავი; } .მხატვრული სათაური { ფერი: # 333; შრიფტის ზომა: 1.3rem; შრიფტის წონა: 700; ზღვარი-ქვედა: 20px; ტექსტი-ტრანსფორმაცია: დიდი; } .მახასიათებლები img -webkit-box-ჩრდილი: 1px 1px 4px rgba (0, 0, 0, 0.4); -moz-box-ჩრდილი: 1px 1px 4px rgba (0, 0, 0, 0.4); ყუთი-ჩრდილი: 1px 1px 4px rgba (0, 0, 0, 0.4); ზღვარი-ქვედა: 16px; }

    ძირითადი შინაარსის ქვემოთ და შენახვის შემთხვევაში, ასე გამოიყურება:

    bootstrap სამეურვეო დაამატოთ სამი სვეტის განყოფილება

    9. დაამატეთ საკონტაქტო ფორმა

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

    Bootstrap- ში საკონტაქტო ფორმის შექმნა საკმაოდ მარტივია:

    Შემეხმიანე!

    ამ დროისთვის, მე არ უნდა ავუხსნა ნიშანდება, რომ აღარ შეიქმნას სვეტები. აი რას ნიშნავს მარკირების დანარჩენი ნაწილი:

    • ფორმა-ჯგუფი – გამოიყენება ფორმატის გასაფორმებლად ფორმატის დასაფენად.
    • ფორმა-კონტროლი – ასახელებს ისეთ ველებს, როგორებიცაა შეყვანა, ტექსტის სფეროები და ა.შ..

    კიდევ ბევრი რამ შეგიძლიათ გააკეთოთ ფორმებთან, რომელთა საშუალებით შეგიძლიათ იპოვოთ დოკუმენტაცია. ამასთან, საჩვენებელი მიზნებისათვის, ზემოთ მოცემულია საკმარისი. მოათავსეთ იგი დარჩენილი ცარიელი სვეტის შიგნით და შემდეგ დაამატეთ ეს სტილი main.css:

    .მახასიათებლები .ფორმ-კონტროლი, .შეყვანის მახასიათებლები { სასაზღვრო-რადიუსი: 0; } .მახასიათებლები .btn ფონის ფერი: # 589b37; საზღვარი: 1px მყარი # 589b37; ფერი: #fff; margin-top: 20px; } .მახასიათებლები .btn: hover ფონის ფერი: # 333; საზღვარი: 1px მყარი # 333; }

    როდესაც გააკეთებთ, მიიღებთ ფორმას, როგორიცაა:

    bootstrap სამეურვეო მოიცავს საკონტაქტო ფორმას

    10. შექმენით ორი სვეტიანი ქვედატანი

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

    დამატებითი ინფორმაცია

    Lorem ipsum dolor sit to amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dol id id sapien rutrum, id vulputate quac iaculis.

    Lorem ipsum dolor sit to amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dol id id sapien rutrum, id vulputate quac iaculis.

    კონტაქტი

    1640 Riverside Drive, Hill Valley, California
    [ელ.ფოსტა დაცულია]
    + 01 234 567 88
    + 01 234 567 89

    გარდა ქსელის ჩვეულებრივი მარკირებისა, ამ განყოფილებაში ასახულია Bootstrap– ით ტიპოგრაფიის შეცვლის რამდენიმე შესაძლებლობა:

    • ტექსტი-დიდი
    • font-weight-თამამი
    • ტექსტ-ცენტრი

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

    გარდა ამისა, შეგიძლიათ გამოიყენოთ ასეთი სტილის მსგავსი:

    .გვერდი-ქვედა ფონის ფერი: # 222; ფერი: #ccc; padding: 60px 0 30px; } .ქვედა საავტორო უფლებები { ფერი: # 666; padding: 40px 0; }

    ეს იწვევს ულამაზეს კადრს, რომელიც ასე გამოიყურება:

    bootstrap– ის სამეურვეო პროგრამა მოიცავს გვერდს

    11. დაამატეთ მედია შეკითხვებს

    გვერდი ამჟამად მზად არის. ის ასევე არის პასუხისმგებლობა. ამასთან, ბრაუზერის მობილური ხედით, ზედა განყოფილება ჯერ არ გამოდგება.

    bootstrap სამეურვეო შეცდომა მობილური დიზაინის შესახებ

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

    შედეგად, ზემოთ მოყვანილი პრობლემის გამოსწორების მიზნით, შეგიძლიათ უბრალოდ შეიყვანოთ კოდი, როგორიცაა:

    @media (მაქსიმალური სიგანე: 575.98px) { .აღწერა მარცხენა: 0; padding: 0 15px; პოზიცია: აბსოლუტური; 10 საუკეთესო%; გარდაქმნა: არცერთი; text-გასწორება: ცენტრი; } .აღწერა h1 { შრიფტის ზომა: 2em; } .აღწერა p შრიფტის ზომა: 1.2rem; } .მახასიათებლები { ზღვარი: 0; } }

    ამის შემდეგ, ყველაფერი ისეა, როგორც უნდა იყოს:

    bootstrap სამეურვეო დაამატეთ მედია მოთხოვნა

    12. თქვენი ვებ – გვერდი ატვირთეთ ვებ მასპინძელთან

    თუ თქვენ ამას მიყვებით, ახლა უკვე მზა ვებსაიტზე უნდა იყოს მითითებული, რომელიც ასევე მობილურით არის დაკომპლექტებული.

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

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

    bootstrap ვებგვერდის ატვირთვა ftp- ის საშუალებით

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

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

    bootstrap სამეურვეო დასრულდა სადესანტო გვერდი

    ცუდი არ არის რამდენიმე ხაზის კოდი, არა?

    ვისზეც საუბრობთ, თუ გსურთ გქონდეთ გვერდის მთელი კოდი, მათ შორის CSS და JavaScript ჩათვლით, შეგიძლიათ ჩამოტვირთოთ ყველა აქ. ამისათვის თქვენ გაქვთ ყველაფერი, რაც გჭირდებათ Bootstrap– ზე სადესანტო გვერდის შესაქმნელად.

    დასკვნა

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

    როგორც თქვენ იხილეთ ამ Bootstrap გაკვეთილზე დამწყებთათვის, მას მხოლოდ HTML, CSS და ზოგიერთი არასავალდებულო jQuery- ს ძირითადი ცოდნა სჭირდება. მიუხედავად იმისა, რომ არ არის ისეთი კომფორტული, როგორც WordPress– ის გამოყენება, Bootstrap კვლავ ვარგისი ალტერნატივაა ვებსაიტის შესაქმნელად.

    ამ დროისთვის, თქვენ იცით, თუ როგორ უნდა დააყენოთ და დააინსტალიროთ Bootstrap და მისი კომპონენტები, შექმნათ მარტივი სადესანტო გვერდი, შეიტანოთ რამდენიმე ძირითადი შინაარსი და შექმნათ იგი. თქვენ შეგიძლიათ შექმნათ სანავიგაციო მენიუები, დააყენოთ ფონის სურათები, შეიტანოთ ღილაკები, სვეტები და საკონტაქტო ფორმები.

    რა თქმა უნდა, უფრო მეტი სწავლაა.

    Bootstrap– ის ამ ძირითადი გაკვეთილის წყალობით, თქვენ ახლა საკმარისად იცით, რომ გააგრძელოთ წინსვლა საკუთარი თავის მიერ. თუ გინდა ჩარჩოებში ჩაღრმავება, კარგი ამოსავალია W3S სკოლები. ამის გარდა, ჩვენ ვიმედოვნებთ, რომ მოგეწონა ეს დამწყები სახელმძღვანელო და გვსურს მოვისმინოთ თქვენი აზრები და გამოცდილებები ამის შესახებ.

    განახლება: ჩვენ ასევე შევქმენით bootstrap cheat ფურცელი დამწყებთათვის .pdf და .png ვერსიებში.

    გაქვთ რაიმე აზრი Bootstrap სამეურვეოზე ზემოთ? კითხვები, კომენტარები, მოთხოვნები? გაგაცნობთ ქვემოთ მოცემულ კომენტარებში!

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map