Ví dụ sử dụng Bootstrap. Cài đặt khung tiêu chuẩn. Hủy bỏ phao và quấn nhanh
Nửa sau của bài viết đã được nhìn nhận đơn giản hơn, có nhiều ví dụ hơn bằng ảnh chụp màn hình.
Bootstrap - nó là gì?Vì vậy, hãy bắt đầu với một câu hỏi quan trọng. Bootstrap là một khung CSS và JS, về cơ bản là một tập hợp các tệp có mã viết sẵn. Mục tiêu của các nhà phát triển của hầu hết mọi framework là đơn giản hóa việc phát triển trang web cho chính họ và những người khác sẽ có quyền truy cập vào công cụ này. Trong trường hợp của Bootstrap, nó hoàn toàn miễn phí nên bạn có thể sử dụng nó theo bất kỳ cách nào, chỉnh sửa nguồn và làm lại framework cho phù hợp với bản thân theo ý muốn. Nó hoàn hảo.
Cài đặt BootstrapNếu bạn chỉ cần kết nối các tệp khung với một tài liệu HTML (ví dụ: để thực hành), chỉ cần tải xuống khung từ trang web chính thức getbootstrap.com, sao chép các tệp của nó vào dự án và kết nối những tệp bạn cần. tôi sẽ làm nó Đánh giá ngắn những tập tin này:
Cái này bộ tiêu chuẩn khuôn khổ. Trên thực tế, bạn có thể dễ dàng tùy chỉnh và thay đổi nó cho phù hợp với mình. Ví dụ: hoàn toàn không sử dụng tập lệnh hoặc chỉ kết nối một lưới. Nói chung, chúng ta cũng sẽ nói về điều này.
Tài liệu Bootstrap của NgaKhi truy cập getbootstrap, bạn có thể nhận thấy rằng mọi thứ ở đây đều bằng tiếng Anh. Chúng tôi có thể sử dụng sự trợ giúp của Nga về khuôn khổ. Thật dễ dàng để tìm thấy. Để thực hiện việc này, hãy đi từ trang chính đến phần Bắt đầu. Kéo xuống cuối cùng sẽ có link dịch. Hãy tìm tiếng Nga ở đó và nhấp vào nó. Thế là xong, bây giờ bạn đang sử dụng phiên bản tiếng Nga của trang web. Đúng, không phải mọi thứ đều được dịch ở đây, nhưng khoảng 70-80% là chính xác, vì vậy bạn sẽ hiểu mọi thứ.
Lưới khởi độngDù người ta có thể nói gì, yếu tố chính của Bootstrap là lưới đáp ứng. Nói chung, nếu không có nó, khung sẽ mất gần như toàn bộ giá trị vì nhờ có lưới, bạn có thể nhanh chóng tạo các mẫu thích ứng. Đồng thời, bạn có thể không quen với các truy vấn phương tiện; bạn không cần chúng, vì khung này đảm nhiệm việc triển khai khả năng thích ứng, bạn chỉ cần gán các lớp chính xác cho các khối.
Những lớp học này là gì? Hãy đi đến tài liệu, nó sẽ giúp chúng ta rất nhiều. Đi tới phần CSS - Hệ thống lưới. Quy tắc chung Làm việc với lưới rất đơn giản, tôi sẽ liệt kê chúng ngay bây giờ.
Làm thế nào để làm việc với lưới?Hãy nghĩ về nó như một bảng html. Nếu bạn đã từng viết mã HTML cho bảng, bạn biết rằng tất cả nội dung được đặt trong thẻ bảng, một hàng được đặt trong thẻ tr và sau đó các ô được đặt trong đó - td .
Vì vậy, mọi thứ đều tương tự trong lưới. Lớp container đóng vai trò là nơi chứa chung cho lưới. Có 2 tùy chọn cho lưới bootstrap - hoàn toàn bằng cao su và vẫn có chiều rộng tối đa hữu hạn. Vì vậy, khi khối chung được cấp lớp container, trang web sẽ có chiều rộng tối đa là 1170 pixel. Nó sẽ không mở rộng thêm nữa. Đương nhiên, nội dung sẽ được căn giữa.
Nếu bạn đặt lớp chất lỏng chứa, thì lưới sẽ hoàn toàn bằng cao su, nghĩa là sẽ không có giới hạn về kích thước. Ví dụ: nếu một người mở trang web trên màn hình rộng 1920 pixel, anh ta sẽ nhìn thấy trang web đó ở chế độ toàn bộ chiều rộng.
Theo đó, điều đầu tiên khi phát triển một trang web là quyết định xem mẫu sẽ như thế nào - hoàn toàn bằng cao su, hoặc chiều rộng của nó vẫn cần phải hạn chế.
Tuyệt vời, khối container phải chứa một hàng lưới. Bạn cần đặt tất cả các khối trên một dòng trong đó. Nghĩa là, nếu chúng ta tận dụng tối đa mẫu điển hình: header, phần chính, cột bên phải và footer thì có 3 cột. Cái đầu tiên sẽ chỉ có tiêu đề, cái thứ hai sẽ có nội dung và thanh bên, cái cuối cùng sẽ có chân trang. Đánh dấu cho một trang web như vậy sẽ giống như thế này:
một chiếc mũ lưỡi trai
Nội dung... và thanh bên
Chân trang
Nhưng hiện tại đây là đánh dấu sai, vì nó thiếu... cái gì? Đúng vậy, tế bào! Trong trường hợp Bootstrap, chúng còn được gọi là cột. Lưới bootstrap bao gồm 12 cột. Nó có thể được nhúng vào bất kỳ khối nào có chiều rộng bất kỳ, ít nhất là 1200 pixel, ít nhất là 100. Tất cả điều này là do chiều rộng của các cột được chỉ định không phải bằng pixel mà bằng tỷ lệ phần trăm.
Hệ thống 12 cột này hoạt động như thế nào?Vì vậy, chúng tôi đi đến vấn đề quan trọng liên kết với khuôn khổ. Hãy tin tôi, nếu bạn hiểu điều này, mọi thứ khác đều vô nghĩa. Điều quan trọng là phải hiểu cách thức hoạt động của lưới và cách nhanh chóng bố cục thích ứng sẽ được mở cho bạn.
Để thực hiện việc này, hãy cuộn qua tài liệu ngay bên dưới, ở đó bạn sẽ tìm thấy một bảng chứa tính chất quan trọng lưới
Nhân tiện, bản thân các cột được đánh dấu trong Bootstrap bằng lớp col-, nhưng đây là lớp tổng hợp, vì vậy chúng không bao giờ chỉ viết col-. Bootstrap có 4 lớp đặc biệt được thiết kế để kiểm soát kích thước của các khối ở các độ rộng khác nhau, đó là:
Đây là 4 lớp, nhưng để kiểm soát kích thước của các phần tử, các số từ 1 đến 12 được sử dụng, bởi vì, như bạn nhớ, có chính xác 12 cột trong lưới.
một chiếc mũ lưỡi trai
Nội dung
Cột bên
Chân trang
Nó khá dễ hiểu. Trước hết, chúng ta tạo một tiêu đề; nó hoàn toàn không cần phải được đặt trong lưới, vì trong mọi trường hợp, nó sẽ chiếm 100% chiều rộng (thường). Nhưng dù sao chúng tôi cũng sẽ đặt nó vào. Lớp col-md-12 này là gì? Như tôi đã nói với bạn, không ai viết đơn giản là col-, với lớp này về cơ bản chúng tôi nói với trình duyệt:
Đây là một tế bào | cột
Trên các thiết bị trung bình (lớp md), chiều rộng của nó phải là 12 cột trên 12 cột, nghĩa là 100% chiều rộng hàng.
Nhưng còn chiều rộng trên các thiết bị khác thì sao? Trên màn hình lớn (lg), nó cũng sẽ là 100%, vì các giá trị dành cho màn hình lớn được kế thừa, nhưng đối với màn hình nhỏ hơn thì không. Thật đơn giản: nếu bạn viết col-xs-4 thì chiều rộng cột sẽ là 33% trên tất cả các thiết bị và nếu col-lg-4 thì chỉ trên những thiết bị lớn. Đây là tính năng, hãy nhớ nó.
Chà, nếu giá trị chiều rộng không được lưu trên màn hình nhỏ hơn thì chuyện gì sẽ xảy ra? Nó được thiết lập lại. Đây là cách nó xảy ra:
col-sm-4 - trên màn hình nhỏ, khối sẽ chiếm 33% chiều rộng, nó sẽ giống nhau trên màn hình md và lg, nhưng trên xs, tức là màn hình nhỏ nhất, chiều rộng sẽ được đặt lại về 100%. Vì vậy, hãy nhớ một quy tắc đơn giản hơn: Nếu không có gì được chỉ định cho màn hình nhỏ hơn, thì khối sẽ được hiển thị ở độ rộng 100% trên chúng.
Nội dung
Cột bên
Về cơ bản chúng tôi đang nói với trình duyệt:
Hãy để khối nội dung rộng 8 trên 12 cột và trường hợp này sẽ xảy ra trên màn hình nhỏ, vừa và lớn (chỉ cần chỉ định cho màn hình nhỏ, cho màn hình lớn, như bạn nhớ, giá trị được kế thừa là đủ). Nhưng trên màn hình nhỏ nhất, khối sẽ bị chiếm 100%. Điều này đúng, thường thiêt bị di độngà, các trang web đều nằm chính xác trong 1 cột.
Đặt cột bên bằng một phần ba chiều rộng của hàng trên cùng một màn hình nhỏ, vừa và lớn. Chà, trên những màn hình nhỏ nhất, như bạn đã hiểu, chiều rộng của nó cũng được đặt lại thành 100%. Nó đơn giản mà.
Chà, không có gì phải lo lắng về phần chân trang. Chà, chúng ta đã đề cập đến các nguyên tắc cơ bản về cách thức hoạt động của lưới, nhưng chúng ta vẫn cần xem nó hoạt động như thế nào...
Lưới lồng nhau BootstrapThực tế là bây giờ chúng tôi chỉ chia mẫu thành các khối chính, nhưng bên trong chúng cũng có thể được chia thành các cột. Ví dụ: nội dung có thể hiển thị sản phẩm ở nhiều cột. Tôi nên làm gì? Rất đơn giản - chúng tôi tạo ra chính xác cùng một lưới bên trong. Nó sẽ được lồng vào nhau nhưng cũng chứa 12 cột. Nếu chúng ta tóm tắt tất cả những điều này, thì chúng ta sẽ đi đến kết luận này:
Bên trong bất kỳ khối nào cũng có thể có số lượng không giới hạn lưới Ví dụ: trong khối có các sản phẩm có một lưới để phân tách các sản phẩm; trong khối có chính một sản phẩm, bạn có thể tạo một lưới khác, chẳng hạn như để phân tách giá, thông tin về tình trạng còn hàng và thông tin bổ sung. thông tin.
Bây giờ chúng ta sẽ cố gắng tạo một lưới khác bên trong khối nội dung để sắp xếp các sản phẩm thành 3 cột. Vì vậy, hãy lấy khối mà chúng ta có nội dung:
Nội dung
Và chúng tôi viết trong đó:
Mục lục:
tên sản phẩm
Mô tả Sản phẩm
Như bạn có thể thấy, chúng tôi đã tạo một lưới mới bên trong nội dung - chúng tôi đặt một hàng bên trong và trong hàng đó sẽ có 3 khối chứa các sản phẩm. Chỉ cần copy khối col-sm-4 kèm theo thẻ sản phẩm và dán thêm 2 lần nữa là bạn sẽ được như thế này (bạn có thể chụp ảnh sản phẩm bất kỳ, mình chụp lớn):
Tôi đã bỏ lỡ một điểm quan trọng khác: để hình ảnh thích ứng với các khối mà chúng được đặt, mỗi khối trong số chúng cần phải được cung cấp lớp phản hồi img. Nếu bạn, giống như tôi, nghĩ rằng làm điều này thật bất tiện, thì hãy viết theo style.css của riêng bạn như thế này:
Img( chiều rộng tối đa: 100%; chiều cao: tự động; hiển thị: khối; )
Thế là xong, hãy lưu mã này và kết nối tệp css của bạn với dự án. Bây giờ hình ảnh sẽ được thích ứng theo mặc định.
Chà, mọi chuyện diễn ra khá suôn sẻ phải không? Có, nhưng không có bootstrap bạn sẽ phải chịu đựng lâu hơn. Điều duy nhất là khi tạo lưới bên trong bất kỳ khối nào, bạn không cần phải tạo một khối có lớp container trong đó nữa. Tại sao điều này không cần thiết? Có, bởi vì khối trong đó lưới được tạo đóng vai trò là vùng chứa.
Do đó, bạn có thể tạo bao nhiêu cột tùy thích trong bất kỳ khối nào và tạo một mẫu có độ phức tạp bất kỳ. Và tất cả điều này nhanh hơn nhiều so với việc không có Bootstrap, vì bạn phải viết tất cả css từ đầu.
Tiện ích đáp ứngĐây là một tính năng tuyệt vời khác của bootstrap. Nó nằm ở chỗ bạn có thể ẩn hoặc hiển thị bất kỳ khối nào ở độ rộng bạn cần. Ví dụ: ẩn hoàn toàn cột bên trên màn hình hẹp, thêm một số thành phần mới trên thiết bị di động, thêm cột trên màn hình rộng vân vân.
Có rất nhiều tùy chọn ứng dụng, nhưng tôi chưa nói với bạn điều quan trọng nhất: làm thế nào để sử dụng những tiện ích này? Để làm điều này, chỉ cần thêm các lớp khối mong muốn. Nếu bạn cần ẩn nó, chỉ cần chỉ định lớp sau:
Chân trang
Lớp Hidden-xs sẽ làm gì trong trường hợp này? Nó sẽ ẩn chân trang trên các thiết bị cực nhỏ. Trên tất cả những thứ khác, khối sẽ hiển thị.
Ngược lại, nếu bạn chỉ cần hiển thị nó trên các màn hình nhỏ nhất, bạn cần sử dụng lớpvisible-xs-block. Trong trường hợp này, khối sẽ bị ẩn trên tất cả trừ màn hình hẹp nhất. Vì vậy, các lớp tiện ích thích ứng được viết như thế này:
Vâng, một vài ví dụ để làm rõ:
Đây là cách tất cả hoạt động. Chính xác là như vậy và không còn cách nào khác. Tôi hy vọng bạn hiểu điều này. Hãy đưa nó vào thực tế. Chúng tôi có một mẫu thử nghiệm, mặc dù nó rất nguyên thủy.
Nhiệm vụ: làm cho cột bên biến mất trên màn hình nhỏ và cả một sản phẩm trên màn hình nhỏ nhất. Và do đó, trên thiết bị xs, các sản phẩm đã có ở 2 cột chứ không phải 3.
Hãy thử tự làm, chỉ chỉnh sửa mã html. Những gì cần phải được thực hiện? Đầu tiên chúng ta nhìn vào cột, để ẩn nó trên màn hình sm, bạn chỉ cần thêm lớp Hidden-sm vào nó.
Tuyệt vời, bây giờ sản phẩm thứ ba cần thêm lớp Hidden-xs và nó sẽ biến mất trên các màn hình nhỏ nhất. Vâng, các loại của hai hàng hóa còn lại sẽ như sau:
Nghĩa là, trên các thiết bị trung bình, khối sẽ chiếm 4 trong số 12 cột, có thể dịch sang 33,33% chiều rộng và trên các thiết bị cực nhỏ - 50%. Và vì một khối có sản phẩm sẽ biến mất ở chiều rộng này nên cả hai khối có sản phẩm sẽ được sắp xếp gọn gàng thành 1 hàng, như sau: 
Tuyệt vời! Khi hiểu được điều này, bạn đã có thể thao tác các khối trên trang web theo hầu hết mọi cách bạn muốn. Hãy cố gắng đưa ra các nhiệm vụ cho bản thân và thực hiện chúng.
Tiếp theo mình sẽ show thêm 1 cái nữa rất chào mừng— khả năng di chuyển khối sang phải hoặc trái. Giả sử chúng ta không có 3 sản phẩm liên tiếp mà là 1. Và nó không chiếm toàn bộ chiều rộng. Và nhiệm vụ của bạn là căn chỉnh nó vào giữa. Điều này rất dễ thực hiện nếu bạn luôn nhớ rằng bạn đang làm việc với hệ thống 12 cột.
Hãy để lại một khối với sản phẩm:
Chỉ cần thực hiện các phép tính đơn giản là đủ để hiểu bạn cần di chuyển khối bao nhiêu để căn giữa nó. Nó cần được di chuyển 4 cột sang trái trên màn hình vừa và lớn và 3 cột trên màn hình nhỏ. Đây là những gì nó trông giống như:
Lớp col-md-offset-4 cho biết: trên màn hình vừa và lớn, di chuyển khối sang trái 33% chiều rộng vùng chứa gốc(1/3 thụt lề trái, 1/3 chiều rộng khối, ⅓ thụt lề phải, dẫn đến căn giữa).
Lớp col-xs-offset-6: Trên màn hình cực nhỏ và nhỏ, dịch chuyển sang trái 25% (¼ phần đệm bên trái, ½ chiều rộng khối, ¼ phần đệm bên phải).
Tôi hy vọng bạn hiểu ý chính và sử dụng các lớp này nếu cần thiết.
Các thành phần Bootstrap và ví dụ về việc sử dụng chúngTôi chúc mừng bạn. Chúng tôi vừa đề cập đến chủ đề quan trọng nhất liên quan đến khuôn khổ này. Lưới và cách làm việc với nó mới là điều quan trọng. Làm việc với các thành phần có nghĩa là bạn chỉ cần truy cập tài liệu, sao chép mã của thành phần mong muốn vào đó và nếu cần, hãy thay đổi mã đó cho phù hợp với nhu cầu của bạn. Nhưng tôi vẫn sẽ đưa ra dưới đây một số ví dụ về cách sử dụng các thành phần.
Hủy bỏ phao và quấn nhanhCác lớp pull-left và pull-right cho phép bạn nhanh chóng làm cho bất kỳ khối nào nổi lên bằng cách gửi nó sang trái hoặc phải. Đừng quên hủy bỏ dòng chảy. Bạn có thể sử dụng lớp Clearfix cho việc này.
Bootstrap: Menu đáp ứng theo chiều ngang (Di động)Chúng tôi sẽ thêm trực tiếp các thành phần sau vào mẫu, vì vậy nếu bạn muốn làm việc với mã chứ không chỉ đọc, hãy làm theo tất cả các bước sau tôi.
Trên thực tế, với Bootstrap, bạn có thể rất dễ dàng tạo ra không chỉ một menu thích ứng mà còn là một menu dành cho thiết bị di động, được thu gọn hoàn toàn trên màn hình nhỏ và ẩn dưới một nút bấm. Kỹ thuật này có thể được nhìn thấy trong nhiều mẫu thích ứng và nó thực sự rất dễ thực hiện. Mã menu di động mẫu có trong tài liệu, tôi sẽ lấy nó từ đó và làm lại một chút.
Vì vậy, điều đầu tiên tôi sẽ làm là loại bỏ khối có tiêu đề, vì trên thực tế, menu của chúng tôi sẽ là tiêu đề trong trường hợp mẫu của tôi. Mã menu phải được đặt trước tất cả nội dung trang web, thậm chí trước khối vùng chứa. Tại sao? Có, bây giờ bạn sẽ tự mình thấy rằng lưới đã được tích hợp vào thanh điều hướng. Vì vậy, đây là mã:
Nút công tắc điện
Logo/tên
Tìm kiếm
Đừng lo lắng vì có rất nhiều mã. Đây là giao diện của trang web bây giờ: 
Nhưng nếu menu của bạn không chiếm toàn bộ chiều rộng của màn hình, bạn nên căn giữa nó. Để thực hiện việc này, bạn nên tạo một khối bao bọc bổ sung cho menu, khối này sẽ được đặt sau khối có lớp chất lỏng chứa. Đừng quên đóng khối này. Tôi đã gán cho nó lớp navbar-wrap. Dưới đây là các phong cách cho nó:
Nghĩa là, bạn có thể chỉ cần giới hạn chiều rộng và căn giữa nó. Hoặc ban đầu thay thế container-fluid bằng container . 
Như bạn có thể thấy, chúng tôi đã thêm logo, hai mục đơn giản, một mục thả xuống và biểu mẫu tìm kiếm vào menu. Tức là có rất nhiều yếu tố. Bạn có thể dễ dàng tùy chỉnh menu cho mình bằng cách thêm các lớp của riêng bạn vào đó. Nhưng bây giờ mục tiêu của tôi chỉ đơn giản là cho bạn thấy thành phần này.
Đây là giao diện menu trên các thiết bị có chiều rộng màn hình dưới 768 pixel: 
Như bạn có thể thấy, menu đã bị sập. Nó mở ra khi bạn nhấp vào nút bên phải góc trên cùng. Chỉ còn lại logo trên màn hình.
Đồng thời, từ ví dụ trên, bạn có thể hiểu cách tạo một mục menu thả xuống trong Bootstrap, hãy trích xuất mã này để biết thêm; xem xét chi tiết:
Thiết bị tập thể dục
Vì vậy, vùng chứa mục thả xuống là một mục danh sách thông thường có lớp thả xuống. Bên trong nó là liên kết chính, nhấp vào đó sẽ mở ra menu thả xuống. Điều rất quan trọng là gán cho nó một thuộc tính dữ liệu mà bạn thấy trong mã; nếu không có nó thì sẽ không có gì hoạt động. Bạn cũng nên đảm bảo rằng tệp bootstrap.js được kết nối với các trang web.
Một khoảng với lớp dấu mũ không gì khác hơn là một mũi tên, nhờ đó bạn có thể hiểu rằng mục này là một mục thả xuống và bên dưới menu được hình thành bằng cách sử dụng tiêu chuẩn danh sách có dấu đầu dòng. Vậy là xong, mọi thứ khá đơn giản, bạn có thể sử dụng mã này để triển khai các mục thả xuống.
Thêm Breadcrumbs (Breadcrumbs) bằng BootstrapỞ nhiều cửa hàng, bạn có thể tìm thấy cái gọi là khối vụn bánh mì, trong đó có chứa đường dẫn đầy đủ đến trang hiện tại. Điều này cũng dễ thực hiện bằng cách sử dụng khung, xem mã:
Trên thực tế, chỉ cần chỉ định lớp breadcrumb cho một danh sách được đánh số và nhập các mục danh sách thông thường vào đó là đủ. Nhân tiện, tôi sẽ căn giữa các tiêu đề cấp hai trong mẫu (điều này cần được viết bằng css):
H2( căn chỉnh văn bản: giữa; )
Nếu bạn muốn thay đổi điều gì đó vẻ bề ngoài vụn bánh mì, chỉ cần sử dụng bộ chọn .breadcrumb trong CSS. Ví dụ: theo cách này bạn có thể loại bỏ màu nền:
Breadcrumb(nền: trong suốt;)
Đây là giao diện của trang web bây giờ: 
Theo mặc định, bảng sẽ trải dài trên toàn bộ cửa sổ, vì vậy hãy bọc nó trong một hộp có chiều rộng giới hạn để giới hạn kích thước. Theo mặc định, nó trông rất tệ, nhưng nếu bạn thêm lớp bảng vào thẻ bảng, mọi thứ sẽ đẹp hơn nhiều:
Để đánh dấu một màu khác khi bạn di chuột qua một hàng trong bảng, hãy sử dụng lớp di chuột qua bảng.
| Bower | $ bower cài đặt bootstrap |
| npm | $ npm cài đặt bootstrap@3 |
| nhà soạn nhạc | $ nhà soạn nhạc yêu cầu twbs/bootstrap |
Đối với các thử nghiệm với Bootstrap, tùy chọn đầu tiên với kết nối bên ngoài. Tuy nhiên, để triển khai vấn đề thực tế Theo tôi, trên các trang web thực, tốt hơn hết là giảm thiểu số lượng thư viện bên ngoài. Vì vậy, tốt hơn hết bạn nên tải xuống Bootstrap và kết nối cục bộ. Và điều này có thể được thực hiện theo hai cách.
Phương pháp đầu tiên là rõ ràng nhất. Đi đến trang tải xuống chính thức và nhấp vào nút "Tải xuống Bootstrap":
Bạn sẽ tải xuống một kho lưu trữ chứa ba thư mục (css, phông chữ và js) cùng với các tệp. Giải nén chúng vào một thư mục riêng và tạo index.html của riêng bạn trong đó để bạn có thể kết nối tất cả các kiểu, tập lệnh và phông chữ. Để làm cơ sở cho nội dung của tài liệu HTML, bạn có thể lấy đoạn mã trên bằng cách thay thế các liên kết đến các thành phần Bootstrap từ bên ngoài sang cục bộ:
Nhân tiện, các thư mục mặc định của Bootstrap chứa một số tệp bổ sung có thể bị xóa để tiết kiệm dung lượng. Ví dụ: trong thư mục css, bạn có thể xóa tất cả các tệp có phần mở rộng .map, cũng như các tệp kiểu và chủ đề chưa được tối ưu hóa (không có phần mở rộng .min) (chỉ còn lại hai tệp: bootstrap.min.css và bootstrap-theme. tối thiểu.css). Chúng tôi xóa mọi thứ khỏi thư mục js ngoại trừ tệp bootstrap.min.js. Chúng tôi không chạm vào phông chữ (nếu cần). Kết quả là bạn sẽ có cấu trúc tệp sau:
Phương pháp này tốt cho tất cả mọi người ngoại trừ việc giao hàng tiêu chuẩn Bootstrap có thể không bao gồm tất cả các plugin và chỉ sử dụng kiểu dáng tiêu chuẩn. Nếu bạn không chỉ tạo một trang thử nghiệm mà còn tạo một trang web thực sự thì có thể bạn sẽ cần phải thay đổi rất nhiều trong mẫu chuẩn sự đăng ký
Vì vậy, để sau này không phải tìm hiểu các tập tin, bạn có thể tùy chỉnh trước chủ đề Bootstrap cho phù hợp với yêu cầu của mình. Để làm được điều này, bạn sẽ cần có kiến thức về tiếng Anh và hiểu biết ít nhất về các nguyên tắc cơ bản về bố cục CSS. Để tạo tập hợp Bootstrap của riêng bạn, hãy truy cập một trang đặc biệt và điền vào nhiều trường trong biểu mẫu cho phép bạn đặt kiểu của riêng mình cho bất kỳ thành phần nào trên trang web tương lai của bạn:
Đây là một tác vụ khá chậm, nhưng nhanh hơn nhiều so với việc chỉnh sửa thủ công mã kiểu và tập lệnh tạo sẵn. Theo tôi, bạn nên dành thêm 20-40 phút để tiết kiệm cho mình vài giờ sau đó khi tìm kiếm các thông số cần thay đổi.
Khi tất cả các thay đổi đã được thực hiện, hãy nhấp vào nút "Biên dịch và tải xuống" ở dưới cùng và bản dựng Bootstrap tùy chỉnh của bạn sẽ được tải xuống dưới dạng kho lưu trữ. Nhân tiện, ngoài các thư mục đã quen thuộc với chúng ta, phiên bản này Kho lưu trữ cũng sẽ chứa tệp config.json. Nó chứa danh sách tất cả các biến mà chúng tôi chỉnh sửa trên trang cài đặt. Vì vậy, trong tương lai, bạn có thể tải xuống tệp này và tải xuống ngay Bootstrap đã cấu hình mà không cần phải nhập tất cả các tham số theo cách thủ công!
Cách làm việc với tài liệuVì vậy, hiện tại chúng tôi đã có một tài liệu HTML được tạo sẵn với Bootstrap được kết nối với nó. Nhưng chúng tôi vẫn chưa biết cách làm việc với Bootstrap này... Để tìm hiểu, bạn cần đọc tài liệu rất phong phú trên trang web chính thức hoặc phiên bản tiếng Nga của nó (có một bản dịch tiếng Nga hay khác).
Theo tôi, tốt hơn nên sử dụng tài liệu gốc vì nó mới hơn và không có bất kỳ sự mơ hồ nào, không giống như các bản dịch. Ngoài ra, cấu trúc của menu chính trên trang web chính thức hợp lý hơn - các phần chính của tài liệu nằm ở bên trái và nhiều cái bổ sung khác ở bên phải.
Các chủ đề trợ giúp chính cho Bootstrap là:
- Bắt đầu - chứa thông tin về cách kết nối Bootstrap với dự án của bạn và một số mẫu mà bạn có thể sử dụng để bắt đầu;
- CSS - mô tả tất cả các lớp CSS hiện có cho Bootstrap và đưa ra ví dụ về việc sử dụng chúng trong mã hoàn chỉnh;
- Các thành phần - phần nàyđưa ra khuyến nghị về nguyên tắc sử dụng các thành phần dành riêng cho Bootstrap;
- JavaScript - giới thiệu cho chúng ta các ví dụ về cách sử dụng tập lệnh Bootstrap và các plugin của nó.
Ngoài ra, còn có các phần với chủ đề làm sẵn, triển lãm các tác phẩm về Bootstrap, vị trí tuyển dụng, blog (và trong phiên bản tiếng Nga cũng có một diễn đàn chính thức), nhưng đây chỉ là những phần phụ. Để thành thạo Bootstrap, chúng ta sẽ cần tập trung chú ý vào những điều trên.
Tài liệu rất phong phú và ban đầu có thể rất dễ bị nhầm lẫn. Để ngăn điều này xảy ra, điều chính là phải hiểu cấu trúc và nguyên tắc mô tả vật liệu trong đó. Trên thực tế, không có hướng dẫn cổ điển nào ở đây - mọi thứ đều được trình bày trong ví dụ cụ thể. Hơn nữa, đối với mỗi ví dụ, có thể có một số tùy chọn mô tả sự khác biệt và điều kiện sử dụng.
Về mặt cấu trúc, phần mô tả diễn ra theo đúng thứ tự mà bố cục thường xuất hiện. Tức là lúc đầu họ mô tả thực thể chung, thì các phần tử được chỉ định từ trên xuống dưới. Ví dụ: trong phần CSS, mọi thứ bắt đầu bằng mô tả về loại tài liệu, thẻ META và kết thúc bằng các trường hợp đặc biệt về việc sử dụng bộ tiền xử lý Less và Sass.
Để đơn giản hóa việc tìm kiếm thực thể được yêu cầu, bạn có thể sử dụng thanh bênở thanh bên phải. Thật không may, việc tìm kiếm thông qua tài liệu không được cung cấp ở đây...
Một trong những điều quan trọng nhất cần tìm hiểu về Bootstrap là hiểu được lưới của nó. Lưới Bootstrap là một loại ô được tạo sẵn để bạn có thể lồng bất kỳ nội dung nào vào đó. Đồng thời, nội dung của các “ô” này được căn chỉnh theo cách chúng ta cần và khi kích thước màn hình thay đổi, nó sẽ điều chỉnh chính xác theo chiều rộng mới.
Chúng ta có thể tìm thấy thông tin về lưới trong chủ đề trợ giúp CSS - Hệ thống lưới:
Mọi thứ được mô tả ở đây khá chi tiết, tuy nhiên, ngắn gọn và rõ ràng hơn, lưới Bootstrap có thể được so sánh với nguyên tắc đã từng được sử dụng bố cục dạng bảng. Ở đây bạn cũng cần tạo một thùng chứa (tương tự như bảng -
| ).
Thuật toán chung làm việc với Lưới khởi động có thể rút gọn thành các bước sau: Tổng cộng, có 4 lớp cột cơ bản trong Bootstrap, có thể kết hợp với nhau để quản lý phản hồi tốt hơn trên các màn hình khác nhau:
Trong thực tế, lớp .col-md- thường được sử dụng nhiều nhất với con số chỉ 1/12 tổng chiều rộng màn hình. Ví dụ: để bố trí một cột trên toàn bộ màn hình, chúng ta sẽ sử dụng class.col-md-12. Đối với hai cột chiếm nửa màn hình - hai khối có class.col-md-6. Đối với ba cột tương ứng, ba cột c.col-md-4, v.v. Nhân tiện, không nhất thiết các cột phải có kích thước bằng nhau. Tất nhiên, hoàn toàn có thể kết hợp các chiều rộng (trong vòng 12 phần), ví dụ: .col-md-4 và .col-md-8 hoặc .col-md-2, .col-md-3 và .col- md-7. Bạn thậm chí không cần phải sử dụng toàn bộ chiều rộng bằng cách tạo, ví dụ: chỉ một cột trong một hàng, chẳng hạn như .col-md-5:
Các cột có thể được dịch chuyển theo chiều ngang so với lưới tọa độ ban đầu hoặc hiển thị không theo thứ tự. Ví dụ: để đặt hai cột .col-md-4 ở giữa trang, chúng ta có thể áp dụng offset bằng cách thêm một lớp khác .col-md-offset-2 ((12-(4+4))/2 vào khối cột đầu tiên của chúng tôi =2). Và để thay đổi thứ tự, hãy thêm các lớp .col-md-push- (để chuyển cột đến khoảng mong muốn) và .col-md-pull- (để kéo cột về đầu dòng):
Cuối cùng, các cột có thể được lồng vào các cột khác trong một hàng. Hơn nữa, điều này có thể được thực hiện theo hai cách: đầu tư vào một container mới và chỉ đầu tư vào dòng mới. Nếu bạn chèn một vùng chứa mới vào một cột có tập hợp các hàng và cột riêng thì tất cả các kiểu dành riêng cho vùng chứa sẽ được áp dụng cho cột đó. Khi chỉ thêm một dòng, kiểu sẽ được lưu như đối với một cột (sẽ không có thụt lề bổ sung, v.v.):
Như bạn có thể thấy, việc định vị các khối cột trong Bootstrap không khó lắm. Lưới là một phát minh rất tiện lợi có thể “giết chết” hai con chim bằng một hòn đá: nó làm cho bố cục của bạn chính xác hơn theo quan điểm của các nhà thiết kế và tự động thêm khả năng thích ứng cho trang web của bạn. Điều duy nhất cần nhớ là bạn không thể vi phạm cấu trúc lồng nhau, chẳng hạn như thêm trực tiếp một cột vào vùng chứa hoặc bên trong một cột khác mà không khai báo một hàng mới. Bạn có thể đọc thêm về cách làm việc với các kiểu trong Bootstrap trong phần tài liệu CSS. Và theo lưới, về cơ bản đó là tất cả. Tiếp tục nào. Thành phần khởi độngNgoài lưới, rất tính năng hữu ích Bootstrap là một tập hợp các thành phần tiêu chuẩn được sử dụng trong hầu hết các trang web hiện đại. Trên thực tế, chỉ sử dụng những thành phần này, bạn có thể nhanh chóng tạo một trang web hoàn chỉnh với thanh menu phản hồi, hoạt động " vụn bánh mì", nhiều biểu ngữ và thông báo khác nhau, các nút và menu thả xuống, phân trang và thậm chí cả phông chữ biểu tượng được tạo sẵn! Và điển hình là tất cả những điều tốt đẹp này được tạo ra, giống như mạng lưới, bằng phép cộng đơn giảnđến DIV yêu cầu của các lớp được yêu cầu! Đúng, ở một số nơi, bạn cũng cần quan sát cấu trúc lồng nhau của các khối (ví dụ: để tạo menu), nhưng tôi nghĩ điều này sẽ không đặc biệt khó khăn. Hơn nữa, có đủ ví dụ trên trang với mô tả về các thành phần. Ở đây chúng ta chỉ xét một số trường hợp đặc biệt. Làm việc với phông chữ biểu tượngBootstrap 3 có phông chữ biểu tượng tốt trong gói cơ sở - Glyphicons. Ý nghĩa của những phông chữ như vậy là thay vì các ký tự chữ cái, chúng chứa nhiều loại ký tự khác nhau. đồ họa vector. Không giống như hình ảnh raster thông thường, hình ảnh phông chữ biểu tượng được thu nhỏ hoàn hảo mà không làm giảm chất lượng, đó là lý do tại sao chúng trở nên phổ biến với việc phổ biến bố cục thích ứng. Vẫn chưa có phông chữ biểu tượng trong Bootstrap 4 mới (có lẽ nó sẽ được thay thế bằng FontAwesome phổ biến hơn), nhưng trong phiên bản thứ 3 của chúng tôi có một phông chữ và nó có thể được sử dụng. Yêu cầu chính cho việc sử dụng đó là chèn biểu tượng mong muốn bằng cách sử dụng phần tử HTML riêng dành riêng cho nó. Ví dụ: chúng ta cần chèn ký hiệu đồng rúp của Nga bên cạnh một số nhất định. Trong bảng có danh sách các biểu tượng của phông chữ Glyphicons bên dưới hình ảnh của nó, hãy sao chép tên của lớp (hoặc đúng hơn là hai cùng một lúc) “glyphicon glyphicon-ruble” và áp dụng nó vào thẻ mà chúng tôi chèn sau số của mình: Chi phí - 999 Tuy nhiên, thường không chỉ cần chèn biểu tượng này hay biểu tượng kia mà còn phải thay đổi, chẳng hạn như kích thước và màu sắc của nó. Để thực hiện điều này, trong Bootstrap, bạn không nên gán lại kiểu tiêu chuẩn cho lớp mong muốn bằng ký hiệu mà nên thêm một lớp bổ sung khác có tham số thiết kế cần thiết vào danh sách các lớp SPAN chèn nó hoặc thêm kiểu thông qua kiểu thuộc tính. Ví dụ như thế này: Myrub(cỡ chữ:10px; màu:xanh lá;) Chi phí - 999 Chi phí - 999
Như đã đề cập ở trên, Bootstrap có khá nhiều cách triển khai khác nhau cho tất cả các loại khối văn bản. Hầu hết tất cả chúng đều được triển khai bằng cách thêm lớp thích hợp vào DIV mong muốn, nhưng chúng có những khác biệt về mặt hình ảnh. Để so sánh, tôi khuyên bạn nên định dạng cùng một cụm từ với tiêu đề, văn bản và nút trong biểu mẫu nhiều loại khác nhau khối: Phần mở đầu Cái nút
Hầu hết tất cả các loại khối, có lẽ ngoại trừ jumbotron và các chú thích, không ảnh hưởng đến kiểu dáng của nội dung của khối đó theo bất kỳ cách nào. Chỉ có nền và khung thay đổi và vị trí của nội dung hơi thay đổi. Bên trong jumbotron (lớp - jumbotron), tất cả văn bản trông lớn hơn một chút so với kích thước tiêu chuẩn. Loại này khối đôi khi được gọi là biểu ngữ và thường được sử dụng làm màn hình trượt tiêu đề trong các trang đích (các trang một trang phổ biến). Nó cho phép bạn làm nổi bật thông tin chính, tập trung sự chú ý của người dùng vào thông tin đó chỉ bằng cách phóng to phông chữ một chút. Hiệu quả tốt nhất có thể đạt được bằng cách thêm lớp .text-center vào lớp jumbotron, lớp này sẽ căn chỉnh nội dung biểu ngữ vào giữa trang! Phần mở đầu Cái nút Nhân tiện, điểm đặc biệt của jumbotron là nó có thể được kéo dài để lấp đầy toàn bộ màn hình mà không cần đệm hoặc khung. Để làm được điều này bạn cần phải phá vỡ các quy tắc một chút Bố cục khởi động và di chuyển khối có class.jumbotron bên ngoài tất cả các dòng và vùng chứa. Thay vào đó, vùng chứa các hàng và ô sẽ cần được đặt bên trong biểu ngữ toàn màn hình thu được!
Phần mở đầu Cái nút
Chỉ tiếc là Bootstrap không có các lớp để căn chỉnh theo chiều dọc nội dung của cùng một jumbotron và tăng chiều cao của khối để lấp đầy toàn bộ màn hình. Khi đó sẽ không có giá nào cho nó :) Nhưng tất cả những điều này có thể được hoàn thành bằng chính đôi tay của bạn nếu cần thiết. Không hẳn là của riêng bạn thiết kế tiêu chuẩn cảnh báo và bảng điều khiển cũng được quan tâm. Ghi chú được thêm vào theo tiêu chuẩn bằng cách sử dụng lớp .alert tuy nhiên, để làm rõ loại thông báo, một trong bốn lớp có thể được thêm vào: Loại thông báo "Thành công" (nền xanh) Loại thông báo "Thông tin" (nền xanh) Loại thông báo "Cảnh báo" (nền màu vàng) Thông báo loại nguy hiểm (nền đỏ) Đối với các tấm, ở đây thậm chí còn đa dạng hơn! Theo mặc định, một bảng được thêm bằng lớp .panel, tuy nhiên, như đã lưu ý, nó yêu cầu một lớp sau nó để chỉ định loại bảng (thường là .panel-default ). Nhưng đó không phải là tất cả! Tối thiểu, bảng điều khiển của chúng ta phải có một khối lồng nhau với lớp .panel-body để chứa nội dung chính và tối đa nó có thể có tiêu đề riêng (tiêu đề .panel với lớp .panel-title tùy chọn bên trong ) và chân trang (.panel-footer ): Tiêu đề có class.panel-title đặc biệt Nội dung chính của bảng Chân trang bảng điều khiển
Ngoài ra, các bảng trong Bootstrap có thể không chuẩn và khác nhau về thiết kế trực quan tùy theo bối cảnh sử dụng của chúng. Các ngữ cảnh về cơ bản trùng khớp với các ngữ cảnh cảnh báo, nhưng chúng cũng có tùy chọn thứ năm với tông màu xanh sáng - .panel-primary. Ngoài ra, tương tự như các nhận xét, còn có các lớp .panel-success, .panel-info, .panel-warning và .panel-danger:
Cho đến nay chúng ta mới chỉ xem xét tương đối mẫu đơn giản Mã khởi động. Tuy nhiên, nó có các giải pháp làm sẵn để tạo các phần tử giao diện khá phức tạp. Chúng thường yêu cầu sử dụng các plugin JavaScript, có thể có được bằng cách xây dựng bản dựng Bootstrap của riêng bạn. Và bây giờ chúng ta sẽ xem xét một yếu tố khá phổ biến, thường được gọi là băng chuyền hoặc thanh trượt. Nó cho phép bạn lặp lại bên trong chính mình nội dung khác nhau dưới dạng hình ảnh có chú thích giải thích hoặc khối văn bản. Về vị trí trong mã Băng chuyền khởi động giống như một jumbotron - nó chiếm toàn bộ chiều rộng của vùng chứa mà nó được lồng vào hoặc trang nếu được sử dụng bên ngoài vùng chứa. Chúng ta hãy xem mã băng chuyền được sửa đổi và dịch một chút từ trang web chính thức: TRƯỢT 1 TRƯỢT 2 TRƯỢT 3 Mặt sau Phía trước Tôi nghĩ từ các nhận xét, bạn sẽ hiểu nó được công bố cái gì, ở đâu và như thế nào (sắc thái duy nhất là bạn cần thay đổi địa chỉ của các bức ảnh thành địa chỉ của chính bạn, vì địa chỉ của tôi trống). Nếu bạn sao chép đoạn mã trên, bạn sẽ nhận được băng chuyền đẹp mắt này, sau đó bạn có thể tùy chỉnh theo giao diện mong muốn với các lớp thiết kế bổ sung:
Bạn có thể kiểm soát hành vi của băng chuyền bằng jQuery (nếu bạn quen với cú pháp của nó) hoặc thông qua các thuộc tính dữ liệu được áp dụng cho khối nơi băng chuyền của chúng tôi được bắt đầu. Trong ví dụ trên, chúng ta có một thuộc tính đặt tốc độ thay đổi slide thành 5000 mili giây (5 giây) - data-interval. Ngoài ra, bạn có thể thay đổi các tùy chọn khác:
Một nhiệm vụ chung trong quá trình phát triển cũng là tạo ra các cửa sổ phương thức. Trong thực thi web, đây là những khối được hiển thị phía trên nội dung chính của trang với nền tối. Bootstrap cho phép bạn tạo các cửa sổ giả như vậy khá nhanh chóng và dễ dàng. Đây là một ví dụ về một cửa sổ phương thức đơn giản, đầy đủ chức năng: Hiển thị cửa sổ × Tiêu đề cửa sổ phương thức Một số tiếp theo :) Đóng Cứu
Để gọi một cửa sổ phương thức, bạn cần một nút, liên kết hoặc phần tử có thể nhấp khác, phải có hai thuộc tính dữ liệu bắt buộc: data-toggle với giá trị "modal" (biểu thị hành vi của nút gọi phương thức) và data-target , giá trị của nó phải là mã định danh của khối chứa đánh dấu cửa sổ phương thức (đối với các liên kết, bạn có thể sử dụng href tiêu chuẩn trong vai trò này). Bản thân khối cửa sổ phương thức phải có:
Nhìn chung, cấu trúc khá logic và đơn giản. Điều chính là tuân thủ nó và không quên các thuộc tính cần thiết. kết luậnThật không may, trong một bài viết, không thể đề cập đến tất cả các khía cạnh khi làm việc với Bootstrap. Framework này không ngừng phát triển và cải tiến, ngày càng có được nhiều khả năng mới. Đó là lý do tại sao trong những năm gần đây nó đã trở thành một trong những công cụ phổ biến nhất trong việc xây dựng trang web. Khi viết bài này, trước hết, tôi muốn trình bày các nguyên tắc cơ bản khi làm việc với Bootstrap và giải thích các thực thể được sử dụng phổ biến nhất trong đó bằng ngôn ngữ dễ hiểu hơn. Tuy nhiên, nếu bạn không hiểu điều gì đó, tôi khuyên bạn nên thử sử dụng một trong các trình soạn thảo trực quan Bootstrap. Họ sẽ chứng minh rõ ràng cho bạn tất cả các yếu tố có thể có và cho phép bạn nhanh chóng có được bộ lắp ráp tùy chỉnh của riêng mình. Tất nhiên, Bootstrap không có mọi thứ mà một nhà phát triển web cần trong công việc hàng ngày. Tuy nhiên, khung có thể được tùy chỉnh và sửa đổi để phù hợp với nhu cầu của bạn, cũng như được bổ sung các plugin của bên thứ ba, thường được tích hợp vào dự án mà không gặp vấn đề gì. Vì vậy, chúc bạn phát triển Bootstrap thành công để tiết kiệm thời gian quý báu của mình! tái bút Được phép tự do sao chép và trích dẫn bài viết này, với điều kiện là có liên kết hoạt động mở tới nguồn được chỉ định và quyền tác giả của Ruslan Tertyshny được giữ nguyên. Trước khi tải xuống, hãy đảm bảo bạn có trình soạn thảo mã (chúng tôi khuyên dùng Sublime Text 3) và một số kiến thức về HTML và CSS. Ở đây chúng ta sẽ không chạm vào tập tin nguồn, nhưng bạn luôn có thể tải xuống và tự nghiên cứu chúng. Chúng ta sẽ tập trung chú ý vào việc bắt đầu với các tệp Bootstrap đã biên dịch. Đang tải các tập tin đã biên dịchHầu hết đường tắt Bắt đầu: Nhận các phiên bản được biên dịch và rút gọn của CSS, JS và hình ảnh của chúng tôi. Không có tài liệu hoặc tập tin nguồn. 2. Cấu trúc tập tinTrong các tệp đã tải xuống, bạn sẽ tìm thấy cấu trúc và nội dung sau, được nhóm một cách hợp lý theo các thuộc tính chung và chứa cả phiên bản rút gọn và biên dịch. Sau khi tải về, giải nén Thư mục nénđể xem cấu trúc của Bootstrap (được biên dịch). Nó phải giống như thế này: bootstrap / +-- css / ¦ +-- bootstrap . css ¦ +-- bootstrap . phút. css +-- js / ¦ +-- bootstrap . js ¦ +-- bootstrap . phút. js +-- img / ¦ +-- glyphicons - Halflings . png ¦ +-- glyphicons - Halflings - trắng . png L-- README . mdĐây là dạng cơ bản của Bootstrap: các tệp được biên dịch để sử dụng nhanh chóng và dễ dàng trong hầu hết mọi dự án Web. Chúng tôi cung cấp cho bạn CSS và JS đã biên dịch (bootstrap.*), đồng thời cũng đã biên dịch và rút gọn CSS và JS (bootstrap.min.*). Các tệp hình ảnh được nén bằng ImageOptim, một ứng dụng Mac để nén hình ảnh thành PNG. Xin lưu ý rằng tất cả các plugin JavaScript đều yêu cầu jQuery. 3. Bao gồm những gìBootstrap được trang bị HTML, CSS và JS cho mọi loại công việc, chúng đều được liệt kê theo danh mục mà bạn có thể tìm thấy ở đầu trang. Phần tài liệu Các phần tử được hỗ trợKiểu nội dung chung để đặt lại loại và nền, kiểu liên kết, lưới mẫu và hai yếu tố đơn giảnđánh dấu. Kiểu CSSPhong cách chung phần tử HTML: thiết kế, mã, bảng, biểu mẫu và nút. Cũng bao gồm Glyphicons, một bộ biểu tượng tuyệt vời. Các thành phầnCác kiểu cơ bản dành cho thành phần đơn giản giao diện: tab và nút, thanh điều hướng, tin nhắn, tiêu đề trang, v.v. Plugin JavascriptGiống như các thành phần, chúng Plugin Javascript là các thành phần tương tác cho chú giải công cụ, khối thông tin, thành phần phương thức, v.v. Danh sách các thành phầnTất cả cùng nhau, các thành phần và plugin Javascript chứa các yếu tố sau giao diện:
Sau phần giới thiệu ngắn, chúng ta sẽ tập trung vào sử dụng Bootstrap. Để thực hiện việc này, chúng tôi sẽ sử dụng mẫu HTML cơ bản bao gồm tất cả các thành phần được liệt kê trong . Đây là những gì nó trông giống như tập tin điển hình HTML: Để làm được một cái như thế này Mẫu khởi động, chỉ cần đính kèm các tệp CSS và JS thích hợp: Và mọi thứ đã được thiết lập! Bằng cách thêm hai tệp này, bạn có thể phát triển trang web hoặc ứng dụng bằng Bootstrap. Khởi động là một khung đặc biệt (tức là một bộ công cụ) bao gồm HTML, CSS và Giải pháp JavaScript. Ý tưởng chính của framework này là sáng tạo thuận tiện các dự án web có thích nghi tài sản. Khả năng thích ứng trong trường hợp này, điều đó có nghĩa là bố cục của tài liệu web phải được điều chỉnh cho phù hợp với thiết bị hiển thị nó - PC, máy tính bảng, điện thoại thông minh, v.v. Thiết kế trực quan các phần tử bố cục trang web riêng lẻ cũng được bao gồm trong khung. Sự liên quan. Để kết nối khung, bạn phải tải xuống gói tệp và kết nối chúng trong thẻ hoặc kết nối chúng từ xa - ở cùng một nơi. Ví dụ, Để hiển thị nội dung trang trong khuôn khổ, cái gọi là. hệ thống lưới điện ( hệ thống lưới điện), cho phép bạn tạo (theo mặc định) tối đa 12 cột (và các hàng tương ứng) trên mỗi trang và thiết kế này có thể phụ thuộc vào thiết bị mà trang được xem. Ví dụ: đối với các thiết bị cỡ trung bình ( thiết bị trung bình), có thể xác định các cột như thế này: Điều đó có nghĩa là hai cột, cột đầu tiên có độ dài có điều kiện là 8 và cột thứ hai - 4 là 12. Tóm lại, các giá trị này rõ ràng cũng cho 12. Trên thực tế, chiều rộng của cột được đặt theo tỷ lệ. Một vi dụ khac: Nghĩa là sẽ có 3 cột cùng chiều rộng. Hoặc Có nghĩa là 1 cột trải dài trên toàn bộ chiều rộng của màn hình. Rõ ràng, bố cục được thiết kế cho máy tính để bàn sẽ không phù hợp với thiết bị di động. Các bố cục được mô tả ở trên trên thiết bị di động sẽ không được hiển thị dưới dạng cột mà nằm dưới cột kia - vì chúng sẽ không có đủ không gian theo chiều ngang. Khung đã được phát triển lớp học đặc biệtđể làm việc với các thiết bị di động. Các lớp này có thể được chỉ định cho bố cục thay thế trong trường hợp thiết bị di động ( xs - thiết bị di động, sm - thiết bị nhỏ). Ví dụ, Có nghĩa là có hai ô trong bố cục, nhưng tỷ lệ chiều rộng của chúng sẽ khác nhau khi hiển thị trên PC hoặc trên thiết bị di động: 8 và 4 trên PC trong một hàng hoặc 2 và 10 trên thiết bị di động. Tổng cộng cả hai cặp giá trị đều cho 12 nên chúng sẽ được đặt trên cùng một dòng. Tạo một thực đơn.Để tạo một menu, hãy sử dụng lớp điều hướng(các nút hoặc liên kết được đặt trong khối của lớp này) và lớp thanh điều hướng nơi điều hướng đã hoàn tất được đặt. Ví dụ,
Thanh điều hướng- một thành phần thích ứng được sử dụng như một khối điều hướng trang web. Khả năng thích ứng trong trường hợp này là các thành phần này “sụp đổ” khi hiển thị trên thiết bị di động nếu các mục điều hướng không vừa khít theo chiều ngang. 19.05.2016 Chào mọi người! Bước 1. Tải xuống “bootstrap 3” Hoặc tải xuống từ trang web chính thức: Nếu bạn chọn tải xuống từ trang web chính thức thì khi đến đó, hãy nhấp vào liên kết “Tải xuống Bootstrap” và cho biết vị trí trên máy tính của bạn nơi bạn muốn tải xuống kho lưu trữ có “bootstrap 3”:
Bước 2. Chuẩn bị (mở bao bì, loại bỏ phần thừa) Bây giờ, hãy tạo một thư mục trên PC nơi bạn sẽ tiến hành nhiều thử nghiệm khác nhau với các tệp “bootstrap 3”, đây sẽ là nơi thử nghiệm cá nhân của bạn để tìm hiểu những kiến thức cơ bản về “bootstrap 3”.
Bây giờ chúng ta hãy xem từng thư mục từ “bootstrap 3” và tìm hiểu những tập tin nào có trong đó và chúng cần thiết để làm gì. Tiêu chuẩn cấu trúc tập tin"Dây khởi động": │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css │ ├── bootstrap.js │ └── bootstrap.min.js └── phông chữ/ Lưu ý: nếu bạn đã tải xuống “Bootstrap 3” từ trang web chính thức, có thể sẽ có nhiều tệp hơn.
bootstrap.css - tệp css này chứa tất cả các kiểu được tạo sẵn. Chúng tôi sẽ kết nối tập tin này với trang web. Tôi xóa tất cả các tập tin khác: bootstrap.min.css hoàn toàn giống với tệp “bootstrap.css”, chỉ là phiên bản nén. Xóa tệp "bootstrap.min.css". bootstrap-theme.css là tệp css dành cho chủ đề Bootstrap được tạo sẵn. Xóa tệp "bootstrap-theme.css". bootstrap-theme.min.css - chính xác là cùng một tệp với “bootstrap-theme.css”, chỉ là phiên bản nén. Xóa tệp "bootstrap-theme.min.css". "thư mục phông chữ" Thư mục phông chữ lưu trữ các tệp có cùng phông chữ nhưng có phần mở rộng khác nhau. "thư mục js" Có 2 file trong thư mục js: “bootstrap.js” và “bootstrap.min.js”. Đây là hai tệp giống hệt nhau với một tập hợp các tập lệnh js được tạo sẵn. Sự khác biệt duy nhất là "bootstrap.js" là phiên bản đầy đủ, "bootstrap.min.js" là phiên bản nén. Xóa tệp "bootstrap.min.js". Sau thao tác loại bỏ tập tin không cần thiết bạn sẽ có cấu trúc tệp “Bootstrap” này: │ └── bootstrap.css │ └── bootstrap.js └── phông chữ/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff Tức là trong các thư mục: CSS – tập tin “bootstrap.css” được đặt Bước 3. Tạo tệp “index.html” và bao gồm các tệp Trong thư mục gốc của thư mục “Polygon for bootstrap 3”, tạo một tệp “index.html” với mã sau và có: Bootstrap 3 gửi tới Xin chào thế giới! Ở dòng số 10 – Tôi bao gồm tệp “bootstrap.css”:
Ở dòng số 25, tôi thêm tệp “bootstrap.js”:
Đây là hình ảnh chung mà bạn nên có trong thư mục “Polygon for bootstrap 3”:
Đó là tất cả quá trình chuẩn bị và kết nối “bootstrap 3” với file “index.html”. Nếu bạn mở tệp "index.html" thông qua bất kỳ trình duyệt nào (ví dụ: OPERA, EI, Mozilla Firefox, Google Chrome, trình duyệt Yandex, v.v.), thì bạn sẽ thấy trang này trên màn hình:
Có vẻ như không có gì đặc biệt, bạn không cần phải sử dụng “bootstrap 3”, nhưng đây chỉ là kết nối và chỉ là bài học thứ hai. Bạn cũng sẽ thấy Bootstrap 3 Framework có những ưu điểm gì. Bài trước Những ghi chú cuối cùng
|
