Latest web development tutorials

bootstrap profilu

cel

Bootstrap to najpopularniejszy framework front-end, wydała swoją trzecią wersję (v3.0.0). Ten przewodnik zabierze Cię do rozpoczęcia nauki Bootstrap 3.

Zobaczysz również jak korzystać z różnych ramki niestandardowe funkcje ramek, takich jak przy użyciu siatki stworzyć układ, nawigacja jest tworzony przez NAV, używając hulanka tworzenie listy rozwijanej, dodać wtyczek społeczne i Map Google i innych stron trzecich wtyczek.

screenshot demo


Czym jest Bootstrap

Bootstrap to framework front-end do szybkiego tworzenia aplikacji internetowych i stron internetowych.

We współczesnym rozwoju sieci, istnieje kilka elementów do prawie wszystkich projektów internetowych są potrzebne.

Bootstrap dostarcza Ci wszystkich tych podstawowych modułów - Grid, Typografia, tabel, formularzy, przyciski i szybkość reakcji.

Ponadto, istnieje wiele innych przydatnych elementów front-end, takich jak Dropdowns, nawigacja, czasowniki modalne, Typehead, paginacji, hulanka, breadcrumb, zakładka, miniatury, nagłówki i tak dalej.

Dzięki nim można zbudować projektu sieci Web, i niech go uruchomić, aby szybciej i łatwiej.

Ponadto, ponieważ cała struktura oparta jest na modułach, można umieścić swój własny CSS, a nawet duże korekty po rozpoczęciu projektu, aby dostosować.

Opiera się ona na kilku najlepszych praktyk, uważamy, że jest to dobre miejsce, aby rozpocząć naukę nowoczesną możliwość rozwoju sieci, po opanowaniu podstaw języka HTML i JavaScript / jQuery, można zastosować tę wiedzę w rozwoju sieci.

Choć niektórzy krytycy, wszystkie projekty budowane przez Bootstrap wyglądają tak samo, nie trzeba wiedzieć zbyt wiele o HTML + CSS wiedzy można zbudować stronę internetową. Jednak musimy zrozumieć, Bootstrap to wspólne ramy, tak jak innych wspólnych rzeczy, które trzeba dostosować do jej wyjątkowości. Jeżeli chcesz dostosować, trzeba pogłębionej analizy, nie ma dobrego HTML + CSS baza nie jest wykonalne.

Bootstrap z wyjątkiem, oczywiście, istnieje wiele innych dobre przednia rama, używając ramach którego jest rozwój doboru personelu, ale Bootstrap na pewno warto spróbować.

Dlaczego powinno projekt używać Bootstrap?


Pobierz strukturę plików i zrozumieć

Można wybierać spośród https://github.com/twbs/bootstrap/archive/v3.0.0.zip lub https://github.com/twbs/bootstrap/releases/download/v3.0.0/bootstrap-3.0.0-dist .zip pobierz Bootstrap wersję 3.0.0 dalej. Używamy pierwszy, można użyć drugiego.

Ponadto zapewniamy kod do pobrania zawiera link umożliwiający pobranie pierwszej do folderu bootstrap kodu. Ta strona zawiera również oryginalne używane dostosować Bootstrap CSS custom.css.

Po rozpakowaniu, znajdziesz w folderze głównym bootstrap-3.0.0 Niektóre pliki i foldery.

Główny plik CSS - bootstrap.css i jego uproszczona wersja bootstrap-min.css, znajduje się w głównym folderze 'Dist' folderu 'css' bootstrap-3.0.0 pliku w folderze.

W "dist" w środku, znajduje się folder "Js zawiera główne bootstrap.js plików JavaScript i jego uproszczoną wersję.

Plik w katalogu istnieje folderu osobne "JS" zawiera różne pliki JavaScript różnych wtyczek.

W pliku głównym ciągu "aktywa", znajdziesz innego folderu 'JS. Jest to miejsce z HTML5 podkładki z html5shiv.js dla uzyskania wsparcia IE8. Istnieje również respond.min.js plik do wspierania IE8 zapytań multimedialnych. Ten folder zawiera również plugin js jquery.js Bootstrap zależnych.

