Bootstrap Tips
Column sizes
REF: https://getbootstrap.com/docs/3.3/css/#grid
xs= extra small screens (mobile phones), <768pxsm= small screens (tablets), ≥768pxmd= medium screens (medium desktops),≥992pxlg= large screens (large desktops), ≥1200px
You should usually classify a div using multiple column classes so it behaves differently depending on the screen size (this is the heart of what makes bootstrap responsive). eg: a div with classes col-xs-6 and col-sm-4 will span half the screen on the mobile phone (xs) and 1/3 of the screen on tablets(sm).
<div class="col-xs-6 col-sm-4">Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div class="col-xs-6 col-sm-8">Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet) -->
NOTE: Grid classes for a given screen size apply to that screen size and larger unless another declaration overrides it (i.e. col-xs-6 col-md-4 spans 6 columns on xs and sm, and 4 columns on md and lg, even though sm and lg were never explicitly declared)
NOTE: if you don’t define xs, it will default to col-xs-12 (i.e. col-sm-6 is half the width on sm, md and lg screens, but full-width on xs screens)
- Chủ yếu định nghĩa
.col-md-dành cho desktop trở lên (tức ngầm apply chocol-lg) và.col-xs-dành cho phone và tablets (tức ngầm apply chocol-sm)
Alignments
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
Transformation
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
Text colors
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
Background colors
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
Float
<div class="pull-left">...</div>
<div class="pull-right">...</div>
Caret
<span class="caret"></span>
Close button
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
Center
<div class="center-block">...</div>
Clear fix
<div class="clearfix">...</div
Images
<img src="..." class="img-responsive" alt="Responsive image">
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
Accordion (Hugo version)
<style>
.panel-title {
position: relative;
cursor: pointer;
}
.panel-title::after {
content: "\f106";
color: #333;
top: -2px;
right: 0px;
position: absolute;
font-family: 'Line Awesome Free';
font-weight: 900;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}
.panel-title.collapsed::after {
content: "\f107";
}
</style>
<div class="panel-group" id="parent">
{{range $index, $element := .items}}
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title collapsed" data-parent="#parent" data-toggle="collapse" data-target="#panel-{{$index}}">{{$element.title}}</h4>
</div>
<div id="panel-{{$index}}" class="panel-collapse collapse">
<div class="panel-body">{{$element.text}}</div>
</div>
</div>
{{end}}
</div>
NOTES:
- Khai báo thuộc tính
data-parentcho các panel con trỏ đếnidcủa panel group nếu muốn tại một thời điểm chỉ show maximum 1 panel