Bootstrap

باشلاش

بۇ تۈرگە ئومۇمىي چۈشەنچە ، ئۇنىڭ مەزمۇنى ۋە ئاددىي قېلىپ بىلەن قانداق باشلاش كېرەك.

1. چۈشۈرۈش

چۈشۈرۈشتىن بۇرۇن ، كود تەھرىرلىگۈچى ( Sublime Text 2 نى تەۋسىيە قىلىمىز ) ۋە HTML ۋە CSS نىڭ بەزى خىزمەت بىلىملىرى بولۇشىغا كاپالەتلىك قىلىڭ. بىز بۇ يەردە ئەسلى ھۆججەتلەرنى بېسىپ ئۆتمەيمىز ، ئەمما چۈشۈرۈشكە بولىدۇ. بىز توپلانغان Bootstrap ھۆججىتىمىز بىلەن باشلاشقا ئەھمىيەت بېرىمىز.

چۈشۈرۈش تۈزۈلگەن

باشلاشنىڭ ئەڭ تېز ئۇسۇلى: CSS ، JS ۋە رەسىملىرىمىزنىڭ تۈزۈلگەن ۋە كىچىكلىتىلگەن نۇسخىسىغا ئېرىشىش. ھۆججەت ياكى ئەسلى مەنبە ھۆججىتى يوق.

Bootstrap نى چۈشۈرۈڭ

مەنبەنى چۈشۈرۈش

بارلىق CSS ۋە Javasript نىڭ ئەسلى ھۆججەتلىرىنى GitHub دىن ئەڭ يېڭى نەشرىنى بىۋاسىتە چۈشۈرۈش ئارقىلىق ھۆججەتلەرنىڭ يەرلىك نۇسخىسى بىلەن بىللە ئېلىڭ.

Bootstrap مەنبەسىنى چۈشۈرۈڭ

2. ھۆججەت قۇرۇلمىسى

چۈشۈرۈش جەريانىدا تۆۋەندىكى ھۆججەت قۇرۇلمىسى ۋە مەزمۇنىنى تاپالايسىز ، لوگىكىلىق ئورتاق مۈلۈكنى گۇرۇپپىلاش ۋە تۈزۈلگەن ۋە كىچىكلىتىلگەن ئۆزگىرىشلەر بىلەن تەمىنلەيسىز.

چۈشۈرۈپ بولغاندىن كېيىن ، پىرىسلانغان ھۆججەت قىسقۇچنى يېشىپ (تۈزۈلگەن) Bootstrap نىڭ قۇرۇلمىسىنى كۆرۈڭ. سىز مۇنداق بىر نەرسىنى كۆرىسىز:

  bootstrap / ├── css / │ ├── bootstrap . css
   │ ├── bootstrap . min . css
   ├── js / │ ├── bootstrap . js
   │ ├── bootstrap . min . js
   ├── img / │ ├── glyphicons - يېرىم تۇغقان . png
   │ ├── glyphicons - يېرىم تۇغقان - ئاق . png
  
  
        
        
        └── README . md

بۇ Bootstrap نىڭ ئەڭ ئاساسلىق شەكلى: ھەر قانداق تور تۈرىدە دېگۈدەك تېز ئىشلىتىش ئۈچۈن تۈزۈلگەن ھۆججەتلەر. بىز تۈزۈلگەن CSS ۋە JS ( bootstrap.*) ، شۇنداقلا تۈزۈلگەن ۋە كىچىكلىتىلگەن CSS ۋە JS ( bootstrap.min.*) بىلەن تەمىنلەيمىز. رەسىم ھۆججەتلىرى PNGs نى پىرىسلاش ئۈچۈن Mac دېتالى ImageOptim ئارقىلىق پىرىسلىنىدۇ.

3. نېمىلەرنى ئۆز ئىچىگە ئالىدۇ

Bootstrap ھەر خىل ئىشلارغا HTML ، CSS ۋە JS سەپلەنگەن ، ئەمما ئۇلارنى Bootstrap ھۆججىتىنىڭ ئۈستىدە كۆرۈنىدىغان بىر قانچە تۈرلەر بىلەن يىغىنچاقلاشقا بولىدۇ .

ھۆججەت بۆلەكلىرى

Scaffolding

بەدەننىڭ تىپى ۋە تەگلىكىنى ، ئۇلىنىش ئۇسلۇبى ، تور سىستېمىسى ۋە ئىككى ئاددىي ئورۇنلاشتۇرۇشنى ئەسلىگە كەلتۈرۈش ئۈچۈن يەرشارى ئۇسلۇبى.

Base CSS

خەت بېسىش ، كود ، جەدۋەل ، جەدۋەل ۋە كۇنۇپكا قاتارلىق ئورتاق HTML ئېلېمېنتلىرىنىڭ ئۇسلۇبى. Glyphicons نىمۇ ئۆز ئىچىگە ئالىدۇ ، ئېسىل كىچىك سىنبەلگە توپلىمى.

زاپچاسلار

بەتكۈچ ۋە دورا ، يولباشچى ، ئاگاھلاندۇرۇش ، بەت ماۋزۇسى قاتارلىق ئادەتتىكى كۆرۈنمە يۈزى زاپچاسلىرىنىڭ ئاساسىي ئۇسلۇبلىرى.

