1
00:00:00,410 --> 00:00:11,310
Wrócimy w tej lekcji i wykazać startowej systemu sieci i systemu siatka jest prawdopodobnie numer jeden powód, dla którego ludzie używają bootstrap form nap godzin.

2
00:00:11,310 --> 00:00:19,290
Przyciski są ładne stylistyczne zmiany możemy dokonać z bootstrap ale ładujący system sieci będzie działać jako szkielet całej naszej aplikacji.

3
00:00:19,440 --> 00:00:23,980
Jest to bardzo łatwy sposób na dodanie struktury i położyć się do naszego wniosku.

4
00:00:24,000 --> 00:00:27,480
Więc pozwól mi pokazać kilka przykładów tego, co można zrobić z sieci energetycznej.

5
00:00:27,480 --> 00:00:36,140
Mam kilka stron otwarte od Bootstrap ex-Beau pierwszy o to strona produktu za dzban wody i przewiń w dół.

6
00:00:36,240 --> 00:00:37,530
Zauważ, że leżała tutaj.

7
00:00:37,560 --> 00:00:50,310
Mamy trzech elementów obok siebie, a potem również zauważyć, jak tu zmienić rozmiar ich skalowanie w dół, a potem, kiedy uderzę wielkości tabletki są układane na wierzchu od siebie nawzajem.

8
00:00:51,090 --> 00:00:57,270
Więc to jest bootstrap system sieci w pracy, jak to jest tu, gdzie mamy kolejny podobny efekt.

9
00:00:57,270 --> 00:01:02,100
skalować je, a potem układane na tablecie i wielkości mobilnego.

10
00:01:02,880 --> 00:01:04,110
Oto kolejny przykład.

11
00:01:04,140 --> 00:01:10,440
Jest muzykiem islandzki i Olafur Arnolds a to przewinąć w dół na tej stronie.

12
00:01:10,560 --> 00:01:23,150
Mamy pewne treści, które wbudowane w system siatki tutaj widać podobny układ, ale nie tylko, że jest zbudowany z sieci energetycznej, jak również.

13
00:01:23,160 --> 00:01:25,210
To tu treść.

14
00:01:26,100 --> 00:01:28,350
Terminy tutaj te turystycznej.

15
00:01:28,350 --> 00:01:49,220
Zasadniczo za pomocą systemu sieci możemy powiedzieć, że chcemy pewne treści do objęcia 100 procent ekranie możemy również użyć go do powiedzieć, że chcemy każdemu z nich do podjęcia 25 procent szerokości ekranu, aż trafiliśmy mobilny boku lub rozmiar tablet dla każdego trwać 50 teraz i wtedy, gdy trafiliśmy mobile, każdy z nich zajmują 100 procent.

16
00:01:49,860 --> 00:01:50,850
To samo zrobić tutaj.

17
00:01:50,850 --> 00:01:56,660
To pozwala nam podzielić, że z ekranu na kawałki i wybrać ile sztuk chcemy.

18
00:01:56,790 --> 00:02:00,660
Każdy z naszych własnych elementów przenośniku i oto ostatni już widzieliśmy.

19
00:02:00,660 --> 00:02:05,670
To się nazywa kreatywna Tim pustyni przewijania tu podobna treść.

20
00:02:05,680 --> 00:02:09,530
Oto system sieci i również tutaj.

21
00:02:09,570 --> 00:02:11,430
Więc to wszystko jest zrobione z sieci energetycznej.

22
00:02:11,430 --> 00:02:15,590
Wszystko to tak naprawdę ważne bardzo ekscytujące rzeczy.

23
00:02:15,760 --> 00:02:20,640
Pomaga nam położyć rzeczy tak łatwo w porównaniu do tego, co musielibyśmy zrobić bez startowej.

24
00:02:20,670 --> 00:02:25,660
Więc będziemy używać systemu bootstraps siatki i prawie każdą aplikację wykonujemy za pomocą startowej.

