CSS định nghĩa sẵn trong bootstrap 3

22/12/2016 Nguyễn Trung Hiếu

Chương này chúng ta sẽ đi tìm hiểu những css được định nghĩa sẵn trong BS và cách sử dụng chúng.

ở đây mình sẽ đưa thêm file style.css của mình vào để định nghĩa các css do mình tự định nghĩa hoặc định nghĩa lại các css của bootstrap và các bạn chú ý là file này năm sau file css của bootstrap thì các định nghĩa lại mới có tác dụng (mức độ ưu tiên của các css sẽ được tính từ trên xuống, để rõ hơn có thể pm hoặc nhắn tin cho mình)

Thống số mặc định trong BS3 font-size : 14px

  1. CSS bao bọc nội dung container

Là một class trong css nó giúp bao bọc nội dung của trang khi bạn sử dụng bạn chỉ cần gọi ra, có hai tùy chọn cho việc bao nội dung ví dụ như :

 

<div class="container"> ... </div>

<div class="container-fluid"> ... </div>

 Container-fluid sẽ tạo ra chiều rộng rộng hơn với container các bạn quan sát hình dưới

css trong bootstrap

  1. Hệ thống lưới

BS cung cấp cho chúng ta hệ thống lưới các khổ size của màn hình hiển thị để web của chúng ta thay đổi cho phù hợp với chế độ hiển thị

Thiết bị điện thoại thì chiều ngang lơn nhất nhỏ hơn 768px

Như máy tính bảng chiều ngang (width) nhỏ nhất 768px

Máy tính bàn chiều ngang nhỏ nhất 992px

Máy tính bàn chiều ngang nhỏ nhất 1200px (kích thước này thường thường áp dụng cho các thiết bị HD và full hd hoặc lớn hơn)

BS chia màn hình ra thành 12 cột với các cột cho các màn hình hiển thị như sau

Điện thoại (<768px)

Máy tính bảng (≥768px)

Máy để bàn (≥992px)

Máy để bàn (≥1200px)

Tự động

750px

970px

1170px

.col-xs-

.col-sm-

.col-md-

.col-lg-


Các mã class là .col-xs- hay là .col-sm- là các mã cột cho hiển thị các màn hình, mình sẽ ví dụ một temp để các bạn hình dung ra các cột.

<section class="container bg-view">
	<div class="col-sm-1">1</div>
	<div class="col-sm-1">2</div>
	<div class="col-sm-1">3</div>
	<div class="col-sm-1">4</div>
	<div class="col-sm-1">5</div>
	<div class="col-sm-1">6</div>
	<div class="col-sm-1">7</div>
	<div class="col-sm-1">8</div>
	<div class="col-sm-1">9</div>
	<div class="col-sm-1">10</div>
	<div class="col-sm-1">11</div>
	<div class="col-sm-1">12</div>
</section>

Màn hình của mình là màn hình 1366x768 nhé, class bg-view là class mình định nghĩa css riêng của mình để nó hiển thị ra đường viền để các bạn dễ quan sát.

Ví dụ như mình sẽ xây dựng một temp web sử dụng col trong BS

Trên máy tính:

bootstrap 3 responsive

Trên điện thoại:

bootstrap 3 responsive

Code:

<header class="container bg-view"><h1>Tren</h1></header>
		
<nav class="container bg-view"><h2>Danh muc</h2></nav>

	<section class="container bg-view">
	<div class="col-sm-3">
		<h2>Danh muc</h2>
	</div>
	<div class="col-sm-9">
		<h2>Noi dung</h2>
	</div>
</section>

<footer class="container bg-view"><h2>Duoi</h2></footer>

Khi về các kích thước màn hình như mã col gắn kèm thì các cột tự động chuyển về chế độ hiển thị hàng (row) cột nào trước thì nằm trên.

Các cột ví dụ như col-sm theo bảng kích thước trên là chiều ngang (width) >=768px thì khi màn hình kích thước nhỏ hơn 750px sẽ chuyển về chế độ hàng.

