Một số thủ thuật nhỏ trong phát triển layout bằng bootstrap

Bài này mình muốn giới thiệu một số thủ thuật nhỏ mình rút kinh nghiệm được trong quá trình sử dụng bootstrap để phát triển layout, tuy chỉ là những đoạn code nhỏ nhưng nếu không biết có thể mất khá nhiều thời gian để lục lọi trên google giống như mình

1. Mở sub menu khi hover chuột qua các parent menu.

- Bình thường khi sử dụng Navbar Menu của bootstrap, các sub menu được mở khi click vào parent menu

- Nếu muốn thay đổi kiểu mở menu mặc định này bằng cách hover chuột lên parent menu, các bạn sử dụng đoạn css dưới đây

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    margin-top: 0;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

- Có thể trong một số trường hợp, khi hover lên parent menu và chuyển sang sub menu thì nó bị mất, lúc đó các bạn cần giảm margin-top của sub menu là mọi chuyện sẽ ổn

.dropdown-menu{
  margin-top:-2px !important;
}

2. Mở chức năng click chuột trên parent menu.

- Bởi vì mặc định bootstrap quy định khi click chuột lên parent menu là sự kiện open sub menu. Vì vậy khi ta dùng cách mở sub menu bằng thuộc tính hover như ở trên thì khi click chuột vào parent menu sẽ không có tác dùng (Mặc dù ta có gán link ở parent menu đi nữa)

- Để khắc phục lỗi này ta chỉ cần thêm thuộc tính css disable vào như sau

<a class="dropdown-toggle disabled" href="http://thuyvk.com">Parent Menu<b class="caret"></b></a>

- Lúc đó khi click vào Parent Menu thì href sẽ có tác dụng. Code đầy đủ như sau

<ul class="nav">
    <li class="dropdown">
        <a class="dropdown-toggle disabled" href="http://thuyvk.com">
            Parent Menu<b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Sub Menu 01</a></li>
            <li><a href="#">Sub Menu 02</a></li>
        </ul>
    </li>
</ul>

3. Thay đổi chiều cao của navbar menu.

- Nếu các bạn sử dụng navbar mặc định của bootstrap làm menu cho website thì trong một số trường hợp sẽ nhận thấy height của navbar menu không phù hợp (Với mình là quá lớn). Và mình thực sự mất khá nhiều thời gian cho cái này.

- Để giảm chiều cao (Hoặc tăng) các bạn sử dụng đoạn css dưới đây

.navbar-header{
    height:40px !important;
}
.navbar-brand{
    font-size:12px !important;
    padding-top:10px !important; padding-bottom:10px !important;
    height:40px !important;
}
.navbar-nav > li > a {padding-top:10px !important; padding-bottom:10px !important;}
.navbar {min-height:40px !important}
.navbar-toggle{
    padding:5px !important;
}

4. Thay đổi css của table-striped

- Nếu sửa dụng table trong bootstrap, bạn sẽ thường xuyên thử dụng class table-striped để giúp lưới hiện thị rõ ràng hơn. Tuy nhiên background color mặc định cho class này là Gray. Để thay đổi màu lưới phù hợp với layout của bạn. Các bạn sử dụng đoạn css dưới đây

.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
  background-color: #fdf5c9 !important;
}

.table-striped tr td {
  border-top: dotted 1px #e6d890 !important;
}

  .table-striped tr td a {
    color: #f08c0b !important;
  }

5. Thay đổi css của table-hover

- Bạn có thể thay đổi background-color mặc định của bootstrap khi hover bằng đoạn css dưới đây

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
    background-color: #fff9d9 !important;
  }

6. Chia layout 5 column

- Trong Grid System của bootstrap mặc định chia ra 12 column nhỏ, tử đó ta có thể tùy chọn thành các layout từ 2, 3, 4, 6... column bằng cách sử dùng col-md-* tùy nhu cầu sử dụng. Tuy nhiên với layout yêu cầu 5 column sẽ không làm được theo cách thông thường. Để khắc phục vấn đề này các
bạn sửa dụng đoạn css sau đây

@media (min-width: 768px){
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2  {
        width: 20%;
        *width: 20%;
    }
}
@media (min-width: 1200px) {
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
        width: 20%;
        *width: 20%;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
        width: 20%;
        *width: 20%;
    }
}

HTML

<div class="row  fivecolumns">
            <div class="col-md-2">1</div>
            <div class="col-md-2">2</div>
            <div class="col-md-2">3</div>
            <div class="col-md-2">4</div>
            <div class="col-md-2">5</div>
</div>

 

Còn tiếp...

Related Post


Sử dụng date-picker trong bootstrap
Wednesday, May 21, 2014
Datepicker jquery plugin hiện tại rất nhiều và không khó để sử dụng, tuy nhiên với những bạn đang phát triển giao diện sử dụng framework bootstrap thì theo mình sử dụng date-picker này là đơn giản và hiệu quả nhất
Tạo trò chơi rắn săn mồi với HTML5 và jQuery
Saturday, April 26, 2014
Rắn săn mồi là một trò chơi đơn giản và khá thú vị trên các máy di động trước đây, với javascript & html5 chúng ta cũng có thể viết được trò chơi này trên web. Hôm nay mình muốn giới thiệu một đoạn code nhỏ của trò chơi này mà mình tham khảo được trên mạng
Search

Đăng ký nhận bài mới


Category

Blog Archive