Một số HTML hay dùng

• Tạo giao diện form nhập liệu Bootstrap
• Cách hiển thị hộp thoại chọn trong bootstrap

Một số mẫu html bootstrap hay dùng khi thiết kế web và app web.

1. Nút lệnh (button) Bootstrap
   
2. Badge Bootstrap trong HTML
   
3. Tạo nhóm tab group Bootstrap
   
4. Hộp thoại tìm kiếm bằng HTML
5. Nút đổ xuống và có thêm nút nạp lại
   
   

---

 

1. Nút lệnh Bootstrap

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

* Button dạng link
<a class="btn btn-primary" href="#" role="button">Link</a>
Button dạng viền
<button type="button" class="btn btn-outline-primary">Primary</button>

* Một số button khác
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>

** Nút nạp lại

 <button type="button" class="btn btn-danger btn-sm d-inline"><i class="fas fa-sync-alt"></i> Nạp lại</button>
 / d-inline để nằm trên 1 dòng nếu có nhiều thẻ

** Nút thoát
 <button id="btClose" type="button" class="btn btn-warning"><i class="fas fa-times-circle"></i> Thoát</button>

** Nút có số lượng kèm theo

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>

 

 2. Badge trong HTML

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

Thêm badge-pill để bo thêm góc tròn
<span class="badge badge=pill badge-danger">Danger</span>


Badge link
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>

Nút lệnh có badge
<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>
 

3. Tạo nhóm tab group Bootstrap

<div class="card mb-3">
<div class="card-header">
    <i class="fas fa-bars"></i> MENU CHỨC NĂNG
</div>
<div class="card-body">
--- HTML
</div><!-- card-body -->
</div>

 

4. Hộp thoại tìm kiếm bằng HTML

<div class="form-inline p-2 fixed-top bg-light">
<input class="form-control" id="input_filter" type="search" placeholder="Tìm kiếm..."/>
<button type="button" class="btn btn-danger btTimLai"><i class="fas fa-trash"></i></button>
<span id="linkNhomClick"></span>

<span style="font-size:1.2em" class="badge badge-primary badge-pill " id="tinhtrangchonhang">1</span>
<button type="button" class="btn btn-link btTatCa">[Tất cả]</button>
</div>

<script>
$("#input_filter").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#dsMacHang .itemHangHoa").filter(function() {
          let get_ten=$(this).find(".item_tenhanghoa").text();  
          let get_nhom=$(this).find(".item_nhom").text();  
         // alert(get_nhom);
          
         
         $(this).toggle(  get_ten.toLowerCase().indexOf(value) > -1  ||  get_nhom.toLowerCase().indexOf(value) > -1  )
});
});
//$("#input_filter").focus();
  $('#tinhtrangchonhang').click(function(){
      //  alert('test');
     //  $(this).attr('XXXX');   // tác động thẻ được click
     
     $("#dsMacHang .itemHangHoa").filter(function() {
          let get_sl=$(this).find(".txtSoLuong_Chon").val();  
          $(this).toggle(  get_sl >0 )        
});    
    });
</script>

5. Nút đổ xuống và có thêm nút nạp lại

<div>
<select id="txtTim_HopDong" name="txtTim_HopDong"  ng-change="loadData()" ng-model="tim_sohopdong" style="width:150px;" class="d-inline select2"  >
 <option  value="">-- Chọn --</option>
    <option ng-repeat="x in ds_sohd" value="{{x.So}}">{{x.So}}</option>
</select>
 <button type="button" class="btn btn-danger btn-sm d-inline" ng-click="loadData()"><i class="fas fa-sync-alt"></i> Nạp lại</button>
<script>
$(document).ready(function(){
    $('#txtTim_HopDong').select2();
});
</script>
</div>