Nếu col-md thì width >= 992px thì khi màn hình kích thước nhỏ hơn 970px thì sẽ chuyển về hàng.

Các bạn cũng có thể kết hợp các mã col với nhau, ví dụ như khi về màn hình 992px thì hiển thị 4 cột vì nó to, nhưng khi về màn hình 768px thì hiển thị 3 cột.

<div class=”col-sm-3 col-md-4”>
…
</div>
<div class=”col-sm-3 col-md-4”>
…
</div>
<div class=”col-sm-3 col-md-4”>
…
</div>
  • Định vị trí cho các cột (col offset)

Như trên các bạn đã thao tác với các cột hiển thị và phân chia nhưng các bạn muốn đặt vị trí cho nó, mình ví dụ như hàng của bạn có 2 cột một cột có độ rộng là 3 và một cột có độ rộng là 5 tổng số cột sử dụng mới chỉ là 8 còn dư 4 và chúng ta muốn các cột của chúng ta nằm ở giữa site thì cần phải sử dụng tới col offset

Chưa offset

offset trong bootstrap

Đã offset

offset trong bootstrap

ở đây mình offset 2 cột thì vị trí bắt đầu sẽ tính từ cột thứ 3

<section class="container bg-view">
	<div class="col-sm-3 col-sm-offset-2">
		TEST offset
	</div>
	<div class="col-sm-5">
		TEST offset
	</div>
</section>
  • Định vị trí cho các cột (sử dụng push, pull)

Ví dụ yêu cầu của chúng ta như sau:

Mình chia 3 cột làm danh mục

Chia 9 cột để hiển thị nội dung

Như ví dụ ở trên thì sẽ là

<div class=”col-sm-3”></div>
<div class=”col-sm-9”></div>

Như vậy thì khi hiển thị chế độ điện thoại thì cột danh mục sẽ nằm trên và cột nội dung sẽ nằm dưới, nếu như danh mục của chúng ta ít thì không sao nhưng nhiều thì người dùng sẽ phải vuốt một hồi mới tới phần nội dung để đọc.

Bài toán đặt ra là làm sao cột danh mục vẫn bên trái mà nó hiển thị trên điện thoại lại nằm ở dưới. ok BS cung cấp cho chúng ta cơ chế push và pull (đẩy và kéo :D)

Bây giờ mình đảo lại 2 cái cột lớn kia

<div class=”col-sm-9”></div>
<div class=”col-sm-3”></div>

Như này thì khi hiển thị trên điện thoại sẽ đúng yêu cầu nhưng hiển thị máy tính thì chưa ok, bây giời mình ới sử dụng đến đẩy và kéo, mình sẽ đẩy cột 9 sang phải 3 cột và kéo cột 3 về 9 cột thì cột 3 sẽ làm ở đúng ví trí của cột 9 và cột 9 sẽ nằm sang phải 3 cột code như sau

<section class="container bg-view">
	<div class="col-sm-9 col-sm-push-3">
		<h2>Noi dung</h2>
	</div>
	<div class="col-sm-3 col-sm-pull-9">
		<h2>Danh muc</h2>
	</div>	
</section>

Các bạn cũng có thể lồng các cột vào với nhau ví dụ trong cột được chia sẽ lại có 12 cột nhỏ

<div class=”col-sm-9”>
	<div class=”col-sm-3”>
	</div>

<div class=”col-sm-9”>
	</div>
</div>
  • BS cũng cung cấp cho chúng ta hàng (row)

Class row sẽ giúp chúng ta phân hàng, nếu chúng ta ko sử dụng phân hàng thì khi chia cột các cột sẽ chạy tràn lên nhau ví dụ như hình dưới

row trong bootstrap

Ví dụ ta chỉ yêu cầu 3 cột nhưng nếu ko phân hàng thì cột số 4 sẽ chạy và lấp vào chỗ hụt trong một số trường hợp nội dung của các cột khiến cho chiều cao của chúng không bàng nhau, ví du sau có phần hàng

row trong bootstrap