Javascript قىستۇرمىلىرى

زاپچاسلارغا ئوخشاش ، بۇ Javascript قىستۇرمىلىرى قورال كۆرسەتكۈچى ، پوپايكا ، مودېل ۋە باشقىلار ئۈچۈن ئۆز-ئارا تەسىر كۆرسىتىدىغان زاپچاسلار.

زاپچاسلارنىڭ تىزىملىكى

زاپچاس ۋە Javascript قىستۇرما بۆلەكلىرى بىرلىكتە تۆۋەندىكى كۆرۈنمە يۈزى ئېلېمېنتلىرىنى تەمىنلەيدۇ:

  • كۇنۇپكا گۇرۇپپىلىرى
  • كۇنۇپكا چۈشۈش
  • يولباشچى بەتكۈچ ، دورا ۋە تىزىملىك
  • Navbar
  • Labels
  • Badges
  • بەت ماۋزۇلىرى ۋە قەھرىمانلار بىرلىكى
  • Thumbnails
  • ئاگاھلاندۇرۇش
  • ئىلگىرىلەش بالدىقى
  • Modals
  • تامچە
  • قورال قوراللىرى
  • Popovers
  • ئاككوردىيون
  • Carousel
  • Typeahead

كەلگۈسىدىكى يېتەكچىدە ، بىز بۇ زاپچاسلارنى ئايرىم-ئايرىم ھالدا تەپسىلىيرەك مېڭىشىمىز مۇمكىن. شۇ ۋاقىتقىچە ، ئۇلارنى ئىشلىتىش ۋە خاسلاشتۇرۇش ھەققىدىكى ئۇچۇرلارنى ھۆججەتلەردىن ئىزدەڭ.

4. ئاساسىي HTML ئەندىزىسى

مەزمۇننى قىسقىچە تونۇشتۇرۇش ئارقىلىق ، Bootstrap نى ئىشلىتىشكە ئەھمىيەت بېرەلەيمىز. بۇنىڭ ئۈچۈن بىز ھۆججەت قۇرۇلمىسىدا تىلغا ئالغان بارلىق مەزمۇنلارنى ئۆز ئىچىگە ئالغان ئاساسىي HTML قېلىپىنى ئىشلىتىمىز .

ھازىر ، تىپىك HTML ھۆججىتىنى كۆرۈپ باقايلى :

  1. <html>
  2.   <head>
  3.     <title> Bootstrap 101 قېلىپ </title>
  4.   </head>
  5.   <body>
  6.     <h1> ياخشىمۇسىز ، دۇنيا! </h1>
  7.   </body>
  8. </html>

بۇنى Bootstrapped ئەندىزىسىگە ئايلاندۇرۇش ئۈچۈن ، مۇناسىپ CSS ۋە JS ھۆججىتىنى ئۆز ئىچىگە ئالىدۇ:

  1. <html>
  2.   <head>
  3.     <title> Bootstrap 101 قېلىپ </title>
  4.     <! - Bootstrap ->
  5.     <link href = "css / bootstrap.min.css" rel = "ئۇسلۇب جەدۋىلى" >  
  6.   </head>
  7.   <body>
  8.     <h1> ياخشىمۇسىز ، دۇنيا! </h1>
  9.     <script src = "js / bootstrap.min.js" > </script> 
  10.   </body>
  11. </html>

ھەمدە تەڭشەلدىڭىز! بۇ ئىككى ھۆججەت قوشۇلغاندىن كېيىن ، Bootstrap ئارقىلىق ھەر قانداق تور بېكەت ياكى پروگراممىنى تەرەققىي قىلدۇرۇشقا باشلىيالايسىز.

5. مىساللار

بىر قانچە مىسال ئورۇنلاشتۇرۇشى بىلەن ئاساسىي قېلىپتىن ھالقىڭ. بىز كىشىلەرنى بۇ مىساللارنى تەكرارلاشقا ئىلھاملاندۇرىمىز ، ئۇلارنى پەقەت ئاخىرقى نەتىجە سۈپىتىدە ئىشلەتمەيمىز.

  • ئاساسىي سېتىش تور بېكىتى

    دەسلەپكى ئۇچۇر ۋە ئۈچ ياردەمچى ئېلېمېنت ئۈچۈن قەھرىمان ئورۇننى كۆرسىتىش.

  • سۇيۇقلۇق ئورۇنلاشتۇرۇش

    يېڭى ئىنكاسچان ، سۇيۇقلۇق تور سىستېمىسىمىزنى ئىشلىتىپ يوچۇقسىز سۇيۇقلۇق ئورۇنلاشتۇردى.

  • Starter template

    بارلىق Bootstrap CSS ۋە javascript نى ئۆز ئىچىگە ئالغان تاياقچە HTML ھۆججىتى.

ئۇنىڭدىن كېيىنچۇ؟

ئۇچۇر ، مىسال ۋە كود پارچىلىرى ئۈچۈن ھۆججەتلەرگە باشلاڭ ياكى كېيىنكى سەكرەپ ، كەلگۈسىدىكى تۈرلەر ئۈچۈن Bootstrap نى خاسلاشتۇرۇڭ.

Bootstrap ھۆججىتىنى زىيارەت قىلىڭ Bootstrap نى ئىختىيارىي قىلىڭ