============
== vtranq ==
============

Bootstrap Tips

Column sizes

REF: https://getbootstrap.com/docs/3.3/css/#grid

  • xs = extra small screens (mobile phones), <768px
  • sm = small screens (tablets), ≥768px
  • md = medium screens (medium desktops),≥992px
  • lg = 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 cho col-lg) và .col-xs- dành cho phone và tablets (tức ngầm apply cho col-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">&times;</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-parent cho các panel con trỏ đến id của panel group nếu muốn tại một thời điểm chỉ show maximum 1 panel