<div class="col-sm-">
	<div class="row">
		<div class="col-sm-4">...</div>
		<div class="col-sm-4">...</div>
		<div class="col-sm-4">...</div>
	</div>
				
	<div class="row">
		<div class="col-sm-4">...</div>
		<div class="col-sm-4">...</div>
		<div class="col-sm-4">...</div>
	</div>
</div>
  • Sử dụng clearfix

Một số trường hợp khi sử dụng các thuộc tính css như pull (float trong css) chúng ta cũng cần xóa đi để tránh các lớp của chúng ta bị nhảy khỏi vị trí

Sử dung:

<span class=”clearfix”></span>
  • lead tạo style nổi bật cho đoạn văn bản

<p class="lead">Tự học thiết kế web</p>
  • CSS định dạng văn bản

<p class="text-left">Căn trái.</p>

<p class="text-center">Căn giữa.</p>

<p class="text-right">Căn phải.</p>

<p class="text-justify">Căn đều.</p>

<p class="text-nowrap">không tràn.</p>

 

<p class="text-lowercase">Lowercased text.</p>

<p class="text-uppercase">Uppercased text.</p>

<p class="text-capitalize">Capitalized text.</p>

Thẻ tạo trợ giúp tags

<abbr title="Ngôn ngữ siêu văn bản" class="initialism">HTML</abbr>

Thẻ blockquote

 

<blockquote>

            <p>Tìm hiểu bootstrap</p>

</blockquote>

Hoặc

 

<blockquote class=”blockquote-reverse”>

            <p>Tìm hiểu bootstrap</p>

</blockquote>

Code trên sẽ tạo ra đường thẳng bên trái và bên phải nội dung các bạn có thể copy vào temp để thử hiển thị

  • Các thẻ danh sách

<ul class="list-unstyled">

            <li>...</li>

</ul>

Class list-unstyled sẽ bỏ đi các list style trước danh sách, tương tự như css list-style: none;

Chuyển danh sách về nằm trên một hàng

<ul class="list-inline">

            <li>...</li>

</ul>

 

  • Viết miêu tả

 

<dl class="dl-horizontal">

            <dt>...</dt>

            <dd>...</dd>

</dl>

Mô tả trong bootstrap

  • Hiển thị code

Thẻ <pre></pre>

Thẻ <code></code>

Thẻ <kbd></kbd>

Thẻ <var></var>

Thẻ <samp></samp>
  • Các thẻ định dạng bảng

Các bạn để ý theo định dạng mặc định thì table có style cung khá làm mấy nhưng BS đã giúp chúng ta không phải quan tâm khi css cho table nữa các bạn chỉ cần thêm những class mà BS xây dựng sẵn vào và sử dụng.

Bảng mặc định

table trong bootstrap

Code

 

<table class=”table”>

            …

</table>

Nếu các bạn muốn khi di chuột vào tạo ra sự kiện thay đổi mầu cho từng hàng (row) của bảng thì bổ sung thêm class “table-hover”

<table class="table table-hover">

            <thead>

                        <tr>

                                    <th>ID</th>

                                    <th>Họ tên</th>

                                    <th>Giới tính</th>

                                    <th>Ngày sinh</th>

                                    <th>Chức vụ</th>

                                    <th>Phòng ban</th>

                        </tr>

            </thead>

            <tbody>

                        <tr>

                                    <td>1</td>

                                    <td>Minh Thanh</td>

                                    <td>Nam</td>

                                    <td>2/2/2000</td>

                                    <td>Nhân viên</td>

                                    <td>IT</td>

                        </tr>

                        <tr>

                                    <td>1</td>

                                    <td>Minh Thanh</td>

                                    <td>Nam</td>

                                    <td>2/2/2000</td>

                                    <td>Nhân viên</td>

                                    <td>IT</td>

                        </tr>

                        <tr>

                                    <td>1</td>

                                    <td>Minh Thanh</td>

                                    <td>Nam</td>

                                    <td>2/2/2000</td>

                                    <td>Nhân viên</td>

                                    <td>IT</td>

                        </tr>

                        <tr>

                                    <td>1</td>

                                    <td>Minh Thanh</td>

                                    <td>Nam</td>

                                    <td>2/2/2000</td>

                                    <td>Nhân viên</td>

                                    <td>IT</td>

                        </tr>

                        <tr>

                                    <td>1</td>

                                    <td>Minh Thanh</td>

                                    <td>Nam</td>

                                    <td>2/2/2000</td>

                                    <td>Nhân viên</td>

                                    <td>IT</td>

                        </tr>

            </tbody>