25
00:02:25,890 --> 00:02:27,500
I pozwól mi pokazać jeden z nich.

26
00:02:27,540 --> 00:02:33,940
To jest nasz yo aplikacji obozu i zauważ, że mamy siatkę campingów w poprzek.

27
00:02:33,960 --> 00:02:40,050
I jak zmienić rozmiar ekranu zawiadomienie, że skalowanie ich, a następnie idziemy do dwóch poprzek, a następnie w dół do komórki.

28
00:02:40,050 --> 00:02:44,480
Idziemy do jednej całej i to jest naprawdę ładny i łatwy w obsłudze układ mobilny.

29
00:02:44,760 --> 00:02:47,840
Więc to jest tylko jedno miejsce, gdzie będziemy korzystać z sieci energetycznej.

30
00:02:47,850 --> 00:02:57,800
Teraz zacząć na piśmie niektóre kodu za pomocą systemu sieci tak pełny ekran to okno i wrócić, aby uzyskać bootstrapped DOTCOM w zakładce ocenione.

31
00:02:58,050 --> 00:03:00,850
Możesz kliknąć na sieci energetycznej.

32
00:03:00,850 --> 00:03:07,300
Jest sporo do sieci energetycznej, ale mam zamiar zacząć po prostu wskazując jeden numer tutaj 12.

33
00:03:07,470 --> 00:03:09,890
To jest bardzo ważne, w jaki sposób działa system siatki.

34
00:03:09,900 --> 00:03:21,150
Więc każdy pojemnik i bootstrap można podzielić na 12 różnych kolumn, a następnie za pomocą systemu sieci możemy wybrać, ile z tych 12 jednostek każdy element powinien wziąć górę.

35
00:03:21,150 --> 00:03:27,050
Więc w tym przypadku wygląda na to, że mają coś objęciem około 10 z 12 jednostek.

36
00:03:27,060 --> 00:03:40,320
A następnie tu dwa z 12 jednostek lub może wynosić dziewięć i 3, ale mają pewne proporcje, gdzie mają więcej z tych 12 po lewej stronie, a następnie niewielki ułamek z 12 na prawej stronie.

37
00:03:40,770 --> 00:03:46,510
Więc jeśli wrócimy do obozu tutaj to jest nasz pojemnik tutaj.

38
00:03:46,890 --> 00:03:51,670
I każdy z nich z 12 jednostek każdy trwa trzy jednostki.

39
00:03:51,810 --> 00:03:56,850
Tak więc kończy się z czterech równych kolumnach a potem kurczą go tutaj.

40
00:03:56,880 --> 00:04:00,040
Teraz każdy z nich trwać sześć jednostek z 12.

41
00:04:00,240 --> 00:04:02,840
Więc jeszcze raz, że liczba 12 bardzo ważne.

42
00:04:02,850 --> 00:04:03,660
Teraz idziemy w prawo.

43
00:04:03,660 --> 00:04:05,130
Nasz pierwszy siatki.

44
00:04:05,250 --> 00:04:14,640
Więc mam pliku wykonana siatka robi h Tm l jest pusty wyjątkiem siłach pliku przez SS i zacząć musimy zdefiniować pojemnik.

45
00:04:14,860 --> 00:04:18,180
W każdej chwili używamy siatki Boucek to musi być wewnątrz pojemnika.

46
00:04:18,210 --> 00:04:22,230
Więc klasy wynosi pojemnik.

47
00:04:22,290 --> 00:04:29,190
A pierwszą rzeczą, którą musisz zrobić, to znaleźć inny div z klasą równym rzędzie zamiast każdego wiersza.

48
00:04:29,220 --> 00:04:31,100
Mamy 12 jednostek do wyboru.

49
00:04:31,350 --> 00:04:40,730
Więc co mamy zamiar rozpocząć wykonując właśnie robi 50 50 rozłamu będziemy mieli 1 Div, które odbywają się 6 z 12 a potem jeszcze div, które odbywają się 6 z 12.

