Bootstrap nga

Panangrugi

Panangkita ti proyekto, dagiti linaonna, ken no kasano ti mangrugi babaen ti simple a plantilia.

1. I-download

Sakbay ti panag-download, siguraduen nga addaan iti editor ti kodigo (irekomendarmi ti Sublime Text 2 ) ken sumagmamano a pannakaammo ti panagtrabaho iti HTML ken CSS. Saanmi a magna kadagiti taudan a file ditoy, ngem dagitoy ket magun-od a mai-download. Ipangpangrunami ti panangrugi kadagiti naurnong a Bootstrap files-mi.

I-download ti naurnong

Kaparpartak a wagas tapno mangrugi: alaen dagiti naurnong ken napabassit a bersion ti CSS, JS, ken ladawantayo. Awan dagiti dok wenno orihinal a taudan a papeles.

I-download ti Bootstrap

I-download ti gubuayan

Alaen dagiti orihinal a papeles para kadagiti amin a CSS ken Javasript, agraman ti lokal a kopia dagiti dok babaen ti panangi-download ti kaudian a bersion a direkta manipud iti GitHub.

I-download ti gubuayan ti Bootstrap

2. Estruktura ti file

Iti uneg ti panagi-download ket makasarakka ti sumaganad nga estruktura ti papeles ken dagiti linaonna, a lohikal a manggrupo kadagiti gagangay a sanikua ken mangipaay ti agpada a naurnong ken napabassit a panagduduma.

Apaman a nai-download, i-unzip ti na-compress a folder tapno makita ti estruktura ti (ti naurnong) a Bootstrap. Makitamto ti kastoy:

  bootstrap / ├── css / │ ├── bootstrap nga pag-boot . css
   │ ├── nga pag- bootstrap . min nga . css
   ├── js / │ ├── nga bootstrap nga bootstrap . js
   │ ├── nga bootstrap nga bootstrap . min nga . js
   ├── img / │ ├── dagiti glipikon - dagiti kagudua . png
   │ ├── dagiti glipikon - dagiti kagudua - puraw . png nga
  
  
        
        
        └── BASAEN TI . md nga

Daytoy ti kangrunaan a porma ti Bootstrap: dagiti naurnong a papeles para iti napardas a panagusar ti drop-in iti dandani ania man a proyekto ti web. Mangipaaykami kadagiti naurnong a CSS ken JS ( bootstrap.*), kasta met dagiti naurnong ken napabassit a CSS ken JS ( bootstrap.min.*). Dagiti file ti ladawan ket maikompresion babaen ti ImageOptim , maysa nga app ti Mac para iti panagkompresion kadagiti PNG.

3. Ania ti nairaman

Ti Bootstrap ket umay a naikkan ti HTML, CSS, ken JS para kadagiti amin a kita ti banag, ngem dagitoy ket mabalin a magupgop babaen ti sumagmamano a kategoria a makita iti ngato ti dokumentasion ti Bootstrap .

Dagiti benneg dagiti dokumento

Andamio nga

Dagiti sangalubongan nga estilo para iti bagi tapno i-reset ti kita ken likudan, dagiti estilo ti silpo, sistema ti grid, ken dua a simple a layout.

Base nga CSS

Dagiti estilo para kadagiti gagangay nga elemento ti HTML a kas ti tipograpia, kodigo, lamisaan, porma, ken dagiti buton. Karaman pay ti Glyphicons , maysa a nagsayaat a bassit nga icon set.

Dagiti paset

Dagiti batayan nga estilo para kadagiti gagangay a paset ti interface a kas dagiti tab ken pildoras, navbar, alerto, dagiti ulo ti panid, ken dadduma pay.

Dagiti plugin ti Javascript

Kasla dagiti Paset, dagitoy a plugin ti Javascript ket interaktibo a paset para kadagiti banag a kas dagiti tooltip, popovers, modals, ken dadduma pay.

Listaan ​​dagiti paset

Sangsangkamaysa, dagiti benneg ti Paset ken dagiti plugin ti Javascript ket mangipaay kadagiti sumaganad nga elemento ti interface:

  • Dagiti grupo ti buton
  • Dagiti dropdown ti buton
  • Navigational tab, pildoras, ken listaan
  • Navbar nga
  • Dagiti etiketa
  • Dagiti Badge
  • Dagiti ulo ti panid ken yunit ti bannuar
  • Dagiti Thumbnail
  • Dagiti Alerto
  • Dagiti bara ti panagrang-ay
  • Dagiti Modal
  • Dagiti dropdown
  • Dagiti tip ti remienta
  • Dagiti Popovers
  • Accordion nga
  • Karrusel nga
  • I-typeahead

In future guides, we may walk through these components individually in more detail. Until then, look for each of these in the documentation for information on how to utilize and customize them.

4. Basic HTML template

With a brief intro into the contents out of the way, we can focus putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the File structure.

Now, here's a look at a typical HTML file:

  1. <html>
  2.   <head>
  3.     <title>Bootstrap 101 Template</title>
  4.   </head>
  5.   <body>
  6.     <h1>Hello, world!</h1>
  7.   </body>
  8. </html>

To make this a Bootstrapped template, just include the appropriate CSS and JS files:

  1. <html>
  2.   <head>
  3.     <title>Bootstrap 101 Template</title>
  4.     <!-- Bootstrap -->
  5.     <link href="css/bootstrap.min.css" rel="stylesheet">
  6.   </head>
  7.   <body>
  8.     <h1>Hello, world!</h1>
  9.     <script src="js/bootstrap.min.js"></script>
  10.   </body>
  11. </html>

And you're set! With those two files added, you can begin to develop any site or application with Bootstrap.

5. Examples

Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.

  • Basic marketing site

    Featuring a hero unit for a primary message and three supporting elements.

  • Fluid layout

    Uses our new responsive, fluid grid system to create a seamless liquid layout.

  • Starter template

    A barebones HTML document with all the Bootstrap CSS and javascript included.

What next?

Head to the docs for information, examples, and code snippets, or take the next leap and customize Bootstrap for any upcoming project.

Visit the Bootstrap docs Customize Bootstrap