Njupuk · Bootstrap ing basa Jawa

Sadurunge ngundhuh, manawa sampeyan duwe editor kode (disaranake Sublime Text 2 ) lan sawetara kawruh babagan HTML lan CSS. Kita ora bakal mbukak file sumber ing kene, nanging kasedhiya kanggo diundhuh. Kita bakal fokus kanggo miwiti file Bootstrap sing dikompilasi.

Download dikompilasi

Cara paling cepet kanggo miwiti: entuk versi kompilasi lan mini saka CSS, JS, lan gambar. Ora ana dokumen utawa file sumber asli.

Unduh Bootstrap

Ngundhuh sumber

Entuk file asli kanggo kabeh CSS lan JavaScript, bebarengan karo salinan lokal saka dokumen kanthi ngundhuh versi paling anyar langsung saka GitHub.

Unduh sumber Bootstrap

Ing undhuhan sampeyan bakal nemokake struktur lan isi file ing ngisor iki, kanthi logis nglumpukake aset umum lan nyedhiyakake variasi sing dikompilasi lan diminimalisir.

Sawise diundhuh, unzip folder sing dikompres kanggo ndeleng struktur Bootstrap (dikompilasi). Sampeyan bakal weruh kaya iki:

  bootstrap / ├── css / │ ├── bootstrap . css
   │ ├── bootstrap . min . css
   ├── js / │ ├── bootstrap . js
   │ ├── bootstrap . min . js
   └── img / ├── glyphicons - halflings . png
       └── glyphicons - halflings - putih . png

Iki minangka wangun Bootstrap sing paling dhasar: file sing disusun kanggo panggunaan cepet ing meh kabeh proyek web. Kita nyedhiyakake kompilasi CSS lan JS ( bootstrap.*), uga kompilasi lan minified CSS lan JS ( bootstrap.min.*). File gambar dikompres nggunakake ImageOptim , aplikasi Mac kanggo ngompres PNG.

Elinga yen kabeh plugin JavaScript mbutuhake jQuery dilebokake.

Bootstrap dilengkapi HTML, CSS, lan JS kanggo macem-macem perkara, nanging bisa diringkes karo sawetara kategori sing katon ing ndhuwur dokumentasi Bootstrap .

bagean Docs

Perancah

Gaya global kanggo awak kanggo ngreset jinis lan latar mburi, gaya link, sistem kothak, lan loro tata letak prasaja.

Dasar CSS

Gaya kanggo unsur HTML umum kayata tipografi, kode, tabel, formulir, lan tombol. Uga kalebu Glyphicons , set lambang cilik sing apik banget.

Komponen

Gaya dhasar kanggo komponen antarmuka umum kaya tab lan pil, navbar, tandha, header kaca, lan liya-liyane.

plugin JavaScript

Kaya karo Komponen, plugin JavaScript iki minangka komponen interaktif kanggo macem-macem tooltip, popovers, modal, lan liya-liyane.

Dhaptar komponen

Bebarengan, bagean plugin Komponen lan JavaScript nyedhiyakake unsur antarmuka ing ngisor iki:

Klompok tombol
Tombol dropdowns
Tab navigasi, pil, lan dhaptar
Navbar
Label
Lencana
Header kaca lan unit pahlawan
Gambar cilik
Tandha
Bar kemajuan
Modal
Dropdowns
Tooltips
Popovers
Akordion
Carousel
Typeahead

Ing pandhuan mbesuk, kita bisa njlentrehake komponen kasebut kanthi luwih rinci. Nganti saiki, goleki saben kasebut ing dokumentasi kanggo informasi babagan cara nggunakake lan ngatur.

Kanthi intro singkat menyang isi metu saka dalan, kita bisa fokus ing panggolekan Bootstrap kanggo nggunakake. Kanggo nindakake iku, kita bakal nggunakake cithakan HTML dhasar sing nyakup kabeh sing kita sebutake ing struktur File .

Saiki, iki katon ing file HTML khas :

<!DOCTYPE html>
<html>
  <sirah>
    <title> Cithakan Bootstrap 101 </judhul>
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  </head>
  <awak>
    <h1> Halo, jagad! </h1>
    <script src = "https://code.jquery.com/jquery.js" ></script> 
  </awak>
</html>

Kanggo nggawe cithakan Bootstrapped iki , lebokake file CSS lan JS sing cocog:

<!DOCTYPE html>
<html>
  <sirah>
    <title> Cithakan Bootstrap 101 </judhul>
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
    <!-- Bootstrap -->
    <link href = "css/bootstrap.min.css" rel = "stylesheet" media = "layar" >   
  </head>
  <awak>
    <h1> Halo, jagad! </h1>
    <script src = "https://code.jquery.com/jquery.js" ></script> 
    <script src = "js/bootstrap.min.js" ></script> 
  </awak>
</html>

Lan sampeyan wis disetel! Kanthi rong file kasebut ditambahake, sampeyan bisa miwiti ngembangake situs utawa aplikasi apa wae nganggo Bootstrap.

Pindhah ngluwihi cithakan dhasar karo sawetara conto tata letak. Kita ngajak wong-wong supaya ngulang conto kasebut lan ora mung nggunakake minangka asil pungkasan.

Cithakan wiwitan

Dokumen HTML barebone karo kabeh Bootstrap CSS lan JavaScript kalebu.
Situs marketing dhasar

Nampilake unit pahlawan kanggo pesen utama lan telung unsur pendukung.
Tata letak cairan

Migunakake sistem grid cairan responsif sing anyar kanggo nggawe tata letak cairan sing lancar.
Pemasaran sing sempit

Cithakan pemasaran sing tipis lan entheng kanggo proyek utawa tim cilik.
Dibenerake nav

Kaca marketing kanthi pranala navigasi sing ambane padha ing navbar sing diowahi.
mlebu

Barebones mlebu ing wangun kanthi adat, kontrol wangun sing luwih gedhe lan tata letak sing fleksibel.
Kaki kelet

Sematake footer kanthi dhuwur tetep ing sisih ngisor viewport pangguna.
Carousel jumbotron

Riff sing luwih interaktif ing situs marketing dhasar sing nampilake carousel sing misuwur.