50
00:04:41,070 --> 00:04:42,050
Więc zróbmy to teraz.

51
00:04:42,120 --> 00:04:48,330
Dodamy div, a potem będę również dodać mój drugi podział, a teraz to tylko dwa urządzenia są puste.

52
00:04:48,330 --> 00:04:49,430
Nie idziesz do pracy.

53
00:04:49,650 --> 00:05:00,300
Ale co zrobię, to dodać klasę do pierwszego i będzie to wyglądać trochę dziwne kolumny Duża sześć i zrobimy to samo tutaj.

54
00:05:00,300 --> 00:05:03,520
Klasa równa kolumnę dużą sześć.

55
00:05:03,630 --> 00:05:05,200
Następnie dodamy jakąś treść tutaj.

56
00:05:05,210 --> 00:05:10,880
Oni po prostu powiedzieć, kolumna duża sześć.

57
00:05:10,950 --> 00:05:12,140
To samo tutaj.

58
00:05:12,210 --> 00:05:18,950
I jak ja, że ​​załóżmy zapisać i nie będzie faktycznie zobaczyć bardzo nie widzimy samej siatki.

59
00:05:19,020 --> 00:05:24,300
Więc, aby wyraźniej, że będę zdefiniować klasę tutaj zamiast znacznika stylu.

60
00:05:24,300 --> 00:05:26,670
Co zrobię to zdefiniować klasę.

61
00:05:26,730 --> 00:05:31,350
Ja po prostu nazwać to różowy i będę stosować tę klasę lub dwie div, dzięki czemu możemy je zobaczyć.

62
00:05:31,490 --> 00:05:32,820
Więc teraz są po prostu białe.

63
00:05:32,820 --> 00:05:33,660
Bez granic.

64
00:05:33,750 --> 00:05:34,840
Tylko trochę tekstu.

65
00:05:35,010 --> 00:05:36,050
Ale jeśli dodamy do tego w.

66
00:05:36,180 --> 00:05:37,010
Tak różowo.

67
00:05:37,140 --> 00:05:49,950
A potem chcemy tła być różowe i zrobimy fioletowy granicy jeden piksel stałe fioletowy i wtedy będziemy stosować różową klasy do tych dwóch DIV.

68
00:05:49,950 --> 00:05:52,660
Każdy z nich zajmuje sześć jednostek.

69
00:05:52,680 --> 00:05:54,570
Teraz wracamy i odświeżyć.

70
00:05:54,900 --> 00:05:55,580
No to jedziemy.

71
00:05:55,800 --> 00:05:59,640
Widać mamy dwie div, które zajmują dokładnie połowa pojemnika.

72
00:05:59,670 --> 00:06:01,930
Pojemnik zaczyna się tutaj i tutaj.

73
00:06:02,460 --> 00:06:04,530
I mamy podzielony na dwie części.

74
00:06:04,620 --> 00:06:10,110
Więc teraz możemy wrócić i poeksperymentować trochę więcej i spróbujmy dodając w trzeciej kolumnie.

75
00:06:10,410 --> 00:06:16,150
I tym razem uczyni środkowej kolumnie ośmiu jednostek, a następnie w lewo i prawo będą dwa.

76
00:06:16,170 --> 00:06:21,270
Tak kończy się, a ja tu zmienić te numery.

77
00:06:21,280 --> 00:06:22,200
No to jedziemy.

78
00:06:22,200 --> 00:06:30,900
Będziemy skończyć z ładnym skupione kolumny w środku, a następnie dwa mniejsze kolumny po lewej i prawej stronie, które moglibyśmy wykorzystać na pasku bocznym lub czegoś.

79
00:06:30,900 --> 00:06:34,860
Więc to jest bardzo podstawową koncepcję wszystkie bootstrap systemu sieciowego.

80
00:06:34,920 --> 00:06:42,210
Mamy 12 jednostek dzieje w jakimkolwiek pojemniku pracujemy wewnątrz i możemy wyznaczyć te 12 jednostek w jakikolwiek sposób, który chcemy.