</table>

 

Tạo border cho bảng các bạn thêm class “.table-bordered”

Làm cho bảng padding nhỏ lại thêm class “.table-condensed”

  • Tạo mầu cho các hàng (row)

Trong BS định nghĩa sẵn các dải mầu để khi cần chúng ta chỉ mang ra sử dụng, đối với table có bảng class sau

Class

Description

.active

Thể hiện mầu sắc khi dê chuột vào hàng hoặc các ô

.success

Thể hiện mầu sắc khi thực thi thành công một công việc nào đó

.info

Thể hiện mầu sắc thông tin

.warning

Thể hiện mầu sắc cảnh báo

.danger

Thể hiện mầu sắc lỗi hoặc nguy hiểm

table trong bootstrap

<tr class="active">
	<td>1</td>
	<td>Minh Thanh</td>
	<td>Nam</td>
	<td>2/2/2000</td>
	<td>Nhân viên</td>
	<td>IT</td>
</tr>
<tr class="success">
	<td>1</td>
	<td>Minh Thanh</td>
	<td>Nam</td>
	<td>2/2/2000</td>
	<td>Nhân viên</td>
	<td>IT</td>
</tr>
<tr class="info">
	<td>1</td>
	<td>Minh Thanh</td>
	<td>Nam</td>
	<td>2/2/2000</td>
	<td>Nhân viên</td>
	<td>IT</td>
</tr>
<tr class="warning">
	<td>1</td>
	<td>Minh Thanh</td>
	<td>Nam</td>
	<td>2/2/2000</td>
	<td>Nhân viên</td>
	<td>IT</td>
</tr>
<tr class="danger">
	<td>1</td>
	<td>Minh Thanh</td>
	<td>Nam</td>
	<td>2/2/2000</td>
	<td>Nhân viên</td>
	<td>IT</td>
</tr>
  • Tạo bảng hiển thị trên các thiêt bị (responsive table)

Cấu trúc code

<div class="table-responsive">

            <table class="table">

                        ...

            </table>

</div>

 

  • Định dạng Form trong BS

Các nút nhấn hay các ô nhập liệu (input) các thành phần của form cũng được BS định nghĩa chúng ta cũng chỉ cần mang ra và sử dụng

Form trong bootstrap

<form action="" method="POST" class="form-horizontal" role="form">
	<div class="form-group">
		<legend>Dang nhap</legend>
	</div>

	<div class="form-group">
		<label for="input-id" class="col-sm-2">Tai khoan</label>
		<div class="col-sm-6">
			<input type="text" class="form-control">
		</div>
	</div>

	<div class="form-group">
		<label for="input-id" class="col-sm-2">Mat khau</label>
		<div class="col-sm-6">
			<input type="text" class="form-control">
		</div>
	</div>

	<div class="form-group">
		<div class="col-sm-10 col-sm-offset-2">
			<button type="submit" class="btn btn-primary">Dang nhap</button>
		</div>
	</div>
</form>

Các bạn chú ý đến các class trong ví dụ trên đó là cấu trúc của form theo chiều ngang, nếu form của các bạn là trên một hàng (inline) thì class là “.form-inline”

<form action="" method="POST" class="form-inline" role="form">
	<div class="form-group">
		<legend>Dang nhap</legend>
	</div>

	<div class="form-group">
		<label for="input-id">Tai khoan</label>
		<input type="text" class="form-control" placeholder="Tai khoan" >
	</div>

	<div class="form-group">
		<label for="input-id">Mat khau</label>
		<input type="text" class="form-control" placeholder="Mat khau" >
	</div>

	<div class="form-group">
		<button type="submit" class="btn btn-primary">Dang nhap</button>
	</div>
