twitter-bootstrap-3 Handledning
Komma igång med twitter-bootstrap-3

Angular 2 AngularJS asp.net-mvc CSS HTML JavaScript jQuery PHP Ruby on Rails twitter-bootstrap
Sök…


Anmärkningar

Bootstrap är en fri och öppen källkod för webbserver för att designa webbplatser och webbapplikationer. Den innehåller HTML- och CSS-baserade formgivningsmallar för typografi, formulär, knappar, navigering och andra gränssnittskomponenter, såväl som JavaScript-tillägg. Till skillnad från många webbramar, handlar det bara om front-end-utveckling.

Bootstrap är det näst mest stjärnmärkta projektet på GitHub, med nästan 100 000 stjärnor och nästan 45 000 gafflar.

versioner

Version Utgivningsdatum
3.3.7 2016/07/25

Installation

  • Direktnedladdning - nedladdningslänk
  • CDN - kom hit
  • Bower - bower install bootstrap [läs]
  • NPM - npm install bootstrap [läs]
  • Kompositör - composer require twbs/bootstrap [läs]
  • Anpassa - Jag har din egen konfigurering, du kan anpassa här .
  • Sass - För Sass-relaterade projekt kan du få det här .

Användande 

<head>
  <link rel="stylesheet" href="path/to/bootstrap.min.css">
</head>

Hänvisning till bootstrap js-filen görs med skripttagg precis ovanför body-taggen (se nedan). Notera också att bootstrap använder jQuery för de flesta widgets - som dragspelkarusell osv. Så referens bootstrap js-fil under jQuery js-filen.

**Prov** 
<!DOCTYPE html>
<html lang="en">

<head>

  <title>Form Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>

  <div class="container">
    <h2>Form Email</h2>
    <form role="form">
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" placeholder="Enter password">
      </div>
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>

Hej världen

Följande HTML sida illustrerar en enkel Hello World-sida med Bootstrap 3 .

Sidan innehåller en navigationsfält i full bredd med exempellänkar och en rullgardinsmeny. Navigeringsfältet drar nytta av Bootstraps första mobilfunktioner. Det börjar kollapsas i mobilvyer och blir horisontellt när den tillgängliga visningsbredden ökar.

Dessutom har ett jumbotron använts för att visa information som presenteras. 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Hello World</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>

    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Hello, World!</a>
            </div>


            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="jumbotron">
            <h1>Bootstrap</h1>
            <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
            <p><a class="btn btn-primary btn-lg">Learn more</a></p>
        </div>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Bootstrap installation och komma igång

Introduktion
Så du vill börja använda bootstrap för ditt projekt? Bra! låt oss komma igång nu !.

Vad är bootstrap? Bootstrap är ett bibliotek med öppen källkod som du kan använda för att göra fantastiska lyhörda projekt med responsiv design och enkel kod. Responsive Design är en designfilosofi där i designen av systemet (representationen och layouten) svarar / anpassas beroende på enhetens layout. Det främsta skälet till att hålla din design lyhörd är att öka räckvidden för din applikation till en större användarbas med hjälp av en mängd enheter.
Installation
Bootstrap kan installeras på många olika sätt och för många olika slags projekt. I listan nedan har jag lagt några länkar för nedladdning och självstudier om hur du installerar bootstrap
Ladda ner länkar

  • Direktnedladdning - nedladdningslänk
  • CDN - kom hit
  • Bower - bower install bootstrap [läs]
  • NPM - npm install bootstrap [läs]
  • Kompositör - composer require twbs/bootstrap [läs]
  • Anpassa - Jag har din egen konfigurering, du kan anpassa här .
  • Sass - För Sass-relaterade projekt kan du få det [här] [1].

Grundläggande information
Så du har nu installerat bootstrap i ditt projekt. Och nu är det dags att börja använda de stora fördelarna med bootstrap. Först ska jag berätta för dig en grundläggande användning av bootstrap, därefter ska jag visa några små exempel och i slutet ger jag dig ett startkodsexempel som du kan använda som startmall!

Nätsystemet
Bootstrap använder ett rutnätssystem. Detta nätsystem består normalt av 12 kolumner. Var och en av dessa 12 kolumner har samma bredd men kan ha olika höjder.

Så vi har ett rutnätssystem som består av 12 kolumner. Vi kan använda dessa kolumner för att bygga vår grundläggande webbplats. låt oss säga att vi vill uppnå följande layout:

