Rozplanuj projekt internetowy za pomocą Bootstrap 2.0

Głównym zadaniem przy tworzeniu strony internetowej jest rozplanowanie projektu, stworzenie struktury za pomocą xhtml i css, zdefiniowanie przestrzeni treści, aby pomóc nam w tym zadaniu są standardowe frameworki takie jak 960gs czy Bootstrap.
W tym przypadku zobaczę Bootstrap, który został opracowany i używany przez Twittera.
Bootstrap to framework zaprojektowany w celu uproszczenia procesu tworzenia projektów internetowych. W tym celu oferuje zestaw klas CSS i już zaprogramowanych plików Javascript, które umożliwiają tworzenie takich zadań jak:

• Projektowanie stron internetowych, które działa w obecnych przeglądarkach, bez konieczności wprowadzania wielu zmian.

• Projekt strony internetowej, który można poprawnie wyświetlać na różnych urządzeniach, w różnych skalach i rozdzielczościach.

• Lepsza integracja z najczęściej używanymi bibliotekami, takimi jak jQuery.

• Solidny projekt oparty o aktualne narzędzia i standardy takie jak CSS3 / HTML5

Przykład zaczniemy od pobrania frameworka http://getbootstrap.com/2.3.2/

Rozpakujemy plik i zobaczymy 2 katalogi z komponentami ładowania początkowego
Tworzymy plik index.html, który wyjaśnimy.
Tworzymy html z podstawowymi komponentami:

 Projektuj z Bootstrapem / * Tu będzie treść * / 

Bootstrap zanurza strukturę 980 pikseli w 12 kolumnach po 60 pikseli, aby umieścić treść. Bloki, które można utworzyć, mają od 1 do 12 przy użyciu klasy spanx, więc span1 będzie blokiem 60 pikseli. Przykład wszystkich bloków treści, które możemy mieć.

Stworzymy podstawową strukturę nagłówka strony, lewej kolumny, treści, stopki. Wszystkie klasy są już w ramach frameworków

// rama kontenera ogólnego// zdefiniuj początek rzędu bloków// 12-kolumnowy blok równy 980px dla nagłówka;// blok 2 kolumn równy 120px dla kolumny;// blok 10 kolumn równy 600px dla treści;// 12-kolumnowy blok równy 980px dla stopki;

POWIĘKSZAĆ

Komponenty do stworzenia menu
W części nagłówkowej możesz wstawić menu listy z klasami paska nawigacyjnego, aby utworzyć menu:

// 12-kolumnowy blok równy 980px dla nagłówka;

Temat 1
Temat 2
Motyw 3

Dzięki temu możemy zobaczyć nasze menu gotowe bez konieczności radzenia sobie z css.

POWIĘKSZAĆ

Następnie jeśli chcesz rozszerzyć bootstrap o tworzenie własnych reguł css tworzymy kolejny plik default.css i tam umieszczamy nasz kod w ten sposób, a następnie dodajemy naszą klasę w przykładowym kodzie:

Tworzymy treść w kolumnie treści

// blok 10 kolumn równy 600px dla treści;
Tworzymy treści za pomocą Bootstrap, aby wyjaśnić samouczek
// pusty akapit jest równoznaczny z pozostawieniem linii lub spacji Zobacz Bootstrap

Rezultatem odświeżenia naszego przykładu będzie:

POWIĘKSZAĆ

Przykład nie jest kompletną stroną internetową ani z rozsądną estetyką, ale jak widzimy przy niewielkim wysiłku możemy wykonać demo lub stworzyć szablony bez użycia więcej niż edytora tekstu i zaoszczędzić wiele pracy z całą ustandaryzowaną platformą.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt

Czy ten samouczek ci pomógł?

Jeśli nie

Pomóż ulepszyć ten samouczek!

Czy uważasz, że możesz poprawić lub ulepszyć ten samouczek? Możesz wysłać swoje wydanie ze zmianami, które uznasz za przydatne.
0 użytkowników edytowało ten samouczek. Edytuj i zostań uznanym ekspertem!
Edytuj ten samouczek

PODOBNE ĆWICZENIA

Poziomy pasek z efektem najechania w html5, css3 i bootstrapUzyskaj współrzędne klienta za pomocą Google Maps API w JavaScript (HMTL5, CSS3 i Bootstrap)Nauka tworzenia responsywnego pokazu slajdów za pomocą HTML5 + BootstrapRozwój zaawansowanego interfejsu internetowego Bootstrap FrameworkRozszerzający BootstrapNetbeans: Twórz projekty HTML5 za pomocą szablonów i wtyczekBootstrapowe interfejsy użytkownikaKorzystanie z komponentów Bootstrap

Brak komentarzy, bądź pierwszy!

Nie czekaj dłużej i wejdź do SolveticZostaw swój komentarz i skorzystaj z konta użytkownika Dołącz do nas!

• Utwórz kontoZarejestruj się ZA DARMO, aby mieć swoje konto SolveticZarejestruj konto
• ZidentyfikowaćMasz już konto? Podpisz tutajZidentyfikuj mnie na moim koncie