</form>

Các bạn chú ý là cách code 2 form là khác nhau nhé. Trước tiền là thêm class vào thẻ form sau đó là tạo ra các form-group và tạo các tiêu đề cho input, thẻ placeholder là thuộc tính tạo text hiển thị mờ mờ trong input.

Thêm các addon vào các input các bạn xem hình dưới để dễ hình dung nhé

form trong bootstrap

Code:

<form action="" method="POST" class="form-horizontal" role="form">
	<div class="form-group">
		<legend>Dang ky</legend>
	</div>

	<div class="form-group">
		<label for="input-id" class="col-sm-3">Tai khoan</label>
		<div class="col-sm-6">
			<input type="text" class="form-control">
		</div>
	</div>

	<div class="form-group">
		<label for="input-id" class="col-sm-3">Mat khau</label>
		<div class="col-sm-6">
			<input type="text" class="form-control">
		</div>
	</div>

	<div class="form-group">
		<label for="input-id" class="col-sm-3">Avatar</label>
		<div class="col-sm-6">
			<div class="input-group">
		      	<input type="text" class="form-control" id="exampleInputAmount" placeholder="Avata">
		      	<div class="input-group-addon"><span class="glyphicon glyphicon-folder-open"></span></div>
		    </div>
	    </div>
	</div>

	<div class="form-group">
		<button type="submit" class="btn btn-primary">Dang nhap</button>
	</div>
</form>
  • Thẻ textarea

<textarea class="form-control" rows="3"></textarea>

Các bạn để ý chúng ta thêm class “.form-control” vào các thẻ để sử dụng css của BS

  • Checkbox và radio

Những class sử dụng: .disabled, .radio, .radio-inline, .checkbox, checkbox-inline

checkbox, radio trong bootstrap

Code

 

<div class="checkbox">

            <label>

            <input type="checkbox" value="">

            Nam

            </label>

</div>

<div class="checkbox disabled">

            <label>

            <input type="checkbox" value="" disabled>

            Nữ

            </label>

</div>

 

<div class="radio">

            <label>

                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>

                Tốt

            </label>

</div>

<div class="radio">

            <label>

                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">

                Bình thường

            </label>

</div>

<div class="radio disabled">

            <label>

                <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>

                Chưa tốt

            </label>

</div>

Hiển thị trên một hàng

<div class="checkbox-inline">

            <input type="checkbox" value=""> Nam

</div>

<div class="checkbox-inline">

            <input type="checkbox" value="" disabled> Nữ

</div>

 

<div class="radio-inline">

            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Tốt

</div>

<div class="radio-inline">

            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Bình thường

</div>

<div class="radio-inline">

            <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> Chưa tốt

</div>

 

  • Select

<select class="form-control">

            <option>1</option>

            <option>2</option>

            <option>3</option>

            <option>4</option>

            <option>5</option>

</select>
  • Trạng thái khóa control – Disabled

Câc bạn thêm thuộc tính Disabled vào control muốn khóa

  • Trạng thái chỉ đọc – Readonly

Các bạn thêm thuộc tính Readonly vào control muốn người dùng chỉ được phép đọc

  • Tạo nội dung mô tả về các input - .help-block

Đôi khi các bạn muốn người dùng biết các nhập liệu của một trường thông tin nào đó ví dụ mật khẩu tối đa 20 ký tự và tối thiệu một ký tự thì các bạn có thể dùng đến class “.help-block”

Ví dụ:

<p class=”help-block“>mật khẩu tối đa 20 ký tự </p>
  • Thay đổi mầu sắc cho các form-group

Khi chúng ta muốn nhấn báo cho người dùng biết những trường thông tin nào đáng chú ý hay quan trọng chúng ta sẽ thay đổi màu của nó các bạn xem hình và code bên dưới

checkbox, radio trong bootstrap

Code

<div class="form-group has-success">
  	<label class="control-label" for="inputSuccess1">Hoàn thành</label>
  	<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  	<span id="helpBlock2" class="help-block">Thông tin họ tên có số ký tự tối đa 35 ký tự</span>