W tym samym folderze znajduje się folder "ICO" zawiera szereg urządzeń mobilnych ikon i ikony favicon.

W 'css' tej samej ścieżce folder zawiera plik css dokumentu.

Folder "_includes 'i' _layouts 'zawiera pewną domyślną strukturę układu dokumentu, który może być przydatny projekt dla szybkiego prototypowania.

Folder główny "mniej" folder zawiera jakieś .less pliku. Jeśli chcesz być opracowane w oparciu o mniej, pliki te mogą być użyteczne.

W folderze głównym, istnieją pewne pliki. Niektóre z nich są stosowane w podstawowych plików prototypów HTML, z których niektóre są w oparciu o Bower dla zebranych bower.json, browserstack.json. Ponadto istnieje composer.json i _config.yml plik YAML.

Ponadto ściągnąć z podanego linku, można także użyć następującego polecenia skompilować wszystkie CSS, pliki JS -

$ bower install bootstrap

Można skopiować Bootstrap Raport Git

git clone git://github.com/twbs/bootstrap.git

W tym tutorialu, mamy tylko pobrać plik zip, nie używać.

Gdy nauczysz się tego kursu, zachęcamy do altana ramki montażowej, aby zobaczyć jak to działa.

Kompilacja wsparcie NetDNA i uproszczona wersja Bootstrap CSS, JS i inne tematy css. Można zacytować im następujące oświadczenie

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

Opracowane przy użyciu Bootstrap v3.0.0

Podstawowe HTML

Poniżej przedstawiono podstawowe struktury HTML dla naszego projektu

<! DOCTYPE html>
<Html>
  <Head>
    <Title> Bootstrap V3 template </ title>
    <Meta name = "rzutni" content = "width = device-width, initial-scale = 1.0">
    <! - Bootstrap ->
    <Link href = rel = "stylesheet" media "Ekran" "bootstrap-3.0.0 / dist / css / bootstrap.min.css" =>

    <! - HTML5 podkładkę i Respond.js IE8 wsparcie elementów HTML5 i zapytań mediów ->
    <! - [If lt IE 9]>
      <Script src = "bootstrap-3.0.0 / aktywa / js / html5shiv.js"> </ script>
      <script src = "bootstrap-3.0.0 / aktywa / js / respond.min.js"> </ script>
    <! [Endif] ->
  </ Head>
  <Body>
    <H1> Witaj, świecie! </ H1>

    <! - JQuery (niezbędny dla wtyczek Bootstrap w JavaScript) ->
    <Script src = "// code.jquery.com/jquery.js"> </ script>
    <! - Uwzględnij wszystkie skompilowane pluginy (poniżej) lub obejmować poszczególne pliki w razie potrzeby ->
    <Script src = "bootstrap-3.0.0 / dist / js / bootstrap.min.js"> </ script>
  </ Body>
</ Html>

Należy pamiętać, że szablon i dodaje html5shiv.js respond.min.js uzyskania wsparcia IE8. W Bootstrap wersja 3 został dodany do tych plików.

My twitter-bootstrap pliku w folderze głównym folderze serwera sieci Web, zostało umieszczone bootstrap-3.0.0 folder. Wszystkie pliki HTML tworzymy zostaną umieszczone w twitter-bootstrap. Powodem zilustrować tę tezę, w celu usprawnienia naszego procesu rozwojowego.

Dostosuj

Będziemy dostosowywać różne style CSS box. W związku z tym, na podstawie oryginalnego CSS nie zniszczyć pliki na (znajduje bootstrap-3.0.0 folderu dist) w tym samym folderze, będziemy tworzyć osobny plik CSS o nazwie custom.css. Następnie w pliku HTML, zaraz po oryginalnym pliku CSS, odwoływać się do pliku CSS. W ten sposób możemy zastąpić domyślny styl, który chcemy zmienić, jeśli jednak Bootstrap uaktualnić, oryginalny plik CSS nie zniszczyć nasz zwyczaj w oparciu o zaktualizowane. Zalecamy również, aby stosować to podejście w procesie rozwoju.

