Nếu bạn đang tạo một trang web cho doanh nghiệp của mình, thì bạn có thể có một danh sách mong muốn dài.
Bạn muốn thiết kế phản ánh giao diện của thương hiệu của bạn. Bạn muốn có chức năng cần thiết để đáp ứng nhu cầu của khách truy cập mà không vượt quá ngân sách. Và bạn muốn tạo bố cục đáp ứng hiển thị các yếu tố như nút và biểu mẫu một cách nhất quán, bất kể khách truy cập đang sử dụng thiết bị hay trình duyệt nào.
Bằng cách xây dựng với Bootstrap, bạn có thể kiểm tra mục cuối cùng đó khỏi danh sách của bạn. Bootstrap là một khung nguồn mở để nhanh chóng xây dựng các trang web đáp ứng và các dự án web đầu tiên trên thiết bị di động. Bởi vì nó cung cấp một bộ sưu tập mã có thể tái sử dụng, bạn đã giành chiến thắng để xây dựng một trang web từ đầu. & NBSP;
Để hiểu lý do tại sao hơn 21 triệu trang web trên internet sử dụng bootstrap, hãy để xem xét kỹ hơn về nó là gì.
Navbar
-
Home [current]
-
Features
-
Pricing
-
About
Search
Hãy cùng phá vỡ đoạn trích này vào các thành phần được hỗ trợ của nó: bảng màu, thương hiệu, người chuyển đổi, nav và hình thức.
Bảng màu
Hãy xem xét kỹ hơn dòng mã đầu tiên đó. Xem Navbar-Dark BG-Dark? Điều đó kêu gọi một màu nền tối. Nếu bạn thích một bảng màu sáng, hãy thay thế bằng đèn BG của Navbar-Light. Nó sẽ trông giống như sau:
Nhãn hiệu
Trong dòng mã thứ hai đó, xem Navbar-Brand? Chỉ định công ty, sản phẩm hoặc tên dự án của bạn. Chỉ cần thay thế Nav Navbar trước khi thẻ bằng tên chính xác.
Người chuyển đổi
Tiếp theo, bạn sẽ thấy một đoạn mã lớn biểu thị nút chuyển đổi. Nút này được ẩn trên máy tính để bàn. Nó chỉ xuất hiện trên thiết bị di động, khi nội dung của thanh điều hướng phải được thu gọn để phù hợp với màn hình nhỏ hơn.
Trong mã trên, kiểu Navbar-Toggler được xác định để tên thương hiệu hiển thị ở bên trái của màn hình di động và nút chuyển đổi ở bên phải. Nhấp vào nút sẽ tiết lộ nội dung bị thu gọn, như hiển thị bên dưới.
Nav
Trong bit tiếp theo của mã, xem Navbar-nav? Sử dụng thành phần con này, bạn có thể thêm các liên kết trong thanh điều hướng của mình. Bạn chỉ cần bao bọc lớp sửa đổi thích hợp [liên kết điều hướng] xung quanh từ bạn muốn siêu liên kết.
Hình thức
Bạn cũng có thể thêm một biểu mẫu, giống như hộp tìm kiếm, trong thanh điều hướng của bạn với thành phần phụ dòng dạng hình thức. Bạn có thể thấy bit mã này ở dưới cùng của mẫu ở trên.
Bây giờ bạn đã biết cách thêm tiêu đề điều hướng phản hồi của Bootstrap, với thương hiệu, điều hướng và hơn thế nữa, bạn có thể làm theo một quy trình tương tự để thêm các yếu tố khác vào trang. Hãy cùng xem một vài trong số những người dưới đây.
Bootstrap CSS Ví dụ
Bootstrap cung cấp các mẫu HTML và CSS, hoặc các ví dụ, để giúp bạn bắt đầu xây dựng trang web của mình một cách nhanh chóng. Mặc dù mã nguồn Bootstrap đi kèm với các ví dụ nâng cao hơn với các thành phần và bố cục tùy chỉnh thêm vào khung, chúng tôi sẽ tập trung vào các ví dụ sử dụng các thành phần tích hợp có sẵn trong cả hai phiên bản mã được biên dịch trước và tiền.
Chúng tôi đã chạm vào một vài ví dụ ở trên, bao gồm cả Navbar. Dưới đây chúng tôi sẽ xem xét kỹ hơn một vài ví dụ bổ sung.
Lưới bootstrap
Các hệ thống lưới CSS được sử dụng để tạo bố cục trang thông qua một loạt các hàng và cột nội dung nhà. Trong hệ thống lưới bootstrap, các hàng phải được đặt trong một .container [chiều rộng cố định] hoặc .container-fluid [toàn bộ chiều rộng] để định vị và đệm phù hợp. Các hàng này được sử dụng để tạo các nhóm cột ngang.
Vì Bootstrap là một hệ thống 12 cột, bạn sẽ phải chỉ định số lượng mười hai cột có sẵn mà bạn muốn kéo dài. Giả sử bạn muốn tạo ba cột có chiều rộng bằng nhau được tập trung trên trang trên các thiết bị ở mọi kích thước. Sau đó, bạn cần có ba cột bốn trong hai trong hai cột, được biểu thị bằng lớp .col-4. Dưới đây là ví dụ lưới đầy đủ.
One of three columns
One of three columns
One of three columns
Trên mặt trước của trang web của bạn, nó sẽ giống như thế này trên thiết bị di động và máy tính để bàn.
Nhưng điều gì sẽ xảy ra nếu bạn muốn lưới xuất hiện một chiều trên máy tính để bàn và một cách khác trên điện thoại di động? Hãy nói rằng bạn muốn các cột xuất hiện cạnh nhau trên máy tính để bàn, nhưng xếp chồng lên nhau trên thiết bị di động.
Sau đó, bạn có thể chỉ định chiều rộng của các cột với tiền tố cho nhỏ. Điều này sẽ làm cho các cột rộng 100% cho đến khi điểm dừng nhỏ [576px]. Dưới đây là ví dụ lưới đầy đủ.
One of three columns
One of three columns
One of three columns
Video dưới đây cho thấy nó sẽ trông như thế nào trên máy tính để bàn và sau đó thay đổi trên thiết bị di động.
Nguồn hình ảnh
Có nhiều lựa chọn khác bạn có thể chơi xung quanh. Sử dụng hệ thống lưới Bootstrap, bạn có thể tạo các cột có chiều rộng bằng nhau nhiều dòng. Bạn có thể đặt chiều rộng của một cột và có các cột anh chị em tự động thay đổi kích thước xung quanh nó. Bạn có thể kích thước các cột dựa trên chiều rộng tự nhiên của nội dung của chúng - và nhiều hơn nữa.
Cảnh báo bootstrap
Bạn có thể thêm cảnh báo vào trang web bootstrap của bạn để cung cấp các thông điệp quan trọng cho khách truy cập của bạn. Bootstrap cung cấp tám màu mặc định cho các thông báo cảnh báo. Ví dụ, hãy nói rằng bạn muốn thêm một cảnh báo để chỉ ra rằng khách truy cập đã tạo thành công một tài khoản chẳng hạn. Sau đó, bạn có thể sử dụng ví dụ dưới đây.
A simple success alert—check it out!
Nó sẽ trông như thế này trên mặt trước của trang web của bạn.
Nếu bạn đã tải các JS được biên dịch lên trang web của mình, bạn cũng có thể thêm một nút DISMISS để cho phép khách truy cập đóng cảnh báo sau khi họ đọc nó.
Nút bootstrap
Với Bootstrap, bạn có thể chọn từ một số kiểu nút được xác định trước để nhanh chóng thêm các nút vào các trang đích hoặc biểu mẫu trên trang web Bootstrap của bạn. Hãy nói rằng bạn muốn thêm một nút Thông tin trực tuyến vào trang web của bạn. Dưới đây là ví dụ và cách nó sẽ nhìn vào mặt trước.
Info
Mặc dù các lớp .btn được thiết kế để sử dụng với phần tử, bạn cũng có thể sử dụng chúng trên các phần tử khác. Ví dụ, nếu bạn muốn biến một liên kết thành một nút, thì bạn có thể sử dụng mã bên dưới:
0Hãy nói rằng tôi muốn thêm một nút vào trang web bootstrap của mình để khuyến khích khách truy cập tìm hiểu thêm về hoạt hình CSS, chẳng hạn. Sau đó, tôi có thể liên kết nút với một bài đăng trên blog về chủ đề này. Đây sẽ là mã:
1Và đây là cách nó hoạt động trên trang web:
Nguồn hình ảnh
Bạn có thể thay đổi màu sắc, kích thước và các khía cạnh khác của nút của bạn bằng cách thêm các lớp sửa đổi thích hợp.
Bootstrap băng chuyền
Một băng chuyền là một trình chiếu để trình bày một loạt nội dung, cho dù đó là hình ảnh, văn bản hoặc đánh dấu tùy chỉnh. Trong thiết kế web, bạn có thể tạo một băng chuyền CSS thuần túy mà không cần JavaScript - hoặc bạn có thể sử dụng Bootstrap để tạo một. Trong bootstrap, băng chuyền được chế tạo với các biến đổi 3D CSS và một chút JavaScript. Sử dụng một ví dụ bootstrap, như cái dưới đây, có thể tăng tốc đáng kể quá trình mã hóa. & NBSP;
Ví dụ này là một băng chuyền chỉ có các slide và các điều khiển trước và tiếp theo. & NBSP;
2Đây là cách nó sẽ nhìn vào mặt trước của trang web của bạn:
Khi bạn đã hài lòng với bố cục của trang web của mình, bạn có thể muốn tùy chỉnh sự xuất hiện của các thành phần này và các thành phần bootstrap khác bằng cách thay đổi màu sắc, kích thước phông chữ, biên giới hoặc các kiểu bootstrap hiện có khác. Để làm như vậy, bạn có thể ghi đè các kiểu hiện có. Hãy cùng nhìn vào cách bên dưới.
Cách ghi đè Bootstrap CSS
Thay đổi kiểu dáng mặc định của Bootstrap CSS rất đơn giản. Tạo một tệp với trình soạn thảo văn bản của bạn và gọi nó là main.css. Ở đây, thêm bất kỳ thay đổi CSS tùy chỉnh nào bạn muốn thực hiện. Khi bạn đã hoàn thành, hãy lưu tệp này trong cùng một thư mục với tệp Bootstrap CSS và JS của bạn và tệp index.html. Sau đó, bạn chỉ cần thêm một dòng mã vào tiêu đề của tệp index.html của mình.
Hãy nhớ cách bạn đã thêm dòng mã sau vào tiêu đề của tệp index.html để tải Bootstrap CSS trên trang web của bạn?
3Ngay bên dưới này, dán mã sau:
4Điều này sẽ đảm bảo rằng bất kỳ CSS nào bạn thêm vào tệp Custom.css đều ghi đè lên các kiểu mặc định trong tệp index.html.
Cấu trúc của tệp index.html của bạn bây giờ sẽ trông như thế này:
5Điều quan trọng cần lưu ý là quá trình ghi đè các kiểu CSS mặc định có thể hoạt động cho cả phiên bản Bootstrap và phiên bản mã nguồn. Tuy nhiên, sau này, bạn cũng có thể chỉnh sửa trực tiếp mã nguồn SASS Bootstrap nếu bạn có kinh nghiệm với SASS.
Vì nhiều người dùng không biết Sass, hãy để Lôi xem xét một ví dụ về chỉnh sửa bootstrap được biên dịch trước.
Chúng tôi sẽ bắt đầu với một bố cục đơn giản được tạo bởi nhà phát triển và nhà văn kỹ thuật Tania Rascia. Xây dựng mẫu HTML cơ bản được cung cấp bởi Bootstrap, cô đã thêm một thanh điều hướng, tiêu đề Jumbotron, lưới và glyphicons sử dụng các mẫu được gói trong khung. Kết quả sẽ được hiển thị dưới đây.
Nguồn hình ảnh
Bạn có thể thay đổi màu sắc, kích thước và các khía cạnh khác của nút của bạn bằng cách thêm các lớp sửa đổi thích hợp.
Bootstrap băng chuyền
6Một băng chuyền là một trình chiếu để trình bày một loạt nội dung, cho dù đó là hình ảnh, văn bản hoặc đánh dấu tùy chỉnh. Trong thiết kế web, bạn có thể tạo một băng chuyền CSS thuần túy mà không cần JavaScript - hoặc bạn có thể sử dụng Bootstrap để tạo một. Trong bootstrap, băng chuyền được chế tạo với các biến đổi 3D CSS và một chút JavaScript. Sử dụng một ví dụ bootstrap, như cái dưới đây, có thể tăng tốc đáng kể quá trình mã hóa. & NBSP;
7Ví dụ này là một băng chuyền chỉ có các slide và các điều khiển trước và tiếp theo. & NBSP;
8Với những thay đổi này, cô ấy đã hoàn toàn biến đổi trang web bootstrap của mình. Hãy nhìn vào bên dưới.
Nguồn hình ảnh
Sử dụng ghi đè CSS, các tùy chọn tùy chỉnh hầu như vô hạn với Bootstrap. Bạn có thể duyệt qua Triển lãm Bootstrap để xem một số cách sử dụng sáng tạo nhất của Bootstrap.
Xây dựng trang web đáp ứng của bạn
Bootstrap là một khung phía trước mạnh mẽ để xây dựng và tùy chỉnh một trang web thân thiện với thiết bị di động. Với Bootstrap, bạn không phải bắt đầu từ đầu hoặc từ bỏ quyền kiểm soát sự xuất hiện của trang web của bạn. Bắt đầu khám phá khung này ngay bây giờ để xem nó có khả năng của nó bao nhiêu.