meny - full bredd
sidofält - 1/3 av skärmen
Huvudinnehåll 2/3 av skärmen
Sidfot - full bredd

Menyn
Först ska vi titta på menyn. Som vi vet fungerar nätsystemet med 12 kolumner. Eftersom vi vill ha menyn i full bredd måste vi lägga till menyn i alla de 12 kolumnerna. Det kommer att se ut som exemplet nedan 

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    Menu
</div>

Genom att ge menyn en col-lg-12-klass anger vi följande:
col - Kolumnen i klassnamnet står för kolumner.
lg - Lg i klassnamnet står för skärmens bredd, i detta fall stor.
12 - 12 i klassnamnet står för antalet kolumner som vi vill att vår meny ska ha. eftersom vi i detta fall vill ha menyn på en full bredd får vi alla 12 kolumner (12/12)

Eftersom vi har använt 12 av de 12 kolumnerna för vår meny kommer allt efter menyn att ställas in på en ny rad.

Sidofältet
Det andra objektet som vi vill lägga till i vår mall är sidofältet. Nu som jag har sagt vi vill att sidofältet ska vara 1/3 av skärmen. Så vad vi ska göra är att dela upp de 12 kolumnerna i 3. som är 4. Vi vet nu hur många kolumner vi vill fylla för att nå 1/3 av skärmen. Följ koden nedan. 

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    The sidebar
</div>

Samma som med menyn först nu skiljer vårt antal cols sig från menyn.
col - Kolumnen i klassnamnet står för kolumner.
lg - Lg i klassnamnet står för skärmens bredd, i detta fall stor.
4 - de 12 i klassnamnet står för antalet kolumner som vi vill att vårt sidofält ska ha. eftersom vi i detta fall vill att sidofältet ska fylla 1/3 av skärmen så att vi bara tar tag i 4 av de 12 kolumnerna (4/12)

Innehållet
Nu på denna rad har vi fortfarande 8 kolumner kvar bredvid vår sidofält. Så nu kommer vi att fylla dem med vårt innehåll. Se exempelkoden nedan 

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    The sidebar
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
    The main content
</div>

Nu eftersom vi har fyllt i de återstående 8 kolumnerna i våra 12 kolumner på den här raden kommer nästa avsnitt igen att börja på en ny rad med 12 kolumner.

Sidfoten
Sidfoten är, återigen, precis som på menyn som kommer att bli ett block i full bredd på skärmen så vi tar tag i alla 12 kolumner på denna rad för vår sidfot, se exemplet nedan. 

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    The sidebar
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
    The main content
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The footer
</div>i are described below.

Så nu har vi skapat, med bara en mycket liten html-fil vår första bootstrap-mall. Men det här är bara grunderna. Normalt skulle vi bilda den här koden lite mer för att ge den fullständig bootstrap-upplevelse. Några av dessa erfarenheter beskrivs nedan.

Använda rader och containrar Som jag har sagt i det enkla exemplet ovan använder bootstrap rader med 12 kolumner. När en rad är fylld med 12 kolumner startar remsan på en ny rad. det bästa sättet att visa dessa rader är genom att använda radklasser. Vi kommer också att använda en containerklass. detta är som en body-tagg, i den behållaren lägger vi all vår kod. Du kan antingen välja mellan en behållare eller en behållarvätskeklass. Den enda skillnaden är att behållarvätskeklassen använder hela skärmbredden och behållarklassen inte. Ett exempel på dessa grundläggande funktioner finns nedan. 

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            The menu consisting of 12 columns
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            The sidebar consisting of 4 columns
        </div>
        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
            The main content consisting of 8 columns
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            The footer consisting of 12 columns
        </div>
    </div>
</div>

Så vi har nu gjort en hel sida mall med bootstrap. Det är verkligen en mycket enkel men börja med grunderna och senare kan du använda alla typer av bootstrap-klasser och funktionaliteter. Sista sak. Kolumnnamnen lg - md - sm och xs i klasserna motsvarar, som jag har sagt till sidans bredd. LarGe, MeDium, SMall och XSmall. Glöm inte att du kan använda det för att till och med utforma kolumner på olika bredder genom att ändra mängden kolumner. Kom ihåg att en hel rad består av 12 kolumner!

För mer information besök: http://getbootstrap.com/ <br? För bra exempel, besök: http://expo.getbootstrap.com eller http://bootsnipp.com/

Låt mig veta om du vill att jag ska lägga till mer information eller om du skulle stöta på några problem! och lycklig kodning till er alla!



Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow