Tip:
Highlight text to annotate it
X
>> Neel Mehta: hello Vì vậy, để tất cả những người đang theo dõi ở đây,
hoặc xem trực tuyến, hoặc từ xa.
Tên tôi là Neel, đây là CS50.
Và hội thảo hôm nay là Responsive Thiết kế Web với Bootstrap.
Đó là một chủ đề đó là rất gần với trái tim của tôi.
Hy vọng rằng, nó sẽ được gần với trái tim của bạn
cũng vào cuối buổi hội thảo ngày hôm nay.
Vì vậy, Bootstrap.
Làm thế nào nhiều bạn đã thực hiện bất kỳ loại phát triển web trước?
Một số lượng tốt?
Một chút.
>> Vì vậy, Bootstrap là thế giới của hầu hết phổ biến, front-end khuôn khổ.
Nó được sử dụng tuỳ theo trường tôi đã chọn một vài websites-- ngẫu nhiên
Lyft, Newsweek, và Vogue.
Nó được sử dụng bởi một số trang web.
Đó là một khuôn khổ thiết kế web mà sẽ cho phép bạn làm cho trang web của bạn
cả hai đẹp và đáp ứng.
Và tôi sẽ đi qua các hai khái niệm ở đây.
Đẹp.
Vì vậy, bạn có trang web bình thường trên trái, được thực hiện bởi chỉ HTML.
Bạn đã học được HTML trong lớp và trong phần thời gian dài.
Bootstrap là một cách để làm cho trang web của bạn đẹp.
Bạn có thể mất những gì trên bên trái của màn hình của bạn
và biến nó thành những gì trên phía bên phải của màn hình của bạn với rất,
rất, rất ít mã.
>> Bạn nhận được các nút màu xanh đẹp, bạn nhận được các ưa thích, cạnh tròn trên màn hình,
bạn sẽ có được danh sách, bạn sẽ có được thẻ, và như vậy với rất ít mã.
Có thực sự không có CSS bạn phải viết bằng chính mình.
Vì vậy, Bootstrap cho phép bạn có những CSS pre-xây dựng
thành phần bạn có thể đặt bên trong trang web của bạn
để làm cho nó trông đẹp mà không rất nhiều công việc của riêng bạn.
Nó thực sự là một bootstrap, một điểm khởi đầu,
cho cuộc phiêu lưu phát triển web của bạn.
Và như vậy khi bạn chỉ mocking lên một trang web,
đó là một nơi rất tốt để bắt đầu.
Bạn có thể nhận được một trang web tìm kiếm tốt với rất, rất ít công việc.
Và quả thực, chúng ta sẽ để làm điều này bản thân
Trong quá trình như năm minutes-- trong vòng 10 phút.
Vì vậy, nó rất dễ dàng để làm cho một số trang web lớn.
Vì vậy, đó là phần đầu tiên.
>> Thứ hai part-- đáp ứng.
Mọi người, ngày nay, không chỉ truy cập web trên máy tính xách tay của họ.
Trên thực tế, tính đến năm 2014, nhiều người truy cập web thông qua các thiết bị di động,
như điện thoại, hay máy tính bảng, hoặc dịch vụ, hay như vậy về hơn các trang web.
Và các trang web có truyền thống thiết kế máy tính xách tay hoặc máy tính để bàn với
trong tâm trí.
Và do đó, các trang web thường không rất phù hợp với điện thoại của bạn.
Nếu bạn từng viếng thăm harvard.edu trên điện thoại của bạn,
đó là loại một khó chịu kinh nghiệm, phải không?
Đó là bởi vì nó không đáp ứng.
Chúng tôi đang cố gắng để làm cho các trang web có đáp ứng,
đáp ứng với các kích cỡ màn hình của người dân.
>> Vì vậy, nếu nó là một điện thoại, đó là sẽ đi vào điện thoại.
Nếu đó là một máy tính bảng, đó là sẽ đi trên máy tính bảng.
Nó điều chỉnh để phù hợp với màn hình đang được sử dụng.
Và như vậy Bootstrap cũng cung cấp một số rất, tiện ích rất hữu ích cho điều đó.
Và chúng ta sẽ thảo luận đó là tốt.
Vì vậy, một lần nữa, có hai bộ phận để Bootstrap-- đẹp và có trách nhiệm.
Chúng ta sẽ nói về những người.
Đầu tiên, xinh đẹp.
Và sau đó đáp ứng.
>> Vì vậy, tất cả các mã mà chúng tôi sẽ nói về today--
chúng ta sẽ có rất nhiều ví dụ, rất nhiều thách thức, và như vậy nó on--
tất cả cuộc sống trên trang web này ở đây.
Slide này là những gì chúng tôi đã gửi ra.
Vì vậy, nếu bạn đang ở đây, bạn có thể cảm thấy tự do không phải viết đó xuống.
Và nếu bạn đang xem từ xa, cảm thấy miễn phí để kéo này lên trên máy tính của bạn
cũng.
Bạn có lẽ sẽ cần nó trong quá trình hội thảo này.
>> Vì vậy, chúng ta sẽ sử dụng một trang web được gọi CodePen,
mà là một mã hóa hợp tác môi trường, trong buổi hội thảo này.
Và CodePen-- và tôi sẽ cho bạn thấy đây thực fast--
nó cho phép bạn viết HTML cộng tác.
Tôi có thể viết nó, tôi có thể gửi nó cho các bạn, các bạn có thể chỉnh sửa nó.
Thậm chí nếu bạn từ xa, bạn vẫn có thể truy cập nó theo cách đó.
Bạn có thể gõ HTML code tại hàng đầu và nó sẽ thấy tự động
được chuyển đổi thành các trang web ở phía dưới.
Vì vậy, đó là một cách để bạn để nhanh chóng thử ra mã
mà không cần phải làm bất cứ loại công cụ trên IDE của bạn, hoặc trang web của riêng bạn,
hoặc bất cứ điều gì.
>> Vì vậy, đi trước và kéo lên này trang web, nếu bạn từ xa
hoặc nếu bạn đang ở đây, đặc biệt là nếu bạn đang ở xa.
is.gd/cs50boostrap.
Không mũ, không có gạch dưới, không có gì.
Vì vậy, những người bạn là ai ở đây, chỉ cần cho tôi một ngón tay cái
lên khi bạn đã kéo lên rằng trang web.
Tốt?
>> Đung thê.
>> Neel Mehta: Vì vậy, chúng tôi sẽ nhận được cho rằng chỉ trong một giây.
Vì vậy, đầu tiên, chúng tôi đang đi để có được, làm thế nào Bạn làm cho trang web của bạn đẹp?
Chúng ta sẽ tìm hiểu làm thế nào để có nhàm chán, HTML cũ, giống như tôi đã giới thiệu trước đây,
và biến chúng thành các thành phần thực sự tốt đẹp,
như widget đẹp, đẹp, màu nút, và các nhãn hiệu, và các bảng,
và tất cả, bằng cách sử dụng Bootstrap.
Vì vậy, nếu chúng ta có thể tất cả đi qua để CodePen mà bạn chỉ cần kéo lên.
Nó sẽ giống một chút như thế này.
Liệu nó trông như thế này cho tất cả mọi người?
>> Đung thê.
>> Neel Mehta: Nếu bạn từ xa, nó nên nhìn như thế này là tốt.
Nếu không, tôi sẽ cho bạn thấy làm thế nào sớm bạn có thể nhận được nó trông như thế này
trong một phần tương lai của video.
Vì vậy, ở đây chúng ta đã viết một HTML rất cơ bản,
giống như các loại bạn đã được sử dụng trong lớp học.
Nó khá cơ bản.
Không kiểu cách.
Và chúng tôi có một số công cụ.
Chúng tôi đã thiết kế một rất, rất cơ bản bắt đầu lên
gọi Yalp! mà bạn có thể tìm nhà hàng trong khu vực,
và tìm đánh giá, và hướng về tất cả những người.
Đó là một khái niệm rất tốt.
Nó không bao giờ được thực hiện trước.
Đó là một cái tên rất độc đáo, quá.
>> Vì vậy, những gì chúng ta sẽ cố gắng làm là giúp các chủ sở hữu
của Yalp! làm cho trang web của mình trông thực sự, thực sự mát mẻ.
Vì vậy, để bắt đầu với, chủ sở hữu của Yalp! đã thực hiện một tìm kiếm chút
hộp, và một nút nhỏ, và sau đó có thể là một chút
Khu vực được đánh cho một nhà hàng đã chọn, và sau đó
một danh sách các nhà hàng khác đó là trong khu vực.
Vì vậy, chúng tôi chỉ có thể đi qua mã HTML thật nhanh.
Làm thế nào thoải mái là các bạn với HTML?
Chúng tôi đã thực hiện một chút phần và cũng có trong lớp.
Decent?
>> Vì vậy, chỉ là một bản tóm tắt, HTML là tất cả về việc có
thẻ hoặc các yếu tố đó cho các máy tính làm thế nào để đặt ra các trang web.
Vì vậy, h1 này here-- bắt đầu h1, Welcome để Yalp !, cuối h1-- cho máy tính,
vẽ một tiêu đề lớn, nó nói, Chào mừng bạn đến Yalp!
bên trong có.
Chúng tôi cũng có các hình thức.
Chúng tôi có thể đầu vào như thế này, đầu vào văn bản, mà sẽ làm cho hộp văn bản
bạn viết trong.
Bạn cũng có các nút.
Bạn nhận được một, nút bấm tốt đẹp.
Nó không làm bất cứ điều gì ngay bây giờ, nhưng bạn sẽ có một nút.
Bạn có thể có divs, hoặc ngăn, để phá vỡ lên trang của bạn thành các nhóm khác nhau.
>> Bạn có thể có các đoạn văn, bạn có các nút.
Nếu bạn có các đoạn văn, sau đó bạn có danh sách không có thứ tự, ul,
và danh sách bên trong đó, li.
Vì vậy, đây là những rất cơ bản khối xây dựng một trang web.
Và quả thực, khá nhiều tất cả các website mà bạn nhìn thấy
sẽ được xây dựng sử dụng các công cụ tương tự.
Tất nhiên, họ không nhất nhìn xấu đó vì chúng tôi
sẽ thêm gia vị cho nó lên một chút.
Vì vậy, hãy HTML này nhàm chán cũ và bắt đầu chuyển nó vào các trang web đẹp
rằng chúng ta chỉ thấy một vài phút trước đây.
>> Vì vậy, chúng ta hãy bắt đầu rất đơn giản.
Vì vậy, chúng ta có nút này ở đây.
Trong Bootstrap, như chúng ta đã thấy, chúng ta có thể có, xinh đẹp, nút màu xanh đẹp.
Và đó là thực hiện không phải bằng cách làm tùy chỉnh CSS.
Không có CSS tùy chỉnh tại đây.
Đó là thực hiện bằng cách thêm các lớp học đến các yếu tố HTML của bạn.
Nếu bạn đã thử các lớp, hoặc hrefs, hoặc neo, hoặc type = "text" cho inputs--
Các phần tử HTML có thể có các thuộc tính này.
Họ có thể có thêm thông tin mà bạn có thể cung cấp cho họ.
>> Và như vậy, trong trường hợp này, lớp học là các thuộc tính.
Vì vậy, bạn muốn viết, lớp nút = một cái gì đó bên trong các chuỗi.
Và thuộc tính mà sẽ nói với các máy tính, điều này không phải là bất kỳ, nút cũ.
Đó là một nút đó là trong lớp này của các nút.
Và như vậy Bootstrap, nếu bạn cung cấp cho nó một phong cách nhất định trên phần tử của bạn,
nó sẽ rút ra nó một cách nhất định.
Vì vậy, tôi viết "btn btn-chính.
btn là một từ viết tắt cho nút.
Bạn sẽ nhận thấy bây giờ mà nút xấu xí của tôi bật
thành, xinh đẹp, nút màu xanh đẹp.
Nó trông rất đẹp khi chúng ta nhấp vào nó.
>> Và vì vậy những gì xảy ra chúng ta có là btn lớp và lớp btn-chính
vào yếu tố của chúng tôi.
Và Bootstrap sẽ đi vào và nói, OK, tôi biết rằng có hai loại cổ phiếu này.
Bất kỳ yếu tố đó có hai các lớp học cần được rút ra như thế này.
Vì vậy, đó là cốt lõi của cách bạn đính kèm phong cách với các yếu tố trong Bootstrap.
Bạn chỉ cần đính kèm các lớp học để họ và nó sẽ cân nó ra như nó thấy phù hợp.
Vì vậy, đây là một ví dụ khác.
Ở đầu vào, chúng ta có thể thêm một class = "hình thức kiểm soát".
Và tôi sẽ ngay nơi bạn có thể tìm ra các lớp học những gì
có sẵn của mỗi loại nguyên tố.
Nhưng các lớp học mà chúng ta chỉ gia tăng có tốt đẹp, góc tròn,
nó có đẹp padding, nó có một tốt đẹp, màu xanh ánh sáng cho nó.
>> Chúng tôi cũng có thể đi vào mẫu này.
Và class = "form-inline", mà sẽ làm cho mẫu của chúng tôi, như bạn có thể tưởng tượng, nội tuyến.
Vì vậy, nó đang tìm kiếm nhiều hơn một chút giống như những gì chúng ta có trước đã.
Vì vậy, trước khi chúng ta đi vào để tạo kiểu cho phần còn lại của trang, bất kỳ câu hỏi về những gì chúng tôi
đã làm?
Chúng tôi chỉ cần đính kèm các lớp học đến các yếu tố khác nhau của chúng tôi.
Và tôi sẽ chỉ cho bạn sau này như thế nào bạn có thể tìm ra những lớp học có sẵn.
Chúng tôi đính kèm các lớp học có phong cách nhất định.
Và báo với trình duyệt làm thế nào để bố trí các trang sử dụng
Phong cách cung cấp Bootstrap của.
Bất kỳ câu hỏi từ khán giả?
>> Tốt cho đến nay?
Mát.
Rất nhiều thách thức với Bootstrap chỉ là
biết những gì các thành phần là có sẵn và cách bạn sử dụng chúng.
Và đó là tất cả học với kinh nghiệm và cũng
thông qua việc đọc các tài liệu hướng dẫn, mà chúng tôi sẽ nói về sớm.
Vì vậy, chúng tôi có div này.
Nó chỉ là một, điều cũ nhàm chán.
Chúng tôi muốn nhấn mạnh nó bằng cách nào đó.
Vì vậy, trong Bootstrap, có một rất nhiều thành phần có sẵn.
Và đây là getbootstrap.com.
Đó là một tài liệu tham khảo rất hữu ích.
Nó chứa những điều like-- đây là cách bạn làm một nút.
Và bạn có thể làm thanh nav, bạn có thể nhãn, bạn có thể tiến triển thanh,
bạn có thể làm danh sách nhóm.
Về cơ bản, đó là tất cả các loại các bạn có thể thấy một trang web.
>> Đây là một loại chúng ta sẽ thử ngay bây giờ.
Nó được gọi là bảng điều khiển.
Nếu bạn sử dụng Google Bây giờ, họ có thẻ.
Hoặc bất kỳ thiết bị Android có thẻ.
Họ có hộp nhỏ màu trắng rằng có những thứ bên trong của nó.
Và vì vậy chúng tôi sẽ cố gắng và làm mà mình ở đây sử dụng một điều
được gọi là một bảng điều khiển.
Vì vậy, nếu chúng tôi đính kèm class = "panel panel mặc định "để div bên ngoài của chúng tôi,
sau đó chúng tôi đính kèm một lớp div = - hãy chỉ cần kiểm tra các tài liệu này.
div class = "panel-đề" và sau đó div class = "tấm thân".
Một lần nữa, đừng lo lắng về ghi nhớ mã này.
Nó sẽ có sẵn trực tuyến.
>> Vì vậy, chúng tôi đã làm điều này và bây giờ chúng tôi nhàm chán, cũ div biến thành tốt đẹp, ít thẻ này.
Nó có mái đệm, nó có biên giới, nó đứng ra
từ phần còn lại của trang, mà là khá mát mẻ.
Vì vậy, chúng ta hãy đi vào và thay đổi Nhận này nút hướng nhìn đẹp.
Ai trong các khán giả muốn nói tôi biết những gì tôi có thể làm gì để các nút
để làm cho nó trông đẹp bằng cách sử dụng Bootstrap?
Vâng?
>> Đung Chúng ta có thể thêm vào một lớp.
Và chúng ta có thể làm class = "btn btn-chính".
Neel Mehta: Yes.
Có một loạt các khác màu sắc có sẵn cho buttons--
hoặc cho bất cứ điều gì, cho rằng vấn đề.
Chúng tôi có thể làm btn-nguy hiểm và làm cho nó màu đỏ.
Hiện chúng tôi đi.
Chúng tôi có thể làm btn-thành công để làm cho nó màu xanh lá cây.
Chúng tôi có thể làm btn-info-- có một bó những thứ có sẵn cho bạn.
Vì vậy, tôi có chút khó khăn với bạn bây giờ.
Vì vậy, có một điều nữa rằng tôi đã rời bỏ phong cách.
Nhà hàng này Top.
>> Và chúng tôi muốn sử dụng một điều gọi là một nhóm danh sách để tạo kiểu cho nó.
Vì vậy, thách thức của tôi với bạn là đi vào getbootstrap.com--
Tôi sẽ kéo nó lên đây.
getboostrap.com.
Tới getbootstrap.com, tìm phần mà họ đi qua danh sách nhóm.
Và bạn sẽ thấy ở đây một ví dụ và các lớp học ngay
mà bạn có thể sử dụng để làm cho bạn danh sách thành các nhóm danh sách tốt đẹp.
Những được làm ra ví dụ ví dụ mã, những gì
code bạn sử dụng, những gì HTML code bạn sử dụng, và những gì mà kết quả đầu ra.
>> Vì vậy, thách thức của tôi để you-- đi trên getbootstrap.com,
cho dù bạn đang ở đây hay ở nhà, và để cố gắng và thêm phong cách cho ul này
để làm cho nó trông đẹp.
Và sử dụng một phong cách nhóm danh sách.
Bạn muốn có một vài phút, và tìm kiếm tài liệu,
thử mình đây?
Bởi vì khi bạn đang thực hiện phát triển web, bạn sẽ nhận ra rất nhiều công việc của bạn
sẽ được đọc tài liệu này.
Vì vậy, tôi nghĩ rằng nó là tốt để làm quen với làm thế nào để đọc tài liệu,
làm thế nào để tìm ra những gì ở đâu, những gì mã ví dụ bạn có thể sử dụng,
những gì bạn có thể tận dụng.
>> Vì vậy, một lần nữa, getbootstrap.com, đi đến tab Components,
và sau đó di chuyển xuống tới List Group.
Và bạn sẽ thấy ví dụ của mã bạn có thể sử dụng để làm cho HTML của bạn phù hợp đó.
Vì vậy, phải mất một vài phút và thử và khám phá nó cho mình,
cho dù bạn đang ở đây hay ở nhà.
Nếu bạn đang ở nhà, tạm dừng các video, có lẽ, và thử nó ra cho mình.
Nếu bạn đang ở đây, nếu bạn đi đến của chúng tôi website-- nếu bạn làm mới trang,
bạn sẽ thấy điều này trên đó.
Mã này rất giống nhau chỉ là thêm style mới ngay tại đó.
Vì vậy, phải mất một vài phút.
Hãy cho tôi biết khi bạn đang cảm thấy tốt về nó hoặc khi bạn đang hoàn toàn bị mất.
Nghe hay đấy?
Mát.
Nhanh dành cho những người bạn ở nhà, trong khi chúng tôi đang chờ đợi,
nếu bạn đi vào các trang GitHub mà tôi đưa ra một vài slide trước,
về phía đầu của video, Tôi có một repo GitHub, kho lưu trữ,
để nói chuyện này.
Tất cả các ví dụ mã mà chúng tôi sẽ có nói về được lưu trữ ngay tại đây.
Vì vậy, nếu bạn đi để thách thức-1.html, điều này là tất cả các mã mà chúng tôi có ngay bây giờ
trên CodePen của chúng tôi.
Vì vậy, bạn chỉ có thể đi trước, và sao chép này, và dán nó vào CodePen của riêng bạn.
Và theo cách đó, bạn có thể theo kịp với những gì chúng tôi đang làm ở đây.
Vì vậy, có trang này mở cũng như chúng tôi đi qua phần còn lại của hội thảo.
Một lần nữa, bạn muốn nó trông giống như những gì bạn nhìn xuống ở dưới cùng của màn hình của bạn
chỗ đó.
Cảm thấy tốt?
Solid.
Chúng ta hãy chờ đợi cho tất cả mọi người khác để kết thúc với những gì họ đang làm.
>> Vâng?
>> Đung Giả sử rằng tôi muốn sử dụng Bootstrap tại home--
Neel Mehta: Yes.
Đung tôi thấy, trên các trang web, Getting Started trang.
Họ cung cấp cho tôi các tùy chọn Bootstrap, Mã nguồn, hoặc Sass.
Mà trong số này làm tôi muốn?
>> Neel Mehta: Yes.
Vì vậy, câu hỏi là, làm thế nào để bạn có được bắt đầu sử dụng Bootstrap của mình?
Nó chỉ xảy ra kỳ diệu làm việc ngay tại đây.
Vì vậy, nếu chúng ta có thời gian ở kết thúc hội thảo,
Tôi sẽ cho bạn thấy làm thế nào bạn có thể nhận được nó trên trang web của riêng bạn.
Giống như ở đây, tôi đã thực sự đưa vào một số thiết lập
sẽ có nó tự động nạp, nhưng tôi sẽ
chỉ cho bạn làm điều đó từ xước trên trang web của riêng bạn.
>> Đung Cảm ơn bạn.
>> Neel Mehta: Yes.
Câu hỏi hay.
Cảm thấy tốt?
Cảm thấy tốt?
Mát.
Vì vậy, ai muốn cho tôi biết làm thế nào họ làm điều này nhìn đẹp và Boostrappy?
Lớp học đầu tiên chúng ta thêm vào ul là gì?
Đung class = "danh sách nhóm".
Neel Mehta: Yes. danh sách nhóm.
Và sau đó những gì chúng ta gắn vào lis?
Một người nào khác?
Đung Và sau đó, sau khi rằng, class = "list-nhóm-item".
>> Neel Mehta: Yes.
>> Đung Và đó là cùng cho một kế tiếp.
>> Neel Mehta: li class = "list-nhóm-item".
Của bạn đó.
Chúng tôi có nhóm danh sách tốt đẹp của chúng tôi, giống như chúng tôi đã dự kiến.
Vì vậy, có bạn đi.
Trong 10 phút, chúng tôi đã thực hiện nhàm chán này, cũ Yalp! Trang
nhìn đẹp và chuyên nghiệp.
Và đó mới chỉ là khởi đầu.
Vì vậy, bây giờ mà bạn cảm thấy tốt về điều đó, chúng ta hãy
chỉ cần đi trước và nói về một thành phần vài chi tiết mà
có thể có ích khi bạn đi suốt cuộc phiêu lưu của bạn.
>> Tất nhiên, có một người rất nhiều ở đây.
Và bây giờ mà bạn đã học làm thế nào để làm danh sách nhóm,
bạn có khá nhiều có thể dạy mình làm thế nào để làm được điều này.
Nhưng, tất nhiên, hãy cố gắng và làm một vài chi tiết chính mình,
chỉ để bạn có được một cảm giác về làm thế nào bạn có thể sử dụng chúng.
Tôi chỉ đi cho ví dụ này ở đây.
Một lần nữa, các mã mà tôi chỉ cần dán ở đây là có sẵn ngay tại đây.
Vì vậy, cảm thấy tự do để kéo nó lên.
>> Vì vậy, chúng tôi đã đi qua một vài ví dụ này.
Vì vậy, chúng tôi có các nút, mà chúng tôi đã thấy cách làm.
Chúng tôi có thể làm cho các nút lớn hơn.
By nút class-- nó đi, btn btn-lg và btn-mặc định làm cho nó trắng.
Vì vậy, điều này làm cho nút chúng tôi lớn hơn hơn nó có thể khác được.
Nó có thể có ích, nếu bạn có nút hoặc một cái gì đó lớn trình.
Chúng tôi đã thấy các ví dụ nhóm danh sách, chúng ta đã thấy các ví dụ mẫu.
>> Một trong rất quan trọng là các biểu tượng.
Và biểu tượng là một cách để bạn có thêm những điều thú vị, giống như kiểm tra kiểm tra
nhãn hiệu, hoặc những mặt được, hoặc bạn bè biểu tượng, hoặc biểu tượng khởi động lại,
hoặc bất cứ điều gì để ứng dụng web của bạn.
Vì vậy, một lần nữa, nếu chúng ta vào đây, các thành phần, glyphicons,
là những biểu tượng có sẵn cho Bootstrap.
Có một đầy đủ danh sách tất cả những người ở đây.
Vì vậy, chỉ là một ví dụ, chúng ta hãy cố gắng và thêm một.
>> Vì vậy, như Facebook, chúng tôi cố gắng để để có một nút Add Friend.
Trước tiên hãy thêm một số phong cách.
lớp nút = "btn btn-thành công".
Và ở đó chúng tôi đi.
Hãy thêm một biểu tượng ở đây.
Biểu tượng gì, bạn có nghĩ rằng, có thể làm cho tinh thần để đặt ở đây?
Bạn đã có thể nhìn thấy trên một số trang web hoặc bất cứ điều gì,
nhưng một ví dụ về một biểu tượng là những gì mà có thể đi tốt bên trong nút này?
Hãy duyệt qua điểm này, nếu bạn cần bất kỳ nguồn cảm hứng.
Có rất nhiều hữu ích những cái có sẵn ở đây.
Vâng?
>> Đung Có lẽ một trong những người sử dụng glyphicon?
Neel Mehta: OK.
Cái này.
Đó là khá tốt.
Vâng.
Trên Facebook, tôi nghĩ rằng nó sẽ xem xét một chút như thế.
Vì vậy, đây là cách chúng tôi đi về bổ sung biểu tượng cho trang của chúng tôi.
Chúng tôi chỉ có một span-- một khoảng là một thùng chứa trung tính cho một cái gì đó.
Một div là một container cho một cái gì đó, một khoảng là container khác.
divs có ngắt dòng xung quanh họ, nhịp không.
Vì vậy, có những cách khác nhau có container chung chung.
Giống như nó không có ý nghĩa để đặt nó bên trong của một đoạn văn hoặc bất cứ điều gì.
Chúng ta phải đặt nó bên trong một cái gì đó mặc dù,
vì vậy chúng tôi chỉ cần đặt bên trong một khoảng.
Vì vậy span class = glyphicon glyphicon người sử dụng "khoảng gần.
Và bây giờ chúng tôi có icon bên trong các nút.
>> Vì vậy, nó không giống hoàn toàn không giống như những gì bạn có thể thấy trên facebook.com.
Và do đó, nó là tốt đẹp mà các thể thực sự được đặt bất cứ nơi nào bạn muốn.
Trong thanh tiêu đề của bạn, trong danh sách nhóm của bạn.
Bất cứ điều gì.
Nó không phải là bên trong của một nút.
Vì vậy, như một ví dụ, tôi có thể đặt cùng một lớp ở đây.
"glyphicon glyphicon người sử dụng".
Và nó xuất hiện chỉ như nhau.
Vì vậy, những icons-- bạn có thể sử dụng khoảng class = "glyphicon glyphicon-bất cứ điều gì".
Và điều đó sẽ cho phép bạn thêm biểu tượng bất cứ nơi nào bạn muốn.
Và biểu tượng là một điều rất quan trọng phần làm cho một cái nhìn trang web
chuyên nghiệp và thực hiện tốt.
Vì vậy, đừng lạm dụng nó, nhưng nó thường là một điều tốt để biết.
>> Panels, một lần nữa.
Tôi sẽ chỉ làm điều này một lần nữa như một recap bởi vì họ đang loại có liên quan.
Bạn sẽ nhận thấy rằng trong HTML biến bình thường của bạn
trang web vào một Bootstrap-afied trang web, bạn sẽ có
để thêm cấu trúc bổ sung cho các trang web.
Ví dụ, chúng ta có thêm DIV đây chỉ vì những
là cần thiết để thực hiện một bảng điều khiển.
Vì vậy, chỉ cần giữ cho rằng trong tâm trí mà bạn sẽ phải có cấu trúc phụ.
Vì vậy, "panel panel mặc định".
Có lẽ đó là bảng điều khiển-header.
Tôi nghĩ rằng nó là của panel-đề.
Vâng.
Hiện chúng tôi đi.
Vì vậy, một lần nữa, có bảng điều khiển của chúng tôi.
>> Một điều nữa mà chúng tôi không che chưa, bảng.
Bàn, theo mặc định xem loại xấu xí.
Như thế này.
Nhưng bàn là, tất nhiên, một phần rất quan trọng
của những gì bạn sẽ làm gì trong phát triển web.
Trong Pset7, ví dụ, CS50 Tài chính, mà sẽ đi ra ngay,
bạn sẽ sử dụng rất nhiều các bảng.
Và rất nhiều web dev sử dụng rất nhiều các bảng để hiển thị thông tin,
như chứng khoán, hoặc điểm, hoặc bất cứ điều gì.
>> Vì vậy, tạo kiểu bảng thực sự là rất dễ dàng.
Bạn thêm các lớp bảng để bàn của bạn.
Và, tôi dám nói, nó trông khá đẹp.
Bạn có thể làm thêm những điều, như "bảng bảng sọc".
Và bạn sẽ thấy kết quả ở đây.
Bạn có thể làm bàn giáp.
Có rất nhiều tùy chọn, bạn có thể.
Nhưng về cơ bản, thêm một bảng, lớp bảng,
sẽ làm cho bảng của bạn trông khá đẹp.
Vì vậy, đó là một tóm tắt ngắn gọn về một số các phong cách quan trọng hơn
và các thành phần bạn sẽ cần phải sử dụng cho Bootstrap.
Vì vậy, tôi nghĩ rằng kết thúc tốt đẹp lên phần đẹp của chúng tôi.
Bất kỳ câu hỏi ngay bây giờ khoảng cách để làm cho trang web của bạn đẹp?
Làm thế nào bạn có thể sử dụng các các thành phần để lợi thế của bạn?
Cảm thấy tốt?
Vâng?
Đung Có lẽ điều này là một câu hỏi ngớ ngẩn,
nhưng bạn có thể sử dụng Bootstrap trên Wikipedia?
Nếu bạn đang chỉnh sửa một trang Wikipedia?
Neel Mehta: Yes.
Vì vậy, câu hỏi là, tôi sửa chữa một trang Wikipedia,
Tôi có thể bao gồm phong cách Bootstrap trong đó?
>> Đung thê.
>> Neel Mehta: Và như vậy là Bootstrap cơ bản là một phong cách trang CSS lớn.
Một CSS chỉ nói, bất cứ khi nào Tôi có lớp này, đính kèm các phong cách.
Vì vậy, các CSS cho Bootstrap là có được một cái gì đó giống như .btn,
lớp nút, sẽ nhận được giống như một biên giới góc tròn hoặc bất cứ điều gì.
Vì vậy, về cơ bản, nó chỉ là một Bootstrap bó của lớp học và một loạt các phong cách
quy định cho những lớp học.
Vì vậy, miễn là bạn có CSS, danh sách các quy tắc trong trang của bạn,
bạn sẽ có được kiểu dáng Bootstrap.
Đó là, tất nhiên, đội ngũ trên có phong cách Bootstrap trong trang của bạn
để bắt đầu với.
>> Và như vậy trong Wikipedia, có thể bạn không thể
làm điều đó bởi vì Wikipedia không có Bootstrap trong đó.
Nhưng nếu nó đã có Bootstrap, bạn có thể có thể làm điều đó.
Và nếu bạn muốn, bạn có thể bao gồm nó, nhưng mà có thể
phá vỡ bố cục hiện tại của trang.
Nhưng câu hỏi rất tốt.
Bạn có thể sử dụng Bootstrap bất cứ nơi nào nó được bao gồm,
nhưng nó không được xây dựng theo mặc định.
>> Đung Cảm ơn bạn.
>> Neel Mehta: Yes.
Bất kỳ câu hỏi nhiều hơn?
Vâng.
Vì vậy, cho dù bạn đang ở đây hay ở nhà, chỉ cần nhớ getboostrap.com-- một lần nữa,
getboostrap.com-- là bạn của bạn.
Bất cứ khi nào bạn đang sử dụng Bootstrap, điều này sẽ cung cấp cho bạn
hướng dẫn về cách để có được bắt đầu, làm thế nào để sử dụng các thành phần.
Có một số JavaScript mát plug-in mà chúng tôi sẽ không đi qua đây,
nhưng họ đang có giá trị kiểm tra ra là tốt.
Vì vậy, đây là bạn của bạn.
Nó chỉ quan trọng để có được được sử dụng để làm thế nào để sử dụng này.
>> Vì vậy chúng ta hãy trò chuyện một chút về làm các trang web đáp ứng.
Vì vậy, như tôi đã nói trước đó, người sử dụng máy tính xách tay của họ, họ sử dụng điện thoại của họ.
Và như bạn cũng có thể tưởng tượng, đây là một màn hình kích thước rất khác nhau hơn.
Và do đó, các trang web tương tự mà có vẻ tốt trên điện thoại của tôi
sẽ không nhìn tốt, nhất thiết, trên một máy tính.
Vì vậy, những gì bạn phải làm là làm cho trang web của bạn thích ứng.
Nó có để thích ứng với sự khác nhau kích thước màn hình mà nó về.
>> Nó có thể nói, tôi biết tôi đang trên một máy tính, một máy tính xách tay lớn, tôi nên mở rộng.
Tôi biết tôi đang trên một điện thoại, tôi phải co lại.
Và như vậy Bootstrap cung cấp một số rất, cụ rất hữu ích để làm điều này.
Vì vậy, Bootstrap bạn hãy nghỉ một trang web thành 12 cột.
Bạn có thể làm cho các hàng và có 12 cột.
Và bạn có thể phân vùng những người tuy nhiên bạn muốn.
Bạn có thể có một, điều lớn, đó là 12 cột.
Bạn có thể có hai điều đó là mỗi sáu.
Bạn có thể làm một điều đó là bốn, một trong đó là hai hoặc một trong đó là sáu.
Bạn có thể làm ba, ba, ba, ba.
Bạn có thể làm bất cứ điều gì sự cố mà bạn muốn.
>> Vì vậy có lẽ trang web của bạn cần có một Cột bên trái đó là một phần ba chiều rộng.
Vì vậy, đó sẽ là bốn cột rộng và phần còn lại của trang
sẽ là tám cột.
Vì vậy, đây là một ví dụ.
Hãy kéo lên một ví dụ khác.
>> Đung Liệu nó luôn phải là một thậm chí chia?
Nó có thể là một bảy, năm phân chia?
>> Neel Mehta: Yes.
Nó có thể là bảy, năm.
Vâng.
Miễn là nó cho biết thêm đến 12, đó là tốt.
Vì vậy, chúng ta hãy quay trở lại đây.
Một lần nữa, các mã số đó là ở đây cũng có sẵn ở đây,
theo ví dụ đáp ứng.
Vì vậy, tôi chỉ kéo lên một số ví dụ mã đáp ứng ở đây.
Vì vậy, bạn làm điều này bằng cách sử dụng một điều được gọi là liên tiếp.
Hàng chỉ là một lớp.
Đó là một phong cách bạn thêm vào của bạn DIV để làm cho họ thành phần riêng của họ.
>> Vì vậy, bạn nói, div class = "hàng" để làm cho một hàng,
để cung cấp cho mình 12 cột của không gian.
Và sau đó bạn đặt các cột bên trong đó.
Vì vậy, ở đây chúng tôi col-xs-6.
Đừng lo lắng về xs.
Chúng tôi sẽ nói về trong một giây.
Nhưng về cơ bản, chúng ta có một điều đó là sáu rộng.
Chúng tôi gọi nó là trái.
Và đó là hộp trái ở đây.
Chúng tôi có một điều đó là sáu trong số 12 cột.
Và một trong đó là bên phải.
>> cũng chỉ cho phép làm cho div của bạn điền vào nó màu xám.
Vì vậy, đó chỉ là vì vậy chúng tôi có thể thấy rằng họ khác biệt.
Và do đó, đây là ví dụ đầu tiên.
Đó là một ví dụ rất đơn giản về cách sẽ sử dụng các hàng và các cột của bạn ở đây.
Bạn định nghĩa một dòng bằng class = "row".
Và sau đó bạn làm class = "col-xs-6" làm một nửa, "col-xs-6" để làm nửa kia.
Dưới đây là một ví dụ phức tạp hơn.
Chúng ta hãy nhìn vào Tiny, Rất lớn, còn lại một.
>> Chúng tôi có thể làm cho Tiny hai cột rộng, chúng ta có thể làm cho Huge sáu cột rộng,
và bốn cột còn lại rộng.
Biết thêm rằng đến 12.
Và như vậy chấm dứt những trùm lên chiều rộng của trang.
Một lần nữa, chúng tôi có một hàng bên ngoài.
Sau đó, chúng tôi có div class = "col-xs-2" và sau đó 6, và sau đó 4.
Và đó sẽ cung cấp cấu trúc đối với chúng tôi.
Và vì vậy chúng tôi có thể đặt bất cứ điều gì quái gì chúng tôi muốn bên trong ở đây.
Thay vì Tiny, chúng ta có thể đặt một nút.
lớp nút = "btn btn-chính".
Và do đó, chúng tôi nhận thấy rằng nút không mất tất cả chiều rộng,
nhưng ít nhất nó bị giới hạn để cho nhiều không gian.
>> Vì vậy, đó là tất cả tốt và tốt.
Vì vậy, bây giờ chúng tôi có thể phá vỡ lên web của chúng tôi Trang thành khối, chiều rộng khôn ngoan.
Chúng ta có thể nói rằng chúng ta muốn có một trái cột, và cột bên phải, và như vậy.
Nhưng chúng tôi đã không đi qua làm thế nào bạn làm cho nó đáp ứng.
Và như vậy Bootstrap chúng ta hãy làm điều đó là tốt.
Nó có những điều được gọi là các điểm ngắt.
Vì vậy, nó có một cách để biết liệu bạn đang ở trên một máy tính xách tay, bạn đang ở trên một máy tính bảng,
bạn đang ở trên một ngang điện thoại, hoặc bạn đang ở trên một chiếc điện thoại theo chiều dọc.
Nó biết kích thước màn hình.
Và phá vỡ này thành bốn categories-- lớn hoặc lg, đó là máy tính xách tay, thường.
md hoặc trung bình, đó là máy tính bảng.
sm, nhỏ.
Hoặc xs, thêm nhỏ.
Và như vậy khi bạn chỉ định một cột, bạn nói,
nó phải là sáu cột rộng trên một thiết bị nhỏ thêm.
Đó là lý do tại sao chúng tôi đã làm col-xs-6.
Chúng tôi đang nói rằng nó nên có sáu trong số 12 cột rộng
trên một thiết bị nhỏ thêm.
Và nếu nó là bất cứ điều gì lớn hơn, chúng tôi sẽ chỉ mặc định bằng cách sử dụng thêm kích thước nhỏ.
Nếu nó là bất cứ điều gì lớn hơn thêm nhỏ, nó sẽ là sáu rộng.
Và như vậy chúng ta có thể tận dụng này để làm cho các cột của chúng tôi
mất số tiền khác nhau của cột dựa vào kích thước màn hình.
Hãy đi đến thay đổi kích thước đáp ứng này.
Vì vậy, chúng tôi có các cột của chúng tôi.
Và nó nói, "col-lg-6 col-xs-12".
Vì vậy, cho những gì bạn biết cho đến nay, những gì làm bạn
nghĩ là có xảy ra trên một màn hình lớn?
Vâng, đó là loại nhường, nhưng những gì làm
bạn nghĩ rằng nó sẽ xem xét giống như trên một màn hình lớn?
Và tại sao vậy?
>> Đung Là nó mà trên một màn hình lớn, đó là
sẽ chỉ mất một phần của không gian đầy đủ?
Giống như một nửa của nó, tôi đoán?
>> Neel Mehta: Yes.
>> Đung Và trên nhỏ hơn màn hình, nó sẽ
để mất toàn bộ màn hình, 12.
Neel Mehta: Yes.
Bên phải.
Vì vậy, như một ví dụ, chúng ta hãy chỉ cần nhìn xuống đây.
Vâng.
Vì vậy, trên bất cứ điều gì đó là lg hay bigger-- để máy tính của tôi xảy ra
được lg vì nó khá wide-- nó sẽ làm cho
nó bên cạnh vì đó là col-lg-6.
Vì vậy, bởi vì đó là ngày lớn, nó làm cho nó sáu cột rộng và sáu cột.
Hãy xem những gì sẽ xảy ra nếu tôi thực hiện điều này vào một nhỏ hơn.
Tôi chỉ cần đi để un-full màn hình này.
Và tôi sẽ thu nhỏ màn hình.
Tôi sẽ thu nhỏ màn hình, vì vậy nó Dường như tôi đang trên một thiết bị nhỏ hơn.
Vì vậy, tôi sẽ thu nhỏ nó như thế này.
>> Và đây rồi.
Nó bây giờ được xếp chồng lên nhau bởi vì bây giờ chúng tôi đã đi
từ lớn đối với: điều này có lẽ thêm một kích thước màn hình nhỏ.
Và vì vậy bây giờ nó nói, OK, chúng tôi không trong lớn, chúng ta đang ở thêm đất nhỏ.
Vì vậy, chúng ta sẽ sử dụng các thêm kích thước nhỏ.
Và chúng ta sẽ xs-12, xs-12.
Vì vậy, nó sẽ được xếp chồng lên nhau.
Và chỉ cần thông báo rằng có một điều được gọi là một breakpoint.
Một breakpoint là nơi bạn đã thực hiện quá trình chuyển đổi
từ phụ nhỏ để nhỏ, nhỏ đến lớn, và như vậy.
>> Vì vậy, chỉ cần thông báo rằng khi tôi trượt này ra, cuối cùng, bạn sẽ nhận được điểm
nơi họ sẽ nhảy sang được bên cạnh nhau.
Của bạn đó.
Vì vậy, có những điểm dừng ngay tại đó.
Vì vậy, chúng ta có thể làm cho nó thậm chí còn phức tạp hơn.
Bây giờ chúng ta có thể nói, những những điều nên được bốn rộng.
Đó là, họ cần mất khoảng một phần ba
trong bài phát biểu trên các thiết bị rất lớn.
Trên một thiết bị trung bình, cần mất nửa màn hình bởi vì nó md-6.
Trên một thiết bị rất nhỏ, nó phải mất đến 12.
Và do đó, điều này có vẻ khá tự nhiên.
Hãy cố gắng này ra cho mình.
>> Vì vậy, trên một màn hình lớn, họ là bốn rộng.
Shrink nó một chút.
Và bây giờ sáu họ đang rộng.
Vì vậy, đây là sáu, sáu, sáu.
Shrink nó nhiều hơn và sau đó họ sẽ được xếp chồng lên nhau hoàn toàn.
Vì vậy, ví dụ, có ý nghĩa nếu bạn có thẻ, như thẻ tin tức,
Ví dụ, nếu nơi nó trên một màn hình rất lớn,
đó là OK nếu bạn có nhiều cạnh bởi vì họ sẽ có được tất cả đủ chỗ.
Nhưng họ cần phải có đủ chỗ.
Vì vậy, trên một màn hình nhỏ hơn, bạn muốn cung cấp cho họ
phòng nhiều hơn, tương ứng, của trang.
>> Vì vậy, như một ví dụ thế giới thực, hãy nói rằng chúng tôi có Twitter.
Và chúng tôi có hộp văn bản, do đó, bạn có thể tweet trên mặt.
Và chúng tôi có một danh sách các xu hướng chủ đề về phía bên phải.
Vì vậy, trên một màn hình lớn, chúng ta nên đã được chúng cạnh nhau,
vì vậy bạn có thể nhìn thấy chúng ở một ly.
Nhưng trên một màn hình nhỏ hơn, chúng ta nên làm 12 và 12,
do đó các chủ đề trending là bên dưới khu vực tweet.
Do diện tích tweet là Điều chính và trên một màn hình nhỏ,
các chủ đề trending không vấn đề là khá nhiều.
Và vì vậy chúng tôi đặt chúng ngay bên dưới, vì vậy mà cả hai đều có thể nhận được đủ không gian.
Có ý nghĩa cho đến nay?
>> Đung thê.
>> Neel Mehta: Solid.
Vì vậy, đó là tất cả các ví dụ tôi có ở đây.
Hãy thử và làm một thách thức.
Vì vậy, một lần nữa, đây là thách thức-2.html cho những người bạn sau cùng ở nhà.
Vì vậy, bạn thân của tôi, Mark Zuckerberg, đến với tôi ngày khác.
Và anh ấy như thế, Neel, tôi có nhận khá tốt ở thiết kế web.
Tôi có thể làm HTML.
Tôi đã thực hiện điều này ít, chỉnh sửa mới cho Facebook.
Tôi có một ý tưởng mới cho cách chúng ta nên tạo kiểu cho Facebook.
Và ở đây nó được.
Ngay tại đây.
Dưới đây là một số mã ví dụ.
Vì vậy, nó được gọi là Fancybook.
>> Chúng tôi có một số thông tin cập nhật trạng thái.
Chúng tôi có Nemo, Mike Kosowski, ***-- ba cập nhật trạng thái.
Và sau đó chúng tôi có một danh sách các bạn bè trực tuyến ngay bên dưới nó.
Vì vậy, ông ấy đã làm bài tập về nhà của mình.
Ông có biết chút chút về Bootstrap, ông đã thực hiện các danh sách,
ông đã làm một chút về HTML.
Vì vậy, ông có trang web.
Nhưng anh ấy như thế, Neel, tôi không hiểu thiết kế đáp ứng ở tất cả.
Bạn có bất cứ chuyên gia có thể giúp tôi với?
Và may mắn thay, bây giờ bạn đang các chuyên gia trong thiết kế đáp ứng.
>> Vì vậy, những gì anh nói với tôi là anh muốn Fancybook nhìn như thế này.
Trên một thiết bị rất nhỏ, giống như một chiếc điện thoại, tất cả mọi thứ
nên được xếp chồng lên nhau, như ở đây.
Vì vậy, bạn sẽ thấy thời gian trả trước, lên hàng đầu, và sau đó
bạn nên có thanh trò chuyện ở phía dưới.
Nhưng trên một máy tính bảng hay một phương tiện thiết bị, nó nên được một nửa và một nửa,
như trong thời gian này nên được nửa và danh sách bạn bè trò chuyện
nên được trên một nửa khác.
>> Sau đó, trên một máy tính xách tay, dòng thời gian phải mất đến ba phần tư
và sau đó trò chuyện đầu cơ nên mất nhau một phần tư.
Và do đó, ông là như thế, Neel, tôi có điều này mã ở đây, nhưng nó không đáp ứng.
Nó cần phải cư xử như thế này.
Vì vậy, thách thức của tôi cho bạn được cho mã này here--
nếu bạn làm mới của bạn CodePens, bạn sẽ thấy điều này.
Hoặc nếu bạn chỉ cần dán đoạn mã về thách thức-2, bạn sẽ thấy điều này.
>> Đây là đoạn mã ví dụ này.
Bạn sẽ thấy một số xxxs.
Tôi muốn bạn thay đổi xxxs, như vậy mà dòng thời gian và danh sách bạn bè
sau những thông số kỹ thuật tại đây.
Đừng lo lắng về những gì bên trong khung thời gian cho doanh nghiệp.
Chúng tôi sẽ nhận được rằng trong bước tiếp theo.
Nhưng hiện nay, chúng ta hãy xem liệu chúng ta có được những điều này để tách nó ra như thế này.
Vì vậy, không có ý nghĩa?
Vì vậy, nếu bạn đang ở nhà, tạm dừng các video và thử
để làm cho trang web của bạn tìm đáp ứng như thế này.
Nếu bạn đang ở đây, mất giống như hai, ba phút.
Hãy trò chuyện với một người hàng xóm, và cố gắng, và sửa chữa Ông Zuckerberg
đáp ứng vấn đề thiết kế.
Nếu bạn có câu hỏi nào, hãy cho chúng tôi biết.
Cảm thấy tốt?
Làm xong?
Tốt đẹp.
>> Đung [không nghe được].
Neel Mehta: Cái gì?
>> Đung tôi là tốt.
>> Neel Mehta: Oh, tốt.
Tốt đẹp.
Đung Những điều về 12, là nó Bootstrap mà
đối xử với một không gian màn hình đưa ra là 12 đơn vị trên và sau đó chia mà lên?
Làm thế nào chính xác thì các tỷ lệ của công việc này?
>> Neel Mehta: Yes.
Vậy câu hỏi là, làm thế nào hiện các cấp phối
làm việc cho Bootstrap, phải không?
>> Đung thê.
Neel Mehta: Vì vậy, bất cứ khi nào bạn có một lớp div = "hàng",
không có vấn đề làm thế nào lớn màn hình, Bootstrap sẽ cung cấp cho bạn 12 đơn vị
có cùng kích thước với đưa lên mà nhiều kích thước.
Vì vậy, trong col 1, nó luôn luôn là 8.33% kích thước của màn hình,
cho dù đó là rộng này hoặc đó là này rộng.
Và như vậy, tất nhiên, trên một nhỏ màn hình, mỗi cột là nhỏ hơn.
Bạn vẫn có 12 cột rộng, đó là một nhỏ hơn.
Vì vậy, nó thuộc vào bạn để chắc chắn rằng những thứ mất cột nhiều hơn,
tương ứng, để bù đắp cho thấy thiếu không gian.
Điều đó có ý nghĩa?
>> Đung thê.
Cảm ơn bạn.
Neel Mehta: Câu hỏi rất hay.
Đung Trên một lớn màn hình, bạn có thể có
timeline mất ba phần tư?
>> Neel Mehta: Yes.
Neel Mehta: Làm thế nào được chàng trai cảm thấy?
Tốt?
Mát.
Vì vậy, chúng ta hãy quay trở lại.
Và chúng ta hãy thử và sửa chữa phần này các trang web của ông Zuckerberg.
Vì vậy, các mốc thời gian là lên đây, tại đầu, và danh sách bạn bè
là ở phía dưới.
Và vì vậy chúng tôi chỉ cần gán cột, với kích thước theo tỷ lệ,
trong mỗi trong số này.
Vì vậy, *** đầu tiên này là dành cho timeline.
Những gì chúng tôi làm lớp học đặt tại đây?
Các cậu đã đặt gì ở đây?
Vì vậy, hãy nhớ rằng, trên một màn hình lớn, nó cần để mất đến ba phần tư chiều rộng.
Và vì vậy những gì phong cách sẽ cho bạn biết rằng?
Trên một màn hình lớn, ba phần tư chiều rộng.
Lớp về những gì chúng ta sử dụng không?
Đung Vì vậy, chúng tôi chỉ cần đi để được chỉnh sửa mà dụ đầu tiên của lớp.
Neel Mehta: Đối với các doanh nghiệp.
Vâng.
>> Đung Chúng tôi không chỉnh sửa từng, đặc điểm riêng biệt của dòng thời gian?
Neel Mehta: Không phải bây giờ, ít nhất.
Vì vậy, toàn bộ điều này là một khối.
Chúng tôi chỉ cần thay đổi thiết kế của khối.
Vì vậy, ở đây chúng tôi col-lg-9 vì nó chín trong số 12 rộng trên một màn hình lớn.
Và sau đó trên một màn hình trung bình, có bao nhiêu cột tôi sẽ nhận được?
Đung Đó là nghĩa vụ được một nửa và một nửa.
Neel Mehta: Đúng vậy.
Vì vậy, có bao nhiêu vậy?
>> Đung vậy, sáu.
Neel Mehta: Sáu.
Và sau đó thêm nhỏ nên be-- nếu nó chiếm toàn bộ chiều rộng của hàng,
có bao nhiêu nó nên được?
Đung 12.
Neel Mehta: 12.
Vâng.
Và bây giờ chúng tôi đã có để thay đổi này những người khác,
vì vậy nó chiếm phần còn lại của không gian.
Vì vậy, col-lg--
Đung Nó sẽ mất toàn bộ màn hình?
Neel Mehta: Nó chiếm một phần tư của màn hình trên một thiết bị lớn,
như chúng ta thấy ở đây.
>> Đung Ba.
>> Neel Mehta: Ba.
Và sau đó col-md-6 tiến hành lên phần còn lại của không gian.
col-xs-12.
Vì vậy, bây giờ chúng ta sẽ thấy thời gian chiếm ba phần tư
của trang trong các màn hình lớn và sau đó một phần tư trên mặt.
Và sau đó nếu kích thước màn hình xuống, nó phải thay đổi kích thước cho phù hợp.
Vì vậy, nó được xếp chồng lên nhau bây giờ, trên màn hình rất nhỏ.
Và nếu chúng ta kích thước nó lên một chút, họ nên được chính xác mỗi bên một nửa.
Vì vậy, chúng tôi đã làm điều đó cho đến nay.
Rất tuyệt.
Và vì vậy chúng tôi sẽ không làm việc một phần khác của sự thách thức.
Bạn có thể làm điều đó cho mình.
Nhưng về cơ bản, bạn phải cố gắng và làm cho các phản ứng
như well-- làm timeline mặt hàng, tự, phản ứng nhanh.
Vì vậy, bây giờ chúng tôi đã đi qua tất cả các bạn cần biết
về phía phản ứng của Bootstrap.
Bất kỳ câu hỏi về phản ứng thiết kế với Bootstrap
và làm thế nào bạn có thể đi về làm điều đó?
Vâng?
>> Đung là nó tương tự nếu chúng tôi đã có một video nhúng
và chúng tôi muốn kiểm soát quy mô mà tại đó các was-- Video
kích thước của video đi từ máy tính xách tay vào điện thoại.
Neel Mehta: Yes.
Nhiều hơn hoặc ít hơn.
Bạn sẽ phải nói với các video mất nhiều khoảng trống nhất nó cho,
đó là một chút khó chịu đôi khi.
Nhưng ý tưởng cốt lõi là như nhau.
Một video, giống như bất kỳ đối tượng khác trong trang, giống như một nút hoặc bất cứ điều gì,
miễn là bạn sử dụng cột và các hàng,
bạn có thể cung cấp cho nó một số tiền nhất định của không gian.
Và như vậy nhận được nó để tôn vinh được một câu hỏi khác nhau, vì như YouTube
nhúng có một số, kích thước ưa thích.
Nhưng về mặt lý thuyết tại Ít nhất, nó sẽ làm việc.
Mát?
>> Đung Tôi cho rằng sau đó, cho một hình ảnh, bạn có thực sự
cần phải có các phiên bản khác nhau của hình ảnh cùng kích cỡ khác nhau
cho máy tính xách tay so với iPhone?
Vâng Câu hỏi đặt ra là, chúng ta cần phải có hình ảnh nhạy càng tốt.
Và thực sự, bạn có thể làm điều đó.
Tôi nghĩ rằng đó là trong CSS.
Nhưng Bootstrap phép bạn làm điều đó là tốt.
Bạn có thể có những hình ảnh nhạy.
Bạn có thể phải thay đổi kích thước hình ảnh của bạn theo kích thước của trang.
Và có một điều rất mới HTML5, phiên bản mới nhất của HTML,
và CSS3, mới nhất phiên bản của CSS, mà
sẽ cho phép bạn yêu cầu hình ảnh khác nhau dựa vào kích cỡ màn hình mà bạn đang ở.
Thông thường, nó đủ tốt để chỉ có hình ảnh của bạn chỉ cần thu nhỏ hoặc tăng lên
Tuy nhiên lớn, nó cần phải được.
Nhưng bạn có thể, nếu bạn muốn để, có một 32 32
cho màn hình rất nhỏ, và 64 64 để một màn hình lớn,
và sau đó phục vụ những người có chọn lọc.
Bạn có thể làm được.
Nó được thực hiện bởi một số người.
Nó vẫn cắt cạnh khá.
Nhưng câu trả lời ngắn, images-- đáp ứng Bootstrap có thể tiết kiệm trong ngày đó.
Mát?
>> Đung Cảm ơn bạn.
>> Neel Mehta: Vì vậy, chúng ta hãy nói thật nhanh về cách
để có được điều này trong trang web của riêng bạn.
Hãy nói rằng bạn muốn làm cho bạn trang web riêng bằng cách sử dụng Bootstrap.
Và như vậy chúng ta hãy chỉ đi bộ qua lại với nhau.
Hãy nói rằng bạn thực hiện chỉ một trang HTML bình thường.
Hãy làm theo cùng trong bất cứ trình soạn thảo yêu thích của bạn là.
Vì vậy, chúng tôi chỉ có một số trang HTML.
Chúng tôi có thể làm! DOCTYPE html.
Đây cũng là html, trang của chúng tôi.
Không có gì mới.
Chúng tôi đã làm điều này trước đây.
Vì vậy, ở đây chúng tôi có HTML của chúng tôi và chúng ta có thể đặt công cụ bên trong ở đây.
Chúng tôi có thể có nút của chúng tôi.
Và như tôi đã nói trước, đây không nhất thiết phải đi làm việc.
Tại sao có thể làm việc này không?
Tại sao chúng ta không có được của chúng tôi tốt đẹp, nút đầy màu sắc?
>> Đung Bởi vì chúng tôi không liên kết nó để các dự án Bootstrap hoặc các tập tin?
Neel Mehta: Yes.
Chính xác.
Bởi vì Bootstrap-- nó chỉ là một file CSS ưa thích.
Đó là một loạt các phong cách đó được gắn liền với các yếu tố của bạn.
Ở đây chúng ta đã nói với nó rằng chúng tôi muốn sử dụng những phong cách.
Tôi sẽ kích thước đó lên một chút.
Chúng tôi đã nói với nó, chúng ta muốn sử dụng những phong cách, nhưng chúng tôi không bao giờ
nói với nó những gì phong cách là.
Và đó là những gì bạn câu hỏi từ trước đã.
Đó là câu trả lời cho điều đó.
Chúng tôi cần phải tìm một cách để có được phong cách và đưa vào trang của chúng tôi bằng cách nào đó.
Và ý chí để Bootstrap cho chúng ta thấy làm thế nào để làm điều đó.
>> Vì vậy, nếu bạn đi đến đỉnh ở đây, Bắt đầu.
Có nhiều cách khác nhau để tải về nó.
Điều này có thể không có ý nghĩa thiết.
Bootstrap-- này sẽ cho phép bạn lấy các file CSS riêng của mình.
Và bạn đưa nó vào trang riêng của bạn.
Source Code là nếu bạn muốn để hack vào nó một mình.
Bạn không cần điều này thực sự.
Sass là một ngôn ngữ mà biên dịch vào CSS.
Hãy nghĩ về nó như một tiền xử lý.
Giống như PHP là một Preprocessor HTML, Sass là một tiền xử lý cho CSS.
Vì vậy, nếu bạn muốn làm điều đó Bằng cách đó, bạn có thể làm điều đó.
>> Cách đơn giản nhất là sử dụng một CDN, hoặc mạng phân phối nội dung.
Đó là một trang web mà chỉ phục vụ một bản sao của Bootstrap
rất nhanh chóng cho bạn có trong trang của riêng bạn.
Vì vậy, đây là một ví dụ.
Nó sẽ cung cấp cho bạn yếu tố liên kết này.
Một yếu tố liên kết cho trình duyệt của bạn, mất bất cứ tập tin được lưu trữ ở đây
và cho nó vào trang web của chúng tôi.
Và trong trường hợp này, đó là CSS tập tin Bootstrap.
Vì vậy, chúng ta sẽ chỉ cần sao chép URL đó, hoặc văn bản đó, và chúng tôi sẽ ném nó bên trong
đầu của chúng tôi.
>> Và tôi sẽ không bắt đầu trang cho điều này, nhưng bạn có thể tin tưởng rằng công trình này.
Các liên kết này sẽ giúp bạn có được CSS.
Bao gồm nó trong bạn trang và sau đó bạn sẽ có
có thể sử dụng tất cả các Bootstrap lớp học mà bạn biết và tình yêu.
Nếu bạn muốn giữ nó tại địa phương và có nó trên hệ thống tập tin riêng của bạn
thay vì phải đi đến internet để lấy nó,
giống như nếu bạn muốn sử dụng các trang web offline,
bạn có thể sử dụng tùy chọn Download.
Nhưng đối với hầu hết các phần, bằng cách sử dụng CDN là khá nhanh vì như vậy,
nó giữ cập nhật cho bạn là tốt.
Bạn phải tự cập nhật nó, hoặc.
Có lý?
>> Vì vậy, rất nhiều công cụ sẽ phải xây dựng này tại theo mặc định. Trong Pset7 và Pset8 của bạn,
Tôi tin là Bootstrap tự động bao gồm.
Và trong CodePen, cho Ví dụ, nó đã
bao gồm bởi vì tôi thêm thêm thiết lập đó.
Vì vậy, nếu bạn đã bao giờ muốn chơi xung quanh với nó, bạn chỉ có thể đi trên CodePen,
hoặc đi vào ID của bạn, hoặc bất cứ.
Và bạn có thể có thể truy cập Bootstrap có,
nhưng nó không phải luôn luôn được xây dựng trong, theo mặc định, vào các trang web.
Có lý?
>> Vâng.
chỉ như một recap-- chúng tôi có như năm phút còn lại.
Tuy nhiên, như một bản tóm tắt, trong các trang web mới, bạn có thể bao gồm Bootstrap như thế này.
Và một khi bạn có nó bao gồm, bạn có thể làm tất cả các công cụ thú vị ở đây.
Bạn có thể đi về, và bạn chỉ có thể kiểm tra nội dung CSS, bạn có thể thêm một số phong cách mát mẻ,
bạn có thể có các thành phần như các nút,
và các bảng, và danh sách các mặt hàng mà chúng tôi đã đề cập.
Có một số plugin JavaScript mát, mà bạn có thể muốn khám phá.
Họ thêm một số mát mẻ tương tác với các trang web.
Như thế này làm cho một cuộc đối thoại đa phương thức.
>> Vì vậy, có một số công cụ thú vị bạn có thể làm với Bootstrap.
Vì vậy, lời khuyên của tôi dành cho bạn là đi trước và sử dụng nó trong các dự án của riêng bạn,
làm theo hướng dẫn chúng tôi chỉ cần làm như thế nào để có được nó,
và chỉ cần đọc các Bootstrap vì bạn sẽ tìm hiểu thêm về những gì để làm.
Và vì vậy chúng tôi đã đi qua, hôm nay, làm thế nào để sử dụng
các tài liệu, những gì các tòa nhà khối là, và làm thế nào nó là khái niệm.
Vì vậy, hiện nay thách thức của tôi với bạn là làm cho một trang web bằng cách sử dụng Bootstrap.
Đi vào các tài liệu.
Và sử dụng những công cụ mà chúng tôi đã học cho đến nay để thử và phân tích chúng
và hiểu chúng.
Và sử dụng những phong cách và công cụ bạn thấy có trong trang web của bạn.
Và nó chỉ là một lớn, quá trình thử nghiệm.
>> Hãy thử một phong cách nhất định.
Liệu nó có làm việc?
Liệu không?
Hãy thử đặt công cụ với nhau.
Xem những gì sẽ xảy ra.
Đó là rất nhiều một tự hướng dẫn, quá trình khám phá.
Nhưng hôm nay, chúng tôi đã học được rất cơ bản của Bootstrap là gì?
Tại sao nó làm việc?
Làm thế nào nó hoạt động?
Làm thế nào để chúng ta bắt đầu sử dụng nó, ở nơi đầu tiên?
Và vì vậy bây giờ mà bạn qua cái bướu đó, bạn
sẽ có thể làm điều đó khá suôn sẻ bằng chính mình.
>> Vì vậy, một lần nữa, tất cả các mã chúng tôi đã làm là ở đây.
Vì vậy, nếu bạn muốn để có được một bàn chải lên trên,
như thế, một cheat nhanh chóng là những gì tờ cho tất cả các phong cách?
Bạn có thể đi vào mẫu này ở đây.
Chúng tôi có một số phong cách ví dụ ở đây.
Nếu bạn muốn thử thách thức nữa của chính mình,
bạn có thể thử chúng ở đây và kiểm tra các giải pháp.
Vì vậy, liên kết này sẽ được bao gồm trên các trang trình bày, trong đó
sẽ được gửi ra cho bạn trong khóa học.
Nhưng nó cũng lên đây.
Bạn có thể tạm dừng các video, nếu bạn muốn.
Tất cả các thông tin mà bạn cần là sẽ phải ở đây, trên trang web này.
Vì vậy, nếu ai có bất kỳ câu hỏi, chúng ta có thể đưa họ trong vài phút tiếp theo.
Nếu không, cảm ơn tất cả các bạn rất nhiều để xem.