Một số tricks bootstrap có thể bạn chưa biết

Bootstrap 3 rất tuyệt vời. Nó không chỉ cung cấp tất cả những điều cơ bản của một front-end framework, mà còn có rất nhiều điểm mạnh khác để giup chúng ta đẩy nhanh tốc độ phát triển, những điều này sẽ giúp chúng ta nhanh chóng tạo ra một những sản phẩm được xây dựng trên một nền tảng front-end cực kỳ mạnh mẽ và đáng tin cậy cho một ứng dụng lâu dài. Bài viết này sẽ giới thiệu một số thủ thuật của bootstrap mà có thể bạn chưa biết hoặc chưa bao giờ dùng, tuy nhiên, mỗi dòng code, mỗi tính năng đều có ý đồ của người viết, nếu chúng ta vận dụng đúng lúc đúng chỗ sẽ tiết kiệmd dược rất nhiều thời gian phát triển.

Loại bỏ padding từ các grid column mặc định của bootstrap

.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

và khi sử dụng:

<div class="row no-gutter">
    <div class="col-md-4">
        ...
    </div>
    <div class="col-md-4">
        ...
    </div>
    <div class="col-md-4">
        ...
    </div>
</div>

Tùy chỉnh độ rộng của container

@media (min-width: 768px) {
    .container-small {
        width: 300px;
    }
    .container-large {
        width: 970px;
    }
}
@media (min-width: 992px) {
    .container-small {
        width: 500px;
    }
    .container-large {
        width: 1170px;
    }
}
@media (min-width: 1200px) {
    .container-small {
        width: 700px;
    }
    .container-large {
        width: 1500px;
    }
}

Tuy nhiên với màn hình desktop 1200px thì container-large sẽ bị tràn ra ngoài màn hình, để fix nó thì ta add thêm thuộc tính max-width

.container-small, .container-large {
    max-width: 100%;
}

Sử dụng các classs heading để tiết kiệm thời gian và giữ nguyên ngữ nghĩa

<h1 class="h2">Heading 1 that looks like Heading 2</h1>
<h2 class="h4">Heading 2 that looks like Heading 4</h2>
<h3 class="h1">Heading 3 that looks like Heading 1</h3>

Embed Video giữ nguyên tỉ lệ khung hình

Khi mà Bootstrap 3.2 release, các helper class đã được thêm vào nhằm hỗ trợ cho việc nhúng các iframe như video trên youtube hay vimeodễ dàng hơn trong khi vẫn duy trì tỷ lệ khung hình nhất định. Nó rất dễ sử dụng, chỉ cần thêm mã sau vào markup của bạn:

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>
</div>

Responsive Utility Classes

Trong bootstrap ta thường sử dụng các class này để hide và show các element ở các khung hình khác nhau: .visible-xs, .visible-sm, .visible-md, và .visible-lg mà ta thường rất ít khi để ý đến kiểu hiển thị cụ thể của element ví dụ như là inline, inline-block. Thực tế từ bootstrap 3.2 ta đã có thể sử dụng các class helper này rồi. Ví dụ ở màn hình lớn ta có thể hiển thị là block, nhưng màn hìnn nhỏ, thay vì ẩn đi, ta muốn nó inline thì sẽ ko phải style lại nữa mà chỉ cần dùng class .víible-xs-inline, cách sử dụng:

/* With * being xs, sm, md, or lg */
.visible-*-block {}
.visible-*-inline {}
.visible-*-inline-block {}

Trên đây là một vài tricks nhỏ trong bootstrap 3, mong sẽ hữu ích cho các bạn. Mặc dù bootstrap 4 beta đã ra đời được một thời gian rồi, tuy nhiên, với những người đã làm việc với bootstrap 3 từ lâu, ưa thick sự ổn định và sự thấu hiểu nó hoặc vì những lý do nào khác chúng ta chưa sẵn sàng cho bootstrap 4 để đưa vào dự án thực tế thì bootstrap 3.x vẫn là sự lựa chọn an toàn nhất theo ý kiến cá nhân mình. Thanks.