</div>
<div class="form-group has-warning">
  	<label class="control-label" for="inputWarning1">Thông tin cảnh báo</label>
  	<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  	<label class="control-label" for="inputError1">Thông tin lỗi không hợp lệ</label>
  	<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  	<div class="checkbox">
	    <label>
	      	<input type="checkbox" id="checkboxSuccess" value="option1">
	      	Thông tin hợp lệ
	    </label>
  	</div>
</div>
<div class="has-warning">
  	<div class="checkbox">
	    <label>
	      	<input type="checkbox" id="checkboxWarning" value="option1">
	      	Thông tin cảnh báo
	    </label>
  	</div>
</div>
<div class="has-error">
  	<div class="checkbox">
	    <label>
	      	<input type="checkbox" id="checkboxError" value="option1">
	      	Thông tin lỗi
	    </label>
  	</div>
</div>
  • Các icon thông báo trạng thái

icon trong bootstrap

 

<div class="form-group has-success has-feedback">

            <label class="control-label" for="inputSuccess2">Hợp lệ</label>

            <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">

            <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>

            <span id="inputSuccess2Status" class="sr-only">(success)</span>

</div>

<div class="form-group has-warning has-feedback">

            <label class="control-label" for="inputWarning2">Cảnh báo</label>

            <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">

            <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>

            <span id="inputWarning2Status" class="sr-only">(warning)</span>

</div>

<div class="form-group has-error has-feedback">

            <label class="control-label" for="inputError2">Lỗi</label>

            <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">

            <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>

            <span id="inputError2Status" class="sr-only">(error)</span>

</div>
  • Kích thước của các form-control

form size trong bootstrap

Code

 

<input class="form-control input-lg" type="text" placeholder=".input-lg">

<input class="form-control" type="text" placeholder="Default input">

<input class="form-control input-sm" type="text" placeholder=".input-sm">

 

<select class="form-control input-lg">...</select>

<select class="form-control">...</select>

<select class="form-control input-sm">...</select>

Mặc định các control sẽ có chiều ngang bằng với các cột mà nó trực thuộc vì vậy nếu muốn thay đổi chiều ngang của nó các bạn thu nhỏ cột vào là được.

  • Nút Button

Mặc định chúng ta cài đặt như sau

 

<a class="btn btn-default" href="#" role="button">Nút</a>

<button class="btn btn-default" type="submit">Lưu dữ liệu</button>

<input class="btn btn-default" type="button" value="Input">

<input class="btn btn-default" type="submit" value="Submit">

Tạo ra các nút với nhiều mầu khác nhau

button trong bootstrap

Code

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

Kích thước các nút nhấn

 

<button type="button" class="btn btn-primary btn-lg">Nút to</button>

<button type="button" class="btn btn-default btn-lg">Nút to</button>

 

<button type="button" class="btn btn-primary">Nút bình thường</button>

<button type="button" class="btn btn-default">Nút bình thường</button>

 

<button type="button" class="btn btn-primary btn-sm">Nút nhỏ</button>

<button type="button" class="btn btn-default btn-sm">Nút nhỏ</button>

 

<button type="button" class="btn btn-primary btn-xs">Nút nhỏ hơn</button>

<button type="button" class="btn btn-default btn-xs">Nút nhỏ hơn</button>

BS còn một số class nhỏ như mình ko hay dùng đến để các bạn đỡ phải nhớ nhiều nếu cần các bạn có thể vào trang chủ BS tìm hiểu thêm.

  • CSS image (Responsive)

Để hình ảnh hiển thị tốt trên các thiết bị các bạn chỉ cần sử dụng class “.img-responsive”

Code

<img src="..." class="img-responsive" alt="Responsive image">

Các style img khác mà BS xây dựng sẵn cho chúng ta

Thumb trong bootstrap

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
  • Mầu văn bản

BS cung cấp các mầu cơ bản như sau

Mầu văn bản trong bootstrap

Code

