- Tiện ích với Text
- Căn lề theo chiều đứng
- Thiết lập Margin, Padding
- Màu nền
- Thiết lập thuộc tính display
- Thiết lập thuộc tính float
- Thiết lập thuộc tính position
- Thiết lập border - bo viền khung
- Đổ bóng hình hộp
- Thiết lập chiều cao, chiều rộng
- Embeds - Nhúng Video YouTube
- FlexBox
breakpoint Trong Bootstrap
thiết kế các lớp CSS tương ứng với các màn hình tương ứng với các kích thước dưới: gồm màn hình nhỏ (576px), trung bình (768px), lớn (992px), rất lớn (1200px) - gọi chúng là các breakpoint (sử dụng media query để tạo CSS) với các ký hiệu trong lớp CSS tương ứng là: sm , md , lg , xl . Các ký hiệu {breakpoint} ở phần trình bày dưới bạn có thể thay thế bằng sm, md, log, xl hoặc để trống Ví dụ: text-md-right thì là căn lề về phải khi màn hình dưới 678px, text-sm-center căn giữa khi màn
hình dưới 576px theme-colors Các màu mặc định phối hợp để xây dựng nên Theme của Bootstrap gồm có các màu đặt theo tên gồm: primary , secondary , success , info , warning , danger , light , dark . Hãy nhớ tên này vì nó sử dụng trong nhiều class ví dụ như text-danger , bg-success , btn-success ... Các tiện tích trình bày Text.text-{breakpoint}-{left|right|center}
Đó là các lớp để căn lề trái, phải, giữa của dòng chữ (.text-right , .text-md-center ... )
.text-monospace
class thiết lập chữ hiện thị ở font monospace .text-justify
dãn đều dòng chữ .text-nowrap
Thiết lập dòng chữ không có chế độ wrap (không ngắt dòng) .text-truncate
Cắt chữ khi vượt quá chiều dài dòng .text-lowercase
Chuyển thành chữ thường .text-uppercase
Chuyển thành chữ in hoa .text-capitalize
In hoa ký tự đầu .font-weight-(light|normal|bold)
Thiết lập chữ mỏng (font-weight-light ), bình thường (font-weight-normal ), đậm .font-italic
Chữ nghiêng .text-(white|primary| secondary|success|info|warning|danger|
light|dark|
muted|
hide|
decoration-none|
text-break|
text-reset|
black-50
|white-50)
Thiết lập màu chữ như text-white , text-dark ... text-white-50 , một số điều khiển cách hiện thị như text-hide ẩn text, decoration-none hủy hiệu ứng trang trí (như chữ in), text-reset đưa về màu kế thừa mặc định .display-(1|2|3|4)
Sử dụng thiết lập tiêu đề lớn trong trang, có 4 kích thước như display-3 .lead
Làm nổi bật một đoạn văn (ví dụ tóm tắt nội dung) .mark
Đánh dấu một đoạn văn .small
Đánh dấu một đoạn văn có chữ nhỏ hơn .blockquote
Tạo một hiện thị trích dẫn .blockquote-footer
.list-unstyled
Đánh dấu ul, li bỏ kiểu trình bày danh sách .list-inline
Đánh dấu ul hiện thị dạng inline .list-inline-item
Đánh dấu li hiện thị dạng inline float left Ví dụ <p class="text-center text-md-right text-primary font-weight-bold font-italic text-uppercase">
Đây là dòng chữ Ví dụ
</p> Đoạn code trên thiết lập gồm: căn chữ ở giữa (text-center ) nhưng khi màn hình từ md trở đi căn chữ bên phải (text-md-right ), màu chữ primay, font chữ đậm, font chữ nghiêng, chuyển hết thành chữ in hoa, và kết quả là: Đây là
dòng chữ Ví dụ Căn lề theo chiều đứng các phần tử.align-{baseline|top|middle|bottom|text-bottom|text-top}
Với align-baseline đã thiết lập cơ bản mặc định của browser. Các lớp căn lề theo chiều đứng chỉ áp dụng cho các phần tủ inline , inline-block . inline-table và các cell trong bảng <p class="bg-secondary text-light text-center" style="line-height: 40px">
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>
</p> baseline top middle bottom text-top text-bottom Thiết lập margin và paddingCác lớp thiết lập margin là m{sides}-{size} hoặc m{sides}-{breakpoint}-{size}
Các lớp thiết lập padding là p{sides}-{size} hoặc p{sides}-{breakpoint}-{size} Trong đó: sides thay bằng t|l|r|b|x|y tương ứng với top, left, right, bottom, left-right, top-bottom. Nếu sides để trống nghĩa là thiết lập cho cả bốn phía (ví dụ m-0 , p-2 sizes thay bằng các số 0 1 2 3 4 5 hoặc auto để thiết lập kích thước (0, 0.25, 0.5, 1, 1.5, 3) rembreakpoint tương ứng với điểm chia màn hình sm , md , lg ,
xl hoặc để trống
Ví dụ px-md-4 thực hiện tạo padding cỡ 4 (1.5rem) cho cạnh trái, phải tương ứng màn hình md <div class="mx-auto p-1 bg-danger text-white text-center" style="width: 200px;">
Hộp này nằm ở giữa do mx-auto
</div> Hộp này nằm ở giữa do mx-auto Thiết lập màu nềnCó các lớp: bg-primary bg-secondary bg-success bg-info bg-warning bg-danger bg-light bg-danger bg-dark Thiết lập thuộc tính displayThuộc tính CSS display nhận các giá trị none,
inline, inline-block, block, table, table-cell, table-row, flex, inline-flex có thể thiết lập trong Bootstrap với các class có cấu trúc .d-{breakpoint}-{value} ví dụ .d-none , .d-sm-inline , .d-lg-flex ...
Thiết lập hiện thị phần tử dùng .visible Thiết lập ẩn phần tử dùng .invisible Thiết lập thuộc tính floatThuộc tính CSS float nhận các giá trị left, right, none có thể thiết lập trong Bootstrap với các class có cấu trúc .float-{breakpoint}-{value} ví dụ .float-none ,
.float-sm-right , .float-lg-left ...
Muốn hủy thuộc tính float của một phần tử dùng class clearfix Thiết lập thuộc tính positionĐó là các class: .position-(static|relative|absolute|fixed|sticky) , .fixed-top , .fixed-bottom Thiết lập thuộc borderCạnh được kẻ .border thiết lập kẻ viền cả bốn cạnh.border-top thiết lập kẻ viền cạnh trên.border-bottom thiết lập kẻ viền cạnh dưới.border-left thiết lập kẻ viền cạnh trái.border-right thiết lập kẻ viền cạnh phải
Màu
đường kẻ thiết lập bằng các class: .border-(primary|secondary|success|
danger|warning|info|light|dark|white) Góc thiết lập bo tròn sử dụng các class: .rounded bo tròn cả 4 góc.rounded-(left|top|right|bottom) bo tròn 2 cạnh phía trái, trên, phải, dưới.rounded-circle bán kính bo tròn thiết lập để biến hình vuông thành hình tròn.rounded-0 hủy bo tròn các góc
Đổ bóng hình hộp.shadow đổ bóng cỡ trung bình.shadow-sm đổ bóng cỡ nhỏ.shadow-lg đổ bóng cỡ lớnshadow-none bỏ đổ bóng
Thiết lập chiều
cao, chiều rộngw-25 w-50 w-75 w-100 w-auto để thiết lập chiều rộng theo phần trăm của chiều rộng phần tử cha, auto là tự động comw-100 thiết lập thuộc tính max-width: 100% h-25 h-50 h-75 h-100 h-auto để thiết lập chiều cao theo phần trăm của chiều cao phần tử cha, auto là tự động comh-100 thiết lập thuộc tính max-height: 100%
Nhúng VideoCách để nhúng Video đảm bảo tính năng responsive <div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item"
src="https://www.youtube.com/embed/xxxxx?rel=0" allowfullscreen></iframe>
</div> FlexBox với
BootstrapBootstrap triển khai theo cách phong phú hơn về flexbox, tuy nhiên cơ bản đều thiết lập các tính năng tiện ích của flexbox như nội dung trong CSS thông thường, nên cần thiết đọc hiểu CSS flexbox trước .flex trong Bootstrap là phần nhân quan trọng nhất nên hãy cố gắp hiểu thật tốt phần này
Phần tử chứa - kích hoạt có tính năng flexbox
Sử dụng các lớp: .d-flex hoặc .d-{breakpoint}-flex như .d-sm-flex , nếu áp dụng kiểu inline-flex thì sử dụng lớp .d-inline-flex hoặc .d-{breakpoint}-inline-flex <div class="d-flex">
<!--Code HTML-->
</div>
Phần tử chứa - thiết lập flex-wrap Như đã biết thuộc tính CSS flex-wrap nhận các giá trị nowrap , wrap , wrap-reverse gọi chúng là {wrap} . Trong Bootstrap các giá trị này thiết lập bàng lớp .flex-{breakpoints}-{wrap} như: .flex-nowrap , .flex-wrap , .flex-reverse .flex-sm-nowrap , .flex-lg-wrap , .flex-md-reverse ...
Ví
dụ .flex-wrap - phần tử con xuống dòng mới khi vượt kích thước phần tử chứa <div class="d-flex flex-wrap">
<div class="bg-primary p-2 m-2">PT1</div>
<div class="bg-primary p-2 m-2">PT2</div>
<div class="bg-primary p-2 m-2">PT3</div>
<div class="bg-primary p-2 m-2">PT4</div>
<div class="bg-primary p-2 m-2">PT5</div>
<div class="bg-primary p-2 m-2">PT6</div>
<div class="bg-primary p-2 m-2">PT7</div>
<div class="bg-primary p-2 m-2">PT8</div>
<div class="bg-primary p-2 m-2">PT9</div>
<div class="bg-primary p-2 m-2">PT10</div>
<div class="bg-primary p-2 m-2">PT11</div>
<div class="bg-primary p-2 m-2">PT12</div>
</div> PT1 PT2 PT3 PT4 PT5 PT6 PT7 PT8 PT9 PT10 PT11 PT12
Phần tử chứa - thiết lập hướng chính flex-direction Như đã biết hướng chính của flexbox nhận các giá trị: row , row-reverse , column , column-reverse gọi chúng là {direction} Để thiết lập các giá trị này cho phần tử dùng đến các thuộc tính:
.flex-{direction} hoặc .flex-{breakpoint}-{direction} như: .flex-row , .flex-column , .flex-column-reverse , .flex-row-reverse .flex-xs-row , .flex-sm-column , .flex-lg-column-reverse , .flex-md-row-reverse ...
Ví dụ .flex-column - đổi hướng chính thẳng đứng <div class="d-flex flex-wrap flex-column">
<div class="bg-primary p-2 m-2">PT1</div>
<div class="bg-primary p-2 m-2">PT2</div>
</div>
Phần tử chứa - đẩy phần tử con theo hướng chính justify-content Trong phần CSS flexbox, đã biết thuộc tính justify-content để đẩy các phần tử con về một phía nào đó theo hướng chính, nhận các giá trị flex-start , flex-end , center ,
space-around , space-between thì trong Bootstrap các giá trị này viết là start , end , center , around , between ký hiệu chúng là {values} Các thuộc tính thiết lập là: justify-content-{values} hoặc justify-content-{breakpoint}-{values} Ví dụ hướng chính là nằm ngang, thì .justify-content-end đẩy các phần tử con về cuối hàng <div class="d-flex justify-content-end">
<div class="bg-primary p-4 m-2">PT1</div>
<div class="bg-primary p-4 m-2">PT2</div>
</div>
Phần tử chứa - đẩy phần tử con theo hướng vuông góc align-items Trong CSS flexbox, khi sư dụng thuộc tính align-items là nhằm đẩy các phần tử
con theo hướng VUÔNG GÓC HƯỚNG CHÍNH Sử dụng các class .align-items-{values} hoặc .align-items-{breakpoints}-{values} trong đó values là các giá trị stretch , center , baseline , around , between Ví dụ hướng chính nằm ngang, thì align-items-center sẽ điều chỉnh phần tử con nằm giữa box theo phương đứng <div class="bg-warning d-flex align-items-center"
style="height: 100px">
<div class="bg-primary p-2 m-2">PT1</div>
<div class="bg-primary p-2 m-2">PT2</div>
</div> align-items-center đẩy phần tử xuống đáy box theo phương đứng, thử kết hợp với justify-content-center thì nó đẩy thêm nằm giữa theo phương ngang
<div class="bg-warning d-flex align-items-end justify-content-center"
style="height: 100px">
<div class="bg-primary p-2 m-2">PT1</div>
<div class="bg-primary p-2 m-2">PT2</div>
</div>
Phần tử chứa - căn chỉnh chi có nhiều hàng (cột)
align-content Khi phần tử chứa có .flex-wrap , nếu các phần tử con bị chia ra thành nhiều hàng (hoặc cột) thì lúc này có thể sử dụng đến các thuộc tính .align-content-{values} hoặc .align-content-{breakpoint}-{values} Với {values} là start , end , center , around , stretch Tác động của các lớp này tương tự như ví dụ trong phần FlexBox
Phần tử con - trôi theo hướng vuông góc
align-self Đây là cách thiết lập cấp độ phần tử con, thiết lập hiệu lực riêng cho phần tử con cụ thể, nó thiết lập nó trôi về phía nào theo hướng vuông góc với chính. Sử dụng class .align-self-{values} hoặc .align-self-{breakpoints}-{values} Với values là: start , end , center , baseline , stretch <div class="bg-warning d-flex align-items-sm-start" style="height: 100px">
<div class="bg-primary p-2 m-2 align-self-center">PT1</div>
<div class="bg-primary p-2 m-2 align-self-end">PT2</div>
<div class="bg-primary p-2 m-2 align-self-stretch">PT3</div>
<div class="bg-primary p-2 m-2">PT4</div>
</div>
Phần tử con - Fill Nếu các phần tử con trong .flex có lớp .flex-fill thì nó ép các phần tử con đó theo hướng chính kích
thước sẽ bằng nhau <div class="d-flex ">
<div class="bg-primary p-2 m-2 flex-fill ">PT1</div>
<div class="bg-primary p-2 m-2 flex-fill ">PT2</div>
<div class="bg-primary p-2 m-2 flex-fill ">PT3</div>
<div class="bg-primary p-2 m-2 flex-fill ">PT4</div>
</div>
Phần tử con - Grow Phần tử con kích hoạt với lớp .flex-grow-1 thì kích thước theo hướng chính của nó sẽ mở rộng tối đa kích thước có thể có trong phần tử chữa <div class="d-flex">
<div class="bg-primary p-2 m-2 flex-grow-1">PT1</div>
<div class="bg-primary p-2 m-2">PT2</div>
<div class="bg-primary p-2 m-2">PT3</div>
<div class="bg-primary p-2 m-2">PT4</div>
</div>
Phần tử con - đẩy phần tử bằng margin Nếu phần tử chứa có hướng chính nằm ngang, thì phần tử con nào có .mr-auto thì sẽ đẩy các phần tử bên phải nó trôi về phải của phần tử chứa, nếu có .ml-auto thì nó
đẩy các phần tử con bên trái nó trôi về bên trái phần tử chứa Nếu phần tử chứa có hướng chính thẳng đứng (.flex-column ) thì phần tử nào có .mb-auto thì nó sẽ đẩy các phần tử dưới nó về đáy của phần tử, nếu có .mt-auto sẽ đẩy phần tủ trên nó về phía trên phần tử chứa. <div class="d-flex">
<div class="bg-primary p-2 m-2">PT1</div>
<div class="bg-primary p-2 m-2 mr-auto">PT2</div>
<div class="bg-primary p-2 m-2">PT3</div>
<div class="bg-primary p-2 m-2">PT4</div>
</div>
Phần tử con - đổi thứ tự hiện thị FlexBox có thuộc tính order gán bằng một con số là thứ tự hiện thị phần tử. Đặc tính này cho phép đổi thứ tự hiện thị mà không cần
thay code HTML. Mặc định thứ tự hiện thị theo vị trí code HTML cái nào viết code trước thì hiện thị trước, tuy nhiên Bootstrap cho phép điều chỉnh bằng các lớp order-0 đến order-12 <div class="d-flex">
<div class="bg-primary p-2 m-2 order-2">PT1</div>
<div class="bg-primary p-2 m-2 order-3">PT2</div>
<div class="bg-primary p-2 m-2 order-1">PT3</div>
</div> |