Cách sử dụng Bootstrap. Đang tải các tập tin được biên dịch. Các thành phần Bootstrap và ví dụ về việc sử dụng chúng

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 Bootstrap

Nế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:

  • bootstrap.css và bootstrap.min.css - phiên bản nén và không nén của mã CSS của khung. Nên kết nối với dự án đang làm việc tập tin nén, bằng cách này bạn sẽ cải thiện được một chút tốc độ tải xuống của mình. Nhưng nếu bạn dự định xem mã trong một tệp, hãy kết nối phiên bản không nén.
  • bootstrap.js và bootstrap.min.js - tệp có tập lệnh
  • thư mục phông chữ và các tệp glyphicons trong đó là phông chữ biểu tượng Bootstrap. Nó có khoảng 200 biểu tượng. Trong hầu hết các trường hợp, bạn sẽ có đủ chúng, đôi khi bạn cần kết nối những người khác. Chúng ta sẽ nói về phông chữ biểu tượng sau.
  • 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 Nga

    Khi 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ủ vào 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 động

    Dù người ta có thể nói gì đi nữa, yếu tố chính của Bootstrap là lưới thích ứ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, một hàng lưới nên được đặt trong khối container. Bạn cần đặt tất cả các khối nằm trên cùng 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ỉ chứa tiêu đề, cái thứ hai sẽ chứa nội dung và cột bên, và ở cái cuối cùng có phần 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 học đặ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, đây là:

  • ld - dành cho màn hình lớn, rộng hơn 1200 pixel (máy tính để bàn);
  • md - dành cho màn hình trung bình, chiều rộng từ 992 đến 1199 (máy tính, netbook);
  • sm - dành cho màn hình nhỏ, chiều rộng từ 768 đến 991 pixel (máy tính bảng);
  • xs - màn hình cực nhỏ, chiều rộng dưới 768px.
  • Đâ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à tình huống này sẽ xảy ra ở quy mô nhỏ, vừa và màn hình lớn(chỉ cần chỉ định cho màn hình nhỏ là đủ; đối với màn hình lớn, như bạn nhớ, giá trị được kế thừa). 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 đi 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. Tốt, nguyên tắc cơ bản Chúng tôi đã sắp xếp lại hoạt động của lưới, nhưng chúng tôi vẫn cần xem nó hoạt động như thế nào...

    Lưới lồng nhau Bootstrap

    Thự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ì đây là kết luận mà chúng ta đi đến:
    Có thể có số lượng lưới không giới hạn bên trong bất kỳ khối nào. 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 vào 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):

    Bỏ lỡ một cái khác tâm điểmĐể 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 cấp lớp img- responsive. 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

    Cái gì trong trong trường hợp này sẽ làm cho lớp bị ẩn-xs? 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:

  • Từ ẩn hoặc hiển thị, tùy thuộc vào những gì bạn cần
  • Viết tắt của xs, sm, md hoặc lg cho biết màn hình nào cần ẩn hoặc hiển thị khối.
  • Để hiển thị, bạn cũng cần thêm một trong ba giá trị: block - hiển thị phần tử dưới dạng phần tử khối, inline-block - dưới dạng phần tử khối nội tuyến, nội tuyến - nội tuyến.
  • Vâng, một vài ví dụ để làm rõ:

  • Hidden-xs Hidden-lg - sẽ ẩn phần tử trên màn hình nhỏ nhất và lớn nhất. Như bạn có thể thấy, bạn có thể chỉ định nhiều lớp cách nhau bằng dấu cách.
  • có thể nhìn thấy-xs-inline có thể nhìn thấy-md-block - trên màn hình nhỏ và lớn, phần tử sẽ không được hiển thị. Trên những cái cực nhỏ nó sẽ là chữ thường và trên những cái trung bình nó sẽ là một khối.
  • nhìn thấy-lg-block - phần tử sẽ chỉ hiển thị trên màn hình lớn nhất, trên tất cả các màn hình khác, nó sẽ bị ẩn
  • Đâ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 thô sơ.

    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 được cấp 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.

    Di chuyển tôi bằng mọi cách

    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.

    Thành phần khởi động và ví dụ về việc sử dụng chúng

    Tô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 và sao chép mã ở đó thành phần bắt buộc và nếu cần, hãy thay đổi nó cho phù hợp với 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 nhanh

    Cá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 đẩy 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, việc này rất dễ thực hiện, không chỉ thực đơn đáp ứng, và cái gọi là thiết bị di động, được thu nhỏ 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ã ví dụ thực đơn di động 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 một logo vào menu, hai mục đơn giản, mục thả xuống, mẫu tìm kiếm. 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.

    Trình đơn thả xuống

    Đồ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:

    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ì, 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ã:


  • trang chủ

  • Mục lục

  • Các mặt hàng

  • 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ờ:

    Bảng khởi động

    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:


    Lưu ý ở phiên bản này các ô chỉ có viền rõ ràng ở phía dưới; nếu muốn viền cả 4 cạnh thì cần thêm lớp khác:


    Nếu bạn muốn làm cho bảng có sọc, nghĩa là để các hàng có màu nền xen kẽ, hãy thêm lớp sọc bảng. Để đá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.

    Về nguyên tắc, đây là tất cả các khả năng của bảng. Tôi đã viết một bài riêng về cách tạo bảng thích ứng nên tôi sẽ không lặp lại. Điều duy nhất là bạn cũng có thể thêm các lớp như thông tin, thành công, cảnh báo và các lớp khác vào các hàng và ô của bảng để tô chúng theo màu mong muốn.

    Đương nhiên, bạn có thể dễ dàng viết các lớp của riêng mình trong style.css và sử dụng chúng. Đây là nơi chúng tôi kết thúc với các bảng.

    tái bút Bài viết sẽ được bổ sung, bổ sung...

    Điểm mấu chốt

    Tôi hy vọng bài viết này hữu ích và bạn có thể hiểu được những điều quan trọng nhất. Bạn có thể hỏi bất kỳ câu hỏi nào bằng cách sử dụng bình luận.

    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 mã nguồn và tùy chỉnh framework theo bất kỳ cách nào bạn muốn. Nó hoàn hảo.

    Cài đặt Bootstrap

    Nế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. Hãy để tôi cung cấp một cái nhìn tổng quan ngắn gọn về các tập tin này:

  • bootstrap.css và bootstrap.min.css - phiên bản nén và không nén của mã CSS của khung. Bạn nên đưa một tệp nén vào dự án đang làm việc của mình, bằng cách này, tốc độ tải sẽ được cải thiện một chút. Nhưng nếu bạn dự định xem mã trong một tệp, hãy kết nối phiên bản không nén.
  • bootstrap.js và bootstrap.min.js - tệp có tập lệnh
  • thư mục phông chữ và các tệp glyphicons trong đó là phông chữ biểu tượng Bootstrap. Nó có khoảng 200 biểu tượng. Trong hầu hết các trường hợp, bạn sẽ có đủ chúng, đôi khi bạn cần kết nối những người khác. Chúng ta sẽ nói về phông chữ biểu tượng sau.
  • Đây là bộ tiêu chuẩn của khung. 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 Nga

    Khi 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 động

    Dù 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. Các 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, một hàng lưới nên được đặt trong khối container. Bạn cần đặt tất cả các khối nằm trên cùng một dòng trong đó. Tức là nếu chúng ta lấy mẫu điển hình nhất: 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 ta đến với vấn đề quan trọng nhất liên quan đến 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 chính là phải hiểu cách thức hoạt động của lưới và con đường dẫn đến bố cục thích ứng nhanh sẽ mở ra 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 các thuộc tính lưới quan trọng.

    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à:

  • ld - dành cho màn hình lớn, rộng hơn 1200 pixel (máy tính để bàn);
  • md - dành cho màn hình trung bình, chiều rộng từ 992 đến 1199 (máy tính, netbook);
  • sm - dành cho màn hình nhỏ, chiều rộng từ 768 đến 991 pixel (máy tính bảng);
  • xs - màn hình cực nhỏ, chiều rộng dưới 768px.
  • Đâ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 thường, trên thiết bị di động, các trang web xuất hiện 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 Bootstrap

    Thự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ì đây là kết luận mà chúng ta đi đến:
    Có thể có số lượng lưới không giới hạn bên trong bất kỳ khối nào. 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 vào 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.v.

    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 vào 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:

  • Từ ẩn hoặc hiển thị, tùy thuộc vào những gì bạn cần
  • Viết tắt của xs, sm, md hoặc lg cho biết màn hình nào cần ẩn hoặc hiển thị khối.
  • Để hiển thị, bạn cũng cần thêm một trong ba giá trị: block - hiển thị phần tử dưới dạng phần tử khối, inline-block - dưới dạng phần tử khối nội tuyến, nội tuyến - nội tuyến.
  • Vâng, một vài ví dụ để làm rõ:

  • Hidden-xs Hidden-lg - sẽ ẩn phần tử trên màn hình nhỏ nhất và lớn nhất. Như bạn có thể thấy, bạn có thể chỉ định nhiều lớp cách nhau bằng dấu cách.
  • có thể nhìn thấy-xs-inline có thể nhìn thấy-md-block - trên màn hình nhỏ và lớn, phần tử sẽ không được hiển thị. Trên những cái cực nhỏ nó sẽ là chữ thường và trên những cái trung bình nó sẽ là một khối.
  • nhìn thấy-lg-block - phần tử sẽ chỉ hiển thị trên màn hình lớn nhất, trên tất cả các màn hình khác, nó sẽ bị ẩn
  • Đâ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 thô sơ.

    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 được cấp 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.

    Di chuyển tôi bằng mọi cách

    Tiếp theo tôi sẽ chỉ cho bạn một thủ thuật rất hay khác - khả năng di chuyển một 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, hãy dịch khối sang bên trái bằng 33% chiều rộng của vùng chứa chính (1/3 offset bên trái, 1/3 chiều rộng khối, ⅓ offset bên phải, dẫn đến sự định tâm).
    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úng

    Tô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 nhanh

    Cá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 đẩy 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 không chỉ một menu thích ứng mà còn gọi là 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 đáp ứng và 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 ở góc trên bên phải. Chỉ còn lại logo trên màn hình.

    Trình đơn thả xuống

    Đồ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 để có cái nhìn chi tiết hơn:

    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 danh sách dấu đầu dòng tiêu chuẩn. 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 đó 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ã:


  • trang chủ

  • Mục lục

  • Các mặt hàng

  • 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 hình thức của breadcrumb bằng cách nào đó, chỉ cần sử dụng bộ chọn .breadcrumb trong CSS. Ví dụ: đây là cách bạn có thể xóa màu nền:

    Breadcrumb(nền: trong suốt;)

    Đây là giao diện của trang web bây giờ:

    Bảng khởi động

    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:


    Lưu ý ở phiên bản này các ô chỉ có viền rõ ràng ở phía dưới; nếu muốn viền cả 4 cạnh thì cần thêm lớp khác:


    Nếu bạn muốn làm cho bảng có sọc, nghĩa là để các hàng có màu nền xen kẽ, hãy thêm lớp sọc bảng. Để đá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.

    Về nguyên tắc, đây là tất cả các khả năng của bảng. Tôi đã viết một bài riêng về cách tạo bảng thích ứng nên tôi sẽ không lặp lại. Điều duy nhất là bạn cũng có thể thêm các lớp như thông tin, thành công, cảnh báo và các lớp khác vào các hàng và ô của bảng để tô chúng theo màu mong muốn.

    Đương nhiên, bạn có thể dễ dàng viết các lớp của riêng mình trong style.css và sử dụng chúng. Đây là nơi chúng tôi kết thúc với các bảng.

    tái bút Bài viết sẽ được bổ sung, bổ sung...

    Điểm mấu chốt

    Tôi hy vọng bài viết này hữu ích và bạn có thể hiểu được những điều quan trọng nhất. Bạn có thể hỏi bất kỳ câu hỏi nào bằng cách sử dụng bình luận.

    Xin chào tất cả khách truy cập blog của tôi và những người đam mê phát triển web. Ấn phẩm hôm nay sẽ được dành để giới thiệu một framework phổ biến như Bootstrap. Sau khi đọc bài viết hiện tại, bạn sẽ tìm hiểu lý do tại sao nó được tạo ra, cách làm việc với bootstrap và cách cài đặt nó, khung này cung cấp những công cụ nào và nơi nó thường được sử dụng nhất. Bây giờ hãy tiếp tục và sắp xếp các tài liệu mới!

    Bootstrap là gì?

    Bootstrap là một khung được thiết kế đặc biệt để phát triển giao diện người dùng (giao diện bên ngoài) của các dịch vụ và ứng dụng web.

    Nó bao gồm mẫu chuẩn bao gồm kiểu chữ, nút bấm, biểu mẫu, thực đơn khác nhau, bao gồm các menu thả xuống, bảng, cửa sổ phương thức, điều hướng, thanh trượt (thông thường và ở dạng băng chuyền) và các công cụ khác, cũng như tất cả các loại plugin trên .

    Phổ biến nhất trong số đó là Tooltip, chịu trách nhiệm về các cửa sổ bật lên, Dropdown, chịu trách nhiệm về danh sách thả xuống, Carousel, tổ chức một thanh trượt có thể cuộn và một số tính năng khác.

    VỚI danh sách đầy đủ plugin hiện có, các mẫu và thành phần có thể được tìm thấy trên trang web chính thức http://getbootstrap.com/getting-started/. Ngoài ra, với sự trợ giúp của nó, bắt đầu từ phiên bản thứ hai, bạn có thể tạo bố cục đáp ứng.

    Một vài lời về lịch sử

    Tôi nghĩ rằng bạn cần biết một chút lịch sử về việc tạo ra nhạc cụ đang được mô tả để hiểu cái gì là cái gì.

    Bootstrap được tạo ra bởi Mark Otto và Jacob Thornton dành riêng cho mạng xã hội Twitter. Nó hoạt động như một thư viện nội bộ. Đó là lý do tại sao đôi khi bạn có thể tìm thấy tên Twitter khởi động.

    Thư viện ban đầu được gọi là Twitter Blueprint. Tuy nhiên, vào thời điểm sản phẩm được phát hành ra công chúng (và điều này xảy ra vào ngày 19 tháng 8 năm 2011), tên của nó đã được đổi thành Bootstrap. Ngày nay có bốn phiên bản của khung này.

    Đáng chú ý nhất và có nhu cầu trên khoảnh khắc này là Bootstrap 3. Đây là người đầu tiên sử dụng khái niệm di độngĐầu tiên. Ngoài ra, nhiều sửa đổi và cải tiến đã được đưa ra.

    Lợi ích của việc sử dụng Bootstrap là gì?

    Trên thực tế, như với tất cả các công nghệ, việc sử dụng Bootstrap có cả mặt tích cực và tiêu cực. Vì vậy, đừng bao giờ sử dụng khuôn khổ này một cách thiếu suy nghĩ. Trong một bài viết, tôi đã mô tả chi tiết những ưu điểm và nhược điểm khi làm việc với Bootstrap.

    Và bây giờ tôi muốn hướng sự chú ý của bạn đến sự thoải mái giải pháp làm sẵn mà Bootstrap cung cấp và những mặt tích cực của chúng.

    Vì vậy, khi kết nối khung được mô tả, bạn có cơ hội sử dụng các phần tử làm sẵn như:

    • Tất cả các loại thành phần, bao gồm: thanh điều hướng, danh sách thả xuống, nút, chỉ báo tiến trình, phân trang và các thành phần khác;
    • Các plugin JavaScript, bao gồm các phần chuyển tiếp, phần tử phương thức và thả xuống, khối bật lên và chú giải công cụ, thu gọn, triển khai tab, thanh trượt và các phần tử khác;
    • Các mẫu lưới, bao gồm cả các mẫu nổi;
    • Bố cục;
    • Và tất nhiên, việc thực hiện thiết kế đáp ứng.

    Điều đáng chú ý đặc biệt là lưới hoặc, như chúng còn được gọi là bố cục bố cục. Bây giờ sẽ có một spoiler nhỏ, hãy tha thứ cho tôi, vì tôi đã quyết định dành một bài viết riêng cho chủ đề này, nhưng không thể làm gì được cả!

    Nhờ công cụ này mà Bootstrap rất thường được sử dụng để viết trang web. Bởi vì đây thực sự là một cơ chế có thẩm quyền và mạnh mẽ để bố trí khối. Những người tạo ra khung đã cung cấp số tiền tối đa cột - 12. Điều này là quá đủ để cài đặt “khung”.

    Ngoài ra, trong một số trường hợp, việc sử dụng Bootstrap không chỉ đơn giản hóa mã mà còn tiết kiệm đáng kể thời gian của bạn. Đồng thời, bạn không phải lo lắng rằng một số thành phần sẽ không hoạt động trong các trình duyệt có vấn đề (vâng, tôi đang ám chỉ IE), vì Bootstrap hoàn toàn tương thích với .

    Làm thế nào để kết nối khung?

    Có một số tùy chọn kết nối của nhạc cụ này. Tôi đoán tôi sẽ bắt đầu bằng cách cài đặt tập tin khởi động.

    Vì vậy, trên trang web chính thức bằng liên kết, bạn có thể tải xuống phiên bản hiện tại Bootstrap. Mọi thứ đều rất đơn giản. Chỉ cần chọn gói cài đặt phù hợp với bạn và nhấp vào nút “Tải xuống”. Trên cùng một trang, bạn có thể tải xuống phiên bản alpha của Bootstrap 4.

    Tất nhiên là cách thứ hai sử dụng CDN. Vì vậy, để kết nối các phiên bản mới nhất của framework, bạn cần chèn liên kết sau:

    Nếu bạn cần kết nối một thiết bị giảm Phiên bản JavaScript, sau đó sao chép dòng này:

    Vâng, các chủ đề được kết nối như sau:

    Trên trang web Russified, bạn có thể xem video đào tạo về cách kết nối khung này (http://mybootstrap.ru/video-obuchenie-twitter-bootstrap/).

    Thế thôi, các bạn, đã đến lúc phải nói lời tạm biệt. Đừng quên chia sẻ những bài viết thú vị với đồng nghiệp và đăng ký theo dõi các cập nhật blog của tôi. Tạm biệt!

    Trân trọng, Roman Chueshov

    Đọc: 213 lần

    Bài học thứ ba chứa một ít lý thuyết về xây dựng mẫu và lưới Bootstrap.
    Bootstrap nhìn thấy mẫu trang web như sau

    Khi xây dựng mẫu bằng Bootstrap, ba cấp độ lồng nhau được sử dụng

    • Cấp độ đầu tiên là vùng chứa - khu vực đặt tất cả các khối của trang web (Khung màu đỏ).
    • Cấp độ thứ hai là hàng - khu vực đặt các khối vật liệu
    • Cấp độ thứ ba cho các thiết bị khác nhau anh ấy khác. Đây là vật liệu chính nó.

    Nhìn chung, Bootstrap có phần giống với một bảng thông thường. Có một khung chung, sau đó là các hàng và ô. Nếu chúng ta vẽ một sự tương tự với một bảng html, thì thẻ sẽ đóng vai trò của vùng chứa

    , vai trò của hàng được gán cho thẻ Và cấp độ cuối cùngđây là tế bào với vật liệu ).

    Lưới khởi động

    Lưới Bootstrap mặc định bao gồm 12 ô với cùng chiều rộng và tùy thuộc vào độ phân giải màn hình, chiều rộng của các ô có thể khác nhau. Các ô khởi động có khả năng thú vị, mà bạn có thể sử dụng là điều chỉnh các ô theo chiều rộng của màn hình.

    Mẫu Bootstrap 101 Xin chào thế giới! Đây là phiên bản của Photoshop Đây là phiên bản của Photoshop Đây là phiên bản của Lorem Ipsum trong Photoshop. Proin grafida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh Đây là Photoshop "s version Đây là phiên bản Lorem Ipsum của Photoshop. Proin gradida nibh vel velit auctor aliquet. Đây là phiên bản của Photoshop Đây là phiên bản của Photoshop. của Lorem Ipsum.

    Tải ví dụ xuống, chạy tệp index.html và bắt đầu thay đổi kích thước trình duyệt từ từ. Bạn sẽ thấy ba trạng thái được viết trong mẫu.


    Ví dụ sử dụng cấu trúc sau

    Chào thế giới! Đây là phiên bản của Photoshop Đây là phiên bản Lorem Ipsum của Photoshop. Proin gradida nibh vel velit auctor aliquet. Aenean sollitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh....

    col-sm là lớp dành cho các thiết bị nhỏ ( dưới đây là bảng).

    col-md được thiết kế cho các thiết bị có chiều rộng từ 970px trở lên. col-md có cấu trúc sau.
    col-md-[ Tiếp theo là một số cho biết số lượng ô được sử dụng theo mặc định là 12 ô;] Mình đặt 3 nên ban đầu mẫu được chia thành 4 cột. Nếu chúng ta đặt 4 div thành col-md-6, chúng ta sẽ nhận được một trang có hai cột. Tỷ lệ ô cộng lại phải bằng 12. Hãy thử đặt tỷ lệ này thành 8:4. Sau đó, kết quả là bạn sẽ có được ô đầu tiên rộng gấp đôi ô thứ hai.

    Bootstrap có một bảng dành cho các nhóm thiết bị; nếu bạn muốn sửa đổi cách hiển thị vật liệu, chẳng hạn như đối với điện thoại, bạn chỉ cần thêm kiểu.

    .

    Chúng tôi đã đạt được cấp độ đầu tiên. Mức lồng thứ hai thực hiện chức năng của một thùng chứa, nhưng liên quan đến các khối thông tin ( tương tự như thẻ

    Các thiết bị rất nhỏ
    Điện thoại(Mẫu Bootstrap cơ bản Nhấp vào nút

    Bước 2: Kết nối Bootstrap 3 Framework với trang Web

    Để kết nối khung Twitter Bootstrap 3 với một trang web, bạn cần làm như sau:

  • Kết nối được biên dịch và rút gọn Tệp khởi động CSS (bootstrap.min.css);
  • Để cắm phiên bản mới nhất thư viện jQuery, điều này cần thiết để các tập lệnh Bootstrap hoạt động;
  • Bao gồm tệp JavaScript Bootstrap được biên dịch và rút gọn (bootstrap.min.js).
  • Ghi chú: Tệp JavaScript tốt nhất nên kết nối trước khi kết thúc thẻ cơ thể(tức là trước ), vì điều này sẽ cải thiện tốc độ tải nội dung chính của trang web.

    DOCTYPE html > Mẫu Bootstrap cơ bản Nhấp vào nút $(function() ( $("").popover()))

    Bước 3: Lưu trang web và kiểm tra xem thành phần Bootstrap có hoạt động không

    Sau khi tạo một trang web có khung Twitter Bootstrap 3 được kết nối với nó, bạn cần lưu nó vào một tệp có phần mở rộng html(Ví dụ: "index.html"). Sau này, bạn cần mở trang web đã tạo trong trình duyệt web và kiểm tra hoạt động của thành phần Bootstrap "Popovers".

    Lưu ý: Khi lưu tệp trang web trong trình soạn thảo văn bản, hãy chú ý đến phần mở rộng của nó, phải là "html". Vì một số soạn thảo văn bản, chẳng hạn như notepad, tự động lưu tệp có phần mở rộng "txt".

    Cấu trúc tệp của dự án dựa trên nền tảng Twitter Bootstrap 3:

    Trình diễn thành phần Bootstrap "Popovers":

    Nhấn nút