81
00:06:42,240 --> 00:06:52,170
Tak więc mogliśmy zrobić 12 poszczególnych kolumn każdej jednej kolumny duży jeden i możemy to zrobić 12 razy tak jak ten.

82
00:06:52,290 --> 00:06:53,600
Upewnij się, że nie tracę rachubę.

83
00:06:54,090 --> 00:06:54,670
No to jedziemy.

84
00:06:54,690 --> 00:06:56,620
A potem będziemy pozbyć się tych dwóch na razie.

85
00:06:56,820 --> 00:07:01,630
A jeśli były świeże zobaczysz w jednym rzędzie mamy 12 równomiernie wielkości kolumny.

86
00:07:01,650 --> 00:07:07,570
Każdy z nich zajmuje jedną jednostkę, a następnie będę również pokazać, możemy dodać inne wiersze.

87
00:07:07,740 --> 00:07:14,390
Więc zróbmy to teraz div class równa wiersz i będzie po prostu zejść poniżej tego pierwszego rzędu, które mamy.

88
00:07:14,730 --> 00:07:18,870
Więc wewnątrz tej jednej zróbmy div.

89
00:07:19,020 --> 00:07:23,350
Klasa równa kolumny Dasch duże i zróbmy cztery.

90
00:07:23,370 --> 00:07:27,280
Będziemy więc podzielić ją do trzech jednostek równomiernie wielkości.

91
00:07:27,360 --> 00:07:36,260
Więc kolumna Arge na nią przejść tak po prostu.

92
00:07:36,420 --> 00:07:49,260
I chodźmy spojrzeć teraz i widać, że nie stosowała różową klasy, ale mamy trzy równomiernie wielkości kolumn, które spadają poniżej 12 równomiernie wielkości kolumn powstały.

93
00:07:49,470 --> 00:07:53,240
Więc możemy dodać w różowym klasy po prostu łatwiej zobaczyć, co się dzieje.

94
00:07:53,940 --> 00:07:54,800
I tam idziemy.

95
00:07:55,140 --> 00:07:57,350
Więc jest to tylko prosty przykład.

96
00:07:57,420 --> 00:08:01,470
Nie byłoby rzeczywiście mają te różowe pudełka najprawdopodobniej na naszej stronie.

97
00:08:01,710 --> 00:08:08,760
Ale jak widać mamy tutaj siatkę gdzie mamy wiersze, a każdy wiersz ma cztery kolumny wykraczających poprzek.

98
00:08:08,760 --> 00:08:15,830
Każdy z nich ma trzy jednostki szerokości lub tutaj na tej stronie twórczej Tim.

99
00:08:15,900 --> 00:08:19,830
Mamy trzy kolumny dzieje w każdej z nich jest cztery jednostki szerokości.

100
00:08:20,070 --> 00:08:20,900
To samo tutaj.

101
00:08:20,900 --> 00:08:23,860
Trzy kolumny dzieje w tutaj.

102
00:08:23,910 --> 00:08:24,960
Mamy cztery kolumny.

103
00:08:24,960 --> 00:08:26,840
Każdy z nich składa się z trzech jednostek szerokości.

104
00:08:27,390 --> 00:08:30,650
Więc to jest bardzo, bardzo podstaw sieci w następnym filmie.

105
00:08:30,660 --> 00:08:35,850
Porozmawiamy o tym, jak sprawić, że siatki elastyczne i mają różne układy w różnych rozmiarach.

106
00:08:35,850 --> 00:08:38,230
W tej chwili pracujemy z kolumną duży.

107
00:08:38,250 --> 00:08:52,290
Wytłumaczyłem z dużych środków i istnieją trzy inne rozmiary i zobaczymy tych, w następnym filmie, a także zobaczymy, jak możemy napisać zagnieżdżonych siatek, gdzie możemy dodać kolejny wiersz wewnątrz każdej z tych kolumn i rozłamu, że na kolejne 12 sztuk.