<p class="text-muted">Tự học web</p>
<p class="text-primary">Tự học web</p>
<p class="text-success">Tự học web</p>
<p class="text-info">Tự học web</p>
<p class="text-warning">Tự học web</p>
<p class="text-danger">Tự học web</p>
  • Mầu nền văn bản

Cũng tương tự như mầu chữ nhưng class cấu trúc là “.bg-primary …”

Code

<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 nhanh trong BS

Đôi khi chúng ta cũng cần phải sử dụng float như css, bây giờ chúng ta chỉ cần gọi ra là ok

Ví dụ:

<div class”pull-left”>
	…
</div>
<div class”pull-right”>
	…
</div>

Đi cùng với float thì cũng cần có clear đó là class “.clearfix”

Ví dụ:

<div class=”clearfix”></div>
  • Ẩn hiện lớp

Code

 

<div class="show">...</div>

<div class="hidden">...</div>

Hoặc căn giữa khối

<div class="center-block">...</div>
  • Ẩn hiện khi thay đổi kích thước hiển thị

Đôi khi chúng ta muốn hiển thị những lớp ở màn hình rộng và ẩn khi ở màn hình hẹp thì các các bạn sử dụng class sau (mình lấy thông tin trực tiếp từ BS)

 

Extra small devicesPhones (<768px)

Small devicesTablets (≥768px)

Medium devicesDesktops (≥992px)

Large devicesDesktops (≥1200px)

.visible-xs-*

Visible

Hidden

Hidden

Hidden

.visible-sm-*

Hidden

Visible

Hidden

Hidden

.visible-md-*

Hidden

Hidden

Visible

Hidden

.visible-lg-*

Hidden

Hidden

Hidden

Visible

.hidden-xs

Hidden

Visible

Visible

Visible

.hidden-sm

Visible

Hidden

Visible

Visible

.hidden-md

Visible

Visible

Hidden

Visible

.hidden-lg

Visible

Visible

Visible

Hidden

 

Group of classes

CSS display

.visible-*-block

display: block;

.visible-*-inline

display: inline;

.visible-*-inline-block

display: inline-block;

 

Như vậy là chúng ta đã đi hết phần CSS tất nhiên mình ko nếu chi tiết toàn bộ những gì BS có mà mình mình chỉ nếu những phần thường hay sử dụng, tiện ích và cần thiết đối với các bạn nhất.

Tag: css trong bootstrapđịnh dạng html trong bootstrapfloat trong bootstraptable trong bootstrapform trong bootstrapmầu chữ trong bootstrapmầu nền trong bootstrap

Đang phát triển ...

Bài viết liên quan

Phần 5. Màu sắc văn bản trong Bootstrap 4

Bootstrap 4 xây dựng sẵn những lớp cho phép chúng ta có thể dùng để định nghĩa “màu sắc” cho văn bản trong trang web.

Phần 4: Văn bản trong Boostrap

Trong bài này, chúng ta sẽ học đến cách thiết lập mặc định cho phong cách văn bản trong Bootstrap.

Phần 3: Hệ thống lưới nâng cao Bootstrap

Trong phần này, các bạn tiếp tục tìm hiểu các lớp lưới khác trong Bootstrap để thực hiện việc phân vùng cho các giao diện phức tạp hơn.

Phần 2: Hệ thống lưới trong Bootstrap 4

Nội dung của phần này là về hệ thống lưới được sử dụng trong Bootstrap.

Phần 1: Giới thiệu Bootstrap 4

Bootstrap là 1 framework JavaScript, CSS và HTML miễn phí và phổ biến nhất trong việc thiết kế giao diện web đáp ứng trên di động.

Cài đặt và sử dụng Bootstrap 3

Để sử dụng được bootstrap chúng ta cần cầu hình cài đặt đưa các file thư viện của bootstrap vào dự án web của chúng ta

Giới thiệu về bootstrap (BS)

Bootstrap là gì: bootstrap là  Html, css, js được xây dựng sẵn để sử dụng trong các dự án phát triển web, các trang web đáp ứng lại các kích thước màn hình hiển thị.a

Tấn công ransomware cực lớn trên toàn cầu, tải về bản vá lỗi ngay

Tấn công ransomware cực lớn trên toàn cầu, tải về bản vá lỗi ngay

Cuộc tấn công vào NHS đã sử dụng một dạng ransomware có tên Wanacryptor và nhắm mục tiêu vào hàng nghìn tổ chức ở 74 quốc gia. Ransomware là một dạng tấn công mạng có liên quan đến việc các hacker nắm quyền kiểm soát máy tính hoặc thiết bị di động và yêu cầu đòi tiền chuộc. Bằng nhiều cách, những kẻ tấn công tải phần mềm độc hại vào thiết bị và mã hóa thông tin của nạn nhân.

Kỹ thuật tìm kiếm và thay thế từ cơ bản đến nâng cao trong MS Office (Word)

Kỹ thuật tìm kiếm và thay thế từ cơ bản đến nâng cao trong MS Office (Word)

Trong Word nói riêng, Office nói chung, có lẽ ai cũng biết chức năng tìm kiếm và thay thế nội dung văn bản, nhưng ngoài ra, còn nhiểu chức năng khác trong hộp thoại tìm kiếm và thay thế mà không phải ai cũng biết để sử dụng. Trong đó có tìm kiếm và thay thế định dạng, sử dụng các ký hiệu đại diện, các ký tự đặc biệt… 

Bài 6: Thủ thuật outlook 2010

Bài 6: Thủ thuật outlook 2010

Bài viết giới thiệu đến các bạn một số thủ thuật được dùng trong outlook 2010, để giúp công việc của các bạn được dễ dàng hơn.

Bài 5: Quản lý các thông tin trong  outlook 2010

Bài 5: Quản lý các thông tin trong outlook 2010

Bài viết giới thiệu về phương pháp quản lý thông tinn trong outlook 2010. Chúng ta hãy cùng tìm hiểu xem có điểm gì khác và nổi bật so với outlook 2007

Bài 4: Sử dụng lịch làm việc một cách hiệu quả outlook 2010

Bài 4: Sử dụng lịch làm việc một cách hiệu quả outlook 2010

Để công việc của đạt hiệu quả cao hơn, chúng ta hãy cùng nhau tìm hiểu cách sử dụng lịch làm việc một cách hiệu quả hơn trong outlook 2010

Bài 3: Quản lý hộp thư của bạn về dung lượng và lưu trữ outlook 2010

Bài 3: Quản lý hộp thư của bạn về dung lượng và lưu trữ outlook 2010

Bài viết sau đây sẽ giới thiệu về mục quản lý hộp thư của bạn về dung lượng và lưu trữ trong microsoft outlook 2010.

Hàm SLEEP trong PHP

Hàm SLEEP trong PHP

Có những lúc trong công việc lập trình ta cần mã tạm dừng theo một thời gian định trước thì trong php có hỗ trợ hàm sleep để các bạn làm điều này.

Hàm Rand trong PHP

Hàm Rand trong PHP

Đôi lúc chúng ta lập trình cần đến những con số sinh ngẫu nhiên vào những công việc khách nhau hôm này mình xin giới thiệu với mọi người hàm sinh số ngẫu nhiên trong PHP

Bài 9: Giới thiệu lập trình hướng đối tượng trong PHP (OOP)

Bài 9: Giới thiệu lập trình hướng đối tượng trong PHP (OOP)

Các bạn tự học PHP nên biết về lập trình hướng đối tượng trong PHP, kỹ thuật lập trình hỗ trợ công nghệ đối tượng

Bài 8: Hàm có sẵn thông dụng trong PHP

Bài 8: Hàm có sẵn thông dụng trong PHP

Hàm thông dụng trong php cần biết, các bạn mới bắt đầu lên nắm rõ ý nghĩa cấu trúc cách dùng những hàm này để bổ trợ kiến thức sau này

Bài 7: Hàm trong PHP

Bài 7: Hàm trong PHP

Hàm do người sử dụng định nghĩa cho phép bạn xử lý những tác vụ thường lặp đi lặp lại trong ứng dụng. cách khai báo, cú pháp của hàm trong php