Tworzenie nawigacji

Aby utworzyć nawigacji w pliku HTML, a następnie przez organizm po znaczniku początkowym, dodaj następujący kod.

<Nav class = "navbar navbar-odwrotna navbar utrwalonych-top" role = "nawigacji">
  <Class Ul = "nav navbar-nav">
  <Li> <a href="new.html" class="navbar-brand">
<Img src = "logo.png"> </a> </ li>
  <Li class = "aktywny"> <a href="#"> Home </a> </ li>
  <Li> <a href="price.html"> Cena </a> </ li>
  <Li> <a href="contact.html"> Kontakt </a> </ li>
  <Li class = "listy rozwijanej">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Social <b class = "daszka"> </ b> </a>
        <Class Ul = "rozwijana-menu">
          <li class = "socjalne"> <g: plusone adnotacji = "inline" width = "150"> </ g: plusone> </ li>
          <Li class = "socjalne"> <div class = "fb-like" data-href = "https://developers.facebook.com/docs/plugins/~~number=plural" data-width = "szerokości piksela wtyczki" Dane -wysokość = "wysokość pikseli wtyczki" danych colorscheme = "light" data-layout = "standard" data-action = "jak" data-show-faces = "true" data-send = "false"> < / div> </ li>
          <Li class = "socjalne"> <a href="https://twitter.com/share" class="twitter-share-button"> Tweet </a>
! <Script> function (d, s, id) {var js, FJS = d.getElementsByTagName (s) [0]; if {js = d.createElement (s); js (d.getElementById (id)!). id = id; js.src = "// platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}} (dokument," skrypt "," twitter-WJS "); < / script> </ li>
       </ Ul>
      </ Li>
  </ Ul>
</ Nav>

Dla nawigacji, Bootstrap wykorzystanie klasa "navbar" w hierarchii kontenera. W związku z tym, będzie przypisana do utrzymywania całego elementu nawigacji NAV.

Użyliśmy klasa "navbar-odwrotnego", aby zmienić domyślny kolor paska nawigacyjnego, wykorzystanie światła przed zmrokiem zamiast domyślnego. Klasa "pasek nawigacyjny utrwalonych-top" zapewnia, że ​​kiedy przewinąć stronę HTML, pasek nawigacji u góry ustalonej pozycji.

W Bootstrap V3.0.0, gdy nawigacja jest tworzony przy użyciu role = "nawigacji" jest nowy. Bootstrap polecam takiego używania, na łatwy dostęp do paska nawigacyjnego.

W tym momencie musimy zwiększyć ciało dokumentu custom.css 'padding-top: 80px; ". Dodać do organizmu jako górze wypełnionych pikseli mogą być różne, ale jeśli to zrobisz, górna część paska nawigacji po, zostaną ukryte.

W nav pojemnika, my mamy klasę "nav" oraz listy nieuporządkowanej "NavBar-nav". W tym liście nieuporządkowanej każdy element listy zawiera łącze nawigacji.

Klasa "pasek nawigacyjny marki" dla prezentując markę. Użyliśmy obraz. Ponieważ wysokość wysokość obrazu jest większa niż na pasku nawigacyjnym bazowy, gdzie robimy pewne dostosowania. The '.navbar-nav> li> a "do" line-height "własność z pierwotnej domyślnej 20 pikseli do 50 pikseli, zmienić rozmiar czcionki na 16px.

Link do prawej, mamy zwiększone pole rozwijane. Dla związane li dodany do klasy '' rozwijanej, a następnie dodanie 'rozwijaną-przełączanie "i" daszek "kotwicę z dwóch klas. Kotwa naszego projektu rzeczywiście zawiera anchor text społecznego. Ten li zawiera nieuporządkowaną listę, każdy element listy w zagnieżdżonej listy są przedstawione w poniższej ramce zawierający link.

W polu listy rozwijanej, że dodaliśmy wtyczkę społecznej. Pierwszy zawiera li znaku Google Plus, a druga zawiera Facebook li tag, a trzeci zawiera tag wyświetlacz li Twitter przyciski i jakiś skrypt js.

Dodatkowo, należy uruchomić po znacznika body, dodaj następującą znaczników i włączony do Facebooka Przycisk działa

<Div id = "fb-root"> </ div>

(Function (d, s, id) {
  var js, FJS = d.getElementsByTagName (s) [0];
  if (d.getElementById (id)) return;
  js = d.createElement (s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore (JS, FJS);
} (Dokument "skrypt", "facebook-jssdk '));

Aby Twitter przycisk pracy, kończymy przed znacznika body, dodaj następujący skrypt

(Function () {
    var PO = document.createElement ( 'script'); po.type = 'text / javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName ( "scenariusz") [0]; s.parentNode.insertBefore (PO, s);
  }) ();

Używamy następujący styl dodać kilka dodatkowych styl do klasy "socjalne" przycisków społecznych.

.socials {
padding: 10px;
}

To kończy naszą nawigację.

Tworzenie pokazu slajdów hulanka

W celu Project Home Page pasek nawigacyjny, tworzenie pokazu slajdów, będziemy używać następujących tagów

<Div id = "karuzeli Przykładem-generic" class = "karuzela slide">
  <! - -> Wskaźniki
  <Ol class = "karuzeli wskaźniki">
    <Li danych target = "# karuzeli Przykładem-generic" dane-slide-to = "0" class = "aktywny"> </ li>
    <Li danych target = "# karuzeli Przykładem-generic" dane-slide-to = "1"> </ li>
    <Li danych target = "# karuzeli Przykładem-generic" dane-slide-to = "2"> </ li>
  </ Ol>

  <! - Owijarki do slajdów ->
  <Div class = "karuzeli wewnętrzna">
    <Div class = "element aktywny">
      <Img src = "computer.jpg" alt = "...">
      <Div class = "karuzeli caption">
        <H1> Duże stacjonarne są wszędzie </ h1>
        <P> <button class = "btn btn btn-sukces-LG"> Spróbuj 30 dniową wersję próbną teraz </ p>
      </ Div>
    </ Div>
    <Div class = "item">
      <Img src = "mobile.jpg" alt = "...">
      <Div class = "karuzeli caption">
        <H1> Telefony są wypierają komputery stacjonarne </ h1>
        <P> <button class = "btn btn btn-sukces-LG"> Spróbuj 30 dniową wersję próbną teraz </ p>
      </ Div>
    </ Div>
<Div class = "item">
      <Img src = "cloud1.jpg" alt = "...">
      <Div class = "karuzeli caption">
        <H1> Przedsiębiorstwa przyjmują Cloud computing szybki </ h1>
        <P> <button class = "btn btn btn-sukces-LG"> Spróbuj 30 dniową wersję próbną teraz </ p>
      </ Div>
    </ Div>
  </ Div>
  <- Kontrole ->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <Span class = "icon-prev"> </ span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <Span class = "icon-next"> </ span>
  </a>
</ Div>
</ Div>

Istnieją cztery sekcje w hulanka. Główny pojemnik za pomocą suwaka "karuzeli" div tag z definicji klas.

Następnie klasa "karuzeli Wskaźniki" z uporządkowanej listy. ol każdy element listy reprezentuje slajd. Po załadowaniu strony, ładowany przez domyślną pokaz slajdów z klasą "aktywny". Podczas renderowania, zobaczysz je w nagłówku małych okręgów.

Następnie każdy slajd (image) jest umieszczony z klasą "Pozycja" znacznika div. Każdy element jest zagnieżdżony z klasą "karuzela-podpisu" div. Karuzela-podpis zawiera obraz wyświetlany wraz z tagu tytułu. Paragraf zawiera h1 i przycisk, można również zawierać inne własne piętno.

Ostatnia część służy do sterowania slajd następny / poprzedni slajd. Jest to wykorzystanie "w lewo" i "karuzeli kontrolę" w definicji klasy, stosując następującą "prawo" i "kontrola" karuzeli definicję klasy.

"Icon-wstecz" i klasy "ikona-next" dla następnej i poprzedniej ikony.

Zrobiliśmy pewne dostosowanie zalega hulanka. Mamy nadzieję, podpisy, wskaźniki i następny / poprzedni ikony są renderowane na szczycie domyślnej lokalizacji kilku pikseli.

Aby to zrobić, należy dodać następujące style custom.css pliku

.carousel-wewnętrzna .Item .carousel-caption {
position: absolute;
top: 200px
}
.carousel Wskaźniki {
position: absolute;
top: 400px;
}
.navbar {
margin-bottom: 0;
}
.navbar-nav> li> a {
line-height: 50px;
font-size: 16px
}

Mamy również dostosować H1, dodać do niej dolnego marginesu z 30 pikseli.

h1 {
  margin-bottom: 30px
  }

reakcja image

Można zauważyć, że każdy obraz na slajdzie, użyliśmy klasy "img-reagujący". Jest to Bootstrap v3.0.0 nowe funkcje. Za pomocą znacznika img klasy img "reagujący", Bootstrap, tak że odpowiedź obrazu.

Tworzenie sieci

W kolejnych slajdach użyliśmy siatkę umieścić treść. Poprzez klasę "pojemnik" div zacząć siatkę. Należy pamiętać, że mamy zamiar opracować czułe internetową, zamiast poprzedniej wersji Bootstrap, gdzie pojemnik ma jedną klasę, domyślnie jest elastyczny.

div Pojemnik z kilku zagnieżdżonych klasy "wiersz" z div (pierwszy wiersz z trzech, druga linia ma sześć), aby utworzyć bootstrap linie siatki.

Każdy wiersz ma z klasą "kol-xy" z div, aby utworzyć kolumny. Wartość x może być: xs dla urządzeń mobilnych dla SM Tablet PC, MD dla komputerów przenośnych i mniejszym ekranie pulpitu dla lg duży ekran pulpitu. Jest to pierwsza metoda. Wartość Y może być dowolnym dodatnia, chociaż całkowita liczba kolumn w sieci nie może być większa niż 12. W naszym projekcie, dla uproszczenia użyliśmy LG, ale skoro mamy już zrobione, można dostać telefon lub tablet aby wyświetlić witrynę projektu dla porównania.

W poniższym tutorialu, będziemy mieli pełny tutorial na sieci energetycznej Bootstrap, w celu zbadania jego fascynujących odpowiedzi.

W tym przykładzie chcemy szerokość kolumny z trzech pierwszych rzędach są sobie równe, więc używamy dla wszystkich kolumn "kol-LG-4 '. W drugim rzędzie, chcemy sześć kolumn o jednakowej szerokości, więc używamy dla wszystkich kolumn "kol-LG-2".

Oto tag, który zawiera siatkę dwóch rzędach, pierwszy wiersz istnieją trzy, drugi wiersz ma sześć.

<Div class = "wiersz Barone">
<Div class = "kol-LG-2">
<P> <img src = "../ wp-content / uploads / 2013/10 / php.png"> </ p>
</ Div>
<Div class = "kol-LG-2">
<P> <img src = "../ wp-content / uploads / 2013/10 / mysql-logo.jpg"> </ p>
</ Div>
<Div class = "kol-LG-2">
<P> <img src = "../ wp-content / uploads / 2013/10 / logo.png javascript"> </ p>
</ Div>
<Div class = "kol-LG-2">
<P> <img src = "../ wp-content / uploads / 2013/10 / java.jpg"> </ p>
</ Div>
<Div class = "kol-LG-2">
<P> <img src = "../ wp-content / uploads / 2013/10 / postgresql.png"> </ p>
</ Div>
</ Div>

Mamy HR i stopkę z następującymi oznacza koniec siatki

<Hr>
<P> Copyright @ latach 2013-14 przez ToDo App. </ P>

Korzystanie Tabela

W price.html stronie naszego projektu, możemy skorzystać z formularza do renderowania cennika, oznaczony w następujący sposób

<Class Table = "stół-graniczy">
          <THEAD>
            <Tr>
              <th> Cechy </ th>
              <Th> indywidualne </ th>
              <Th> mały zespół </ th>
              <Th> Średnie zespołu </ th>
              <Th> Przedsiębiorstwo </ th>
            </ Tr>
          </ THEAD>
          <Tbody>
            <Tr>
              <Td> <h3> Liczba użytkowników </ h3> </ td>
              <Td> <span class = "znaczek"> Jeden </ span> </ td>
              <Td> <span class = "znaczek"> Pięć </ span> </ td>
              <Td> <span class = "znaczek"> Piętnaście </ span> </ td>
              <Td> <span class = "znaczek"> nieograniczony </ span> </ td>
           </ Tr>
            <Tr>
              <Td> <h3> Szkolenie Pro </ h3> </ td>
              <Td> <span class = "znaczek"> Nie </ span> </ td>
              <Td> <span class = "znaczek"> Tak </ span> </ td>
              <Td> <span class = "znaczek"> Tak </ span> </ td>
              <Td> <span class = "znaczek"> Tak </ span> </ td>
           </ Tr>
            <Tr>
              <Td> <h3> Pomoc </ h3> </ td>
              <Td> <span class = "znaczek"> Tak </ span> </ td>
              <Td> <span class = "znaczek"> Tak </ span> </ td>
              <Td> <span class = "znaczek"> Tak </ span> </ td>
              <Td> <span class = "znaczek"> Tak </ span> </ td>
           </ Tr>
	<Tr>
              <Td> <h3> W Wsparcie osób </ h3> </ td>
              <Td> <span class = "znaczek"> Nie </ span> </ td>
              <Td> <span class = "znaczek"> Nie </ span> </ td>
              <Td> <span class = "znaczek"> Tak </ span> </ td>
              <Td> <span class = "znaczek"> Tak </ span> </ td>
           </ Tr>
	   <Tr>
              <Td> <h3> tygodniowe seminaria </ h3> </ td>
              <Td> <span class = "znaczek"> Nie </ span> </ td>
              <Td> <span class = "znaczek"> Nie </ span> </ td>
              <Td> <span class = "znaczek"> Tak </ span> </ td>
              <Td> <span class = "znaczek"> Tak </ span> </ td>
           </ Tr>
	 <Tr>
              <Td> <h3> Cena </ h3> </ td>
              <Td> <button type = class "przycisk" = "btn btn btn-ostrzeżenie-lg"> $ 9 / miesiąc </ button> </ td>
              <Td> <button type = class "przycisk" = "btn btn btn-ostrzeżenie-lg"> $ 19 / miesiąc </ button> </ td>
              <Td> <button type = class "przycisk" = "btn btn btn-ostrzeżenie-lg"> $ 49 / miesiąc </ button> </ td>
              <Td> <button type = class "przycisk" = "btn btn btn-ostrzeżenie-lg"> $ 99 / miesiąc </ button> </ td>
           </ Tr>
	    <Tr>
              <Td> </ td>
              <Td> <type = class "przycisk" button = "btn btn btn-success-LG"> Kup teraz </ button> </ td>
              <Td> <button type = "button" class = "btn btn btn-sukces-LG" "> Kup teraz </ button> </ td>
              <Td> <button type = "button" class = "btn btn btn-sukces-LG" "> Kup teraz </ button> </ td>
              <Td> <button type = "button" class = "btn btn btn-sukces-LG" "> Kup teraz </ button> </ td>
           </ Tr>
          </ Tbody>
        </ Table>

Bootstrap użyciu oryginalnego pliku CSS "stół" i dwie klasy 'table-graniczy'. Ale musimy mieć następującą tabelę dodając jakiś niestandardowy plik CSS w customize.css wyglądać inaczej

th {
background-color: # 428bca;
color: # ec8007;
z-index: 10;
text-shadow: 1px 1px 1px #fff;
font-size: 24px;
}

Użyj odznakę

Używamy klasy "badge", aby wyświetlić tekst w tabeli. Mamy następujące niestandardowe CSS z klasy znaczek

.badge {
background-color: # 428bca;
kolor: #fff;
font-size: 22px;
}

Dla tej strony i contact.html stronie dodaliśmy kolejną regułę CSS w customize.css

.container> h1 {
text-align: center;
}

Pozwala h1 wyśrodkowany.

Korzystanie z formularzy

W contact.html pliku tworzymy trzy kolumny, pierwszą kolumnę, możemy osadzić formularz. Użyj domyślnego arkusza stylów.

<Form class = "form-poziomy" role = "forma">
  <Div class = "form-grupa">
    <Label for = "Wyślij" class = "kol-LG-2 kontrolno-label"> e-mail </ label>
    <Div class = "kol-LG-10">
      <Input type = klasa "e" = "form-control" id = "email" placeholder = "Wyślij">
    </ Div>
  </ Div>
  <Div class = "form-grupa">
    <Label for = "name" class = "kol-LG-2 kontrolno-label"> Nazwa </ label>
    <Div class = "kol-LG-10">
      <Input type = "text" class = "form-control" id = "name" placeholder = "Nazwa">
    </ Div>
  </ Div>
   <Div class = "form-grupa">
    <Label for = "kraju" class = "kol-LG-2 kontrolno-label"> Kraj </ label>
    <Div class = "kol-LG-10">
      <Wybierz>
      <Option> USA </ option>
      <Option> Indie </ option>
      <Option> Wielka Brytania </ option>
      <Option> Autralia </ option>
      </ Select>
    </ Div>
  </ Div>
<Div class = "form-grupa">
    <Etykieta class = "desc" = "kol-LG-2 kontrolno-label"> Wiadomość </ label>
    <Div class = "kol-LG-10">
      <Textarea rows = "5" cols = "50"> </ textarea>
    </ Div>
  </ Div>

  <Div class = "form-grupa">
    <Div class = "kol-lg-offset-2 kol-LG-10">
      <Button type = "submit" class = "btn btn-default"> Prześlij </ button>
    </ Div>
  </ Div>
</ Form>

"Form-poziome" klasa pozwala utrzymać formę do wyrównania w poziomie. Należy pamiętać, że w celu ułatwienia dostępu, należy dodać role = "formę". Jest to wersja 3.0.0 z nowymi funkcjami.

Aby zlokalizować każdy kontroli formularzy, Bootstrap 3.0.0 wykorzystuje nową klasę "form-grupy".

Na tej stronie, w drugiej kolumnie siatki, po prostu umieścić jakiś tekst.

Dodaj Google Maps

W contact.html stronie trzeciej kolumnie siatki, dodaliśmy Map Google (Google Maps). Aby to zrobić, należy użyć następujących tagów

<Div id = "map_canvas"> </ div>
  </ Div>

Następujące js dodany do nagłówka html wewnątrz nagłówka

Funkcja initialize () {
        var map_canvas = document.getElementById ( 'map_canvas');
        map_options var = {
          Centrum: nowy google.maps.LatLng (23.244066, 87.861276),
          Powiększenie: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map (map_canvas, map_options)
      }
      google.maps.event.addDomListener (okno "obciążenia", zainicjowane);

Wcześniej mówiłem js, należy dodać następujący tag skryptu

<Script src = "http://maps.googleapis.com/maps/api/js?sensor=false"> </ script>

W celu poprawnego renderowania mapę, należy dodać następujące style custom.css

#map_canvas {
        width: 400px;
        height: 400px;
}

Jest to, jak stworzyć prosty projekt oparty na Bootstrap V3.0.0. Ale mamy tylko dotknął powierzchni, później rozdziały wyjaśni w sposób bardziej szczegółowy.