Chủ Nhật, 29 tháng 3, 2015

Hướng dẫn sửa lỗi Port của XAMPP

Bạn đang làm web, cần một server ảo trên máy, rồi bạn chọn XAMPP.
Nhưng khi cài đặt xong thì bị lỗi như bên dưới :
Error: Apache shutdown unexpectedly.
23:32:55 [Apache] This may be due to a blocked port, missing dependencies,
23:32:55 [Apache] improper privileges, a crash, or a shutdown by another method.
23:32:55 [Apache] Press the Logs button to view error logs and check
23:32:55 [Apache] the Windows Event Viewer for more clues
23:32:55 [Apache] If you need more help, copy and post this
23:32:55 [Apache] entire log window on the forums
Không sau đâu, đây là lỗi do đụng cổng 80, có thể do một chương trình nào đó chiếm cổng 80 nên mới gây ra lỗi.

Giải pháp : Đổi cổng khác cho XAMPP thôi !


Chi tiết đổi cổng XAMPP

Mở XAMPP lên và bấm Config của dòng Apache :
Sau đó chọn dòng đầu tiên, Apache (httpd.conf) :
 Kế tiếp là đổi cổng cho XAMPP, bạn bấm Ctrl + F tìm đến80 (cổng mặc định của XAMPP), rồi thay thế toàn bộ cổng 80 thành một cổng khác, ví dụ mình thay thành cổng 2015 :
 Cuối cùng là Save và chạy lại XAMPP. 
Chúc bạn thành công !

PHP - Toán tử

Trong PHP, toán tử được chia làm các nhóm sau :
  • Toán tử số học
  • Toán tử gán
  • Toán tử so sánh
  • Toán tử tăng/giảm

Toán tử số học

Trong PHP, các toán tử số học được dùng để thực hiện các phép tính như cộng, trừ, nhân, chia và nhiều hơn nữa.
Toán tử Tên Ví dụ Kết quả
+ Cộng $x + $y Tổng của $x và $y
- Trừ $x - $y Hiệu của $x và $y
* Nhân $x * $y Tích của $x và $y
/ Chia $x / $y Thương của $x và $y
% Chia lấy dư $x % $y Phần còn lại của $x và $y
** Lũy thừa $x * $y Lũy thừa của $x mũ $y
Ví dụ :


Toán tử gán

Phép gán Ví dụ Diễn giải
= $x = $y Gán giá trị biến $y cho biến $x
+= $x += $y Phép cộng, tương tự như $x = $x + $y
-= $x -= $y Phép trừ, tương tự như $x = $x - $y
*= $x *= $y Phép nhân, tương tự như $x = $x * $y
/= $x /= $y Phép chia, tương tự như $x = $x / $y
%= $x %= $y Phép lấy phần dư, tương tự như $x = $x % $y
Ví dụ :

Toán tử so sánh

Các toán tử so sánh được dùng để sô sánh các 2 giá trị, bao gồm số và chuỗi :
Toán tử Tên Ví dụ Kết quả
== Bằng $x == $y Trả về true nếu $x bằng $y
!= Khác $x != $y Trả về true nếu $x khác $y
> Lớn hơn $x > $y Trả về true nếu $x lón hơn $y
>= Lớn hơn hoặc bằng $x >= $y Trả về true nếu $x lón hơn hoặc bằng $y
< Nhỏ hơn $x < $y Trả về true nếu $x nhỏ hơn $y
<= Lớn hơn hoặc bằng $x <= $y Trả về true nếu $x nhỏ hơn hoặc bằng $y
Ví dụ :

Toán tử tăng/giảm

Toán tử Tên Diễn giải
--$x Tăng trước Lấy giá trị hiện tại của $x tăng lên 1 rồi mới thực hiện phép toán
$x-- Tăng sau Thực hiện phép toán rồi mới tăng giá trị của $x lên 1
++$x Tăng trước Lấy giá trị hiện tại của $x giảm đi 1 rồi mới thực hiện phép toán
$x++ Tăng sau Thực hiện phép toán rồi mới giảm giá trị của $x đi 1
Bạn xem ví dụ bên dưới để thấy rõ hơn :

Thứ Năm, 26 tháng 3, 2015

PHP - Cú pháp

Basic PHP

  • PHP script có thể được đặt ở bất cứ đâu trong file
  • PHP script bắt đầu bằng <?php và kết thúc với ?>
Ví dụ :
<?php
echo "Hello World !";
?>
Kết quả :


Comments trong PHP

Ghi chú trong PHP là một dòng không được hiển thị ra màn hình, nó chỉ hiển thị trong phần mã nguồn. Nó được dùng để :
  • Giải thích những gì bạn đang làm (cần thiết).
  • Nhắc nhỏ bản thân về những gì mình đã làm.
PHP hỗ trợ các loại sau :
<?php
// This is a single-line comment

# This is also a single-line comment

/*
This is a multiple-lines comment block
that spans over multiple
lines
*/

// You can also use comments to leave out parts of a code line
$x = 5 /* + 15 */ + 5;
echo $x;
?>
Kết quả :

PHP Case Sensitivity

Trong PHP, các từ khóa (như if, else, while ...), classes, functions và user-defined functions không phân biệt hoa thường. Ví vụ :
Tuy nhiên, các biến trong PHP thì lại phân biệt hoa thường. Xem ví dụ bên dưới để thấy rõ hơn : 

<?php
$color = "red";
echo "My car is " . $color . "-----";
echo "My house is " . $COLOR . "-----";
echo "My boat is " . $coLOR ;
?>
Như bạn thấy, trình duyệt báo lỗi Undefined variable: COLORUndefined variable: coLOR. Lỗi này là do 2 biến $COLOR$coLOR chưa được khai báo. Ở dòng 1 hiển thị bình thường vì biến $color đã được khai báo và gán 1 chuỗi bằng "red".

Thứ Ba, 24 tháng 3, 2015

Hướng dẫn cài đặt XAMPP

Tại sao lại chọn XAMPP ?

  • XAMPP là một chương trình tạo máy chủ Web (Web Server) được tích hợp sẵn Apache, PHP, MySQL, FTP Server, .... và các công cụ khác như phpMyadmin.
  • XAMPP có chương trình quản lý khá tiện lợi, cho phép chủ động bật tắt hoặc khởi động lại các dich vụ máy chủ bất kỳ lúc nào.
  • Hiện tại XAMPP có phiên bản mới nhất là 1.8.3 (tại thời điểm viết bài).

Tải XAMPP ở đâu ?

Bạn truy cập vào trang chủ của XAMPP để tải về phiên bản mới nhất và tương thích với hệ điều hành của bạn. Link trang chủ của XAMPP : https://www.apachefriends.org/download.html

Cách cài đặt

Sau khi tải file cài đặt về, chạy nó và chọn Next.
Ở phần chọn Components, bạn chọn các ứng dụng cần xài, nếu bạn không rành thì cứ để mặc định của chương trình (chọn hết), sau đó bấm Next.
Ở phần này, bạn chon đường dẫn lưu XAMPP, mặc định là lưu ở ổ C:\xampp , bạn nên để mặc định.
Kế tiếp, bạn bỏ chọn "Learn more about Bitnami for XAMPP". Và ấn Next 2 lần nữa để bắt đầu quá trình cài đặt XAMPP.
Sau khi cài đặt xong, ấn Finish để kết thúc quá trình cài đặt. Khởi dộng XAMPP lên sẽ có giao diện như bên dưới.
Bấm Start ở dòng Apache MySQL để chạy server.

Truy cập vào địa chỉ http://localhost nó sẽ trang giới thiệu XAMPP.
OK, tới đây là đã cài đặt thành công XAMPP rồi đó.
Lưu ý : Để chạy được các project web, bạn cần copy project vào thư mục htdocs với đường dẫn :
C:\xampp\htdocs

PHP - Giới thiệu

Tại sao nên chọn PHP ?

  • PHP là một ngôn ngữ lập trình kịch bản cho máy chủ và là một công cụ mạnh mẽ để tạo sự linh hoạt và tương tác với các trang web.
  • PHP được sử dụng rộng rải và nó hoàn toàn miễn phí.
  • PHP có thể chạy trên các nền tảng khác nhau (Windows, Linux, Unix, Mac OS X, ...).
  • PHP tương thích với hầu hết các máy chủ hiện nay (Apache, IIS, ...).
  • PHP hỗ trọ một loạt các cơ sở dữ liệu.

PHP có thể làm những gì ?


  • PHP có thể tạo ra nội dung động
  • PHP có thể tạo, mở, đọc, viết, xóa và đóng tập tin trên máy chủ
  • PHP có thể thu thập dữ liệu mẫu
  • PHP có thể gửi và nhận cookie
  • PHP có thể thêm, sửa, xóa dữ liệu trong cơ sở dữ liệu
  • PHP có thể được sử dụng để kiểm soát người dùng truy cập
  • PHP có thể mã hóa dữ liệu
  • Và còn nhiều cái có thể nữa, bạn từ từ khám phá nhé !


Một file PHP có thể chứa những gì ?

  • File PHP có thể chứa văn bản, HTML, CSS, JavaScript và code PHP.
  • Code PHP được thực hiện trên máy chủ và kết quả được trả về cho trình duyệt như HTML.
  • File PHP có đuôi mở rộng là .php.

Làm sao để chạy file PHP ?

Để chạy được file php, bạn cần một server chạy trên máy tính. Mình đề nghị sử dụng XAMPP, vì giao diện trực quan, dể sử dụng. Bạn có thể tại tại đây.
Bạn nên thao khảo bài viết Hướng dẫn cài đặt XAMPP.

Bạn cần chuẩn bị gì trước khi bắt đầu ?

Trước khi tìm hiểu PHP, bạn nên biết một số kiến thức cơ bản về :
  • HTML
  • CSS
  • JavaScript
Bạn có thể tham khảo các bài viết khác trong blog.

Hello World !

Trước khi tìm hiểu một ngôn ngữ lập trình nào đó, thường thì ta nên bắt đầu với "Hello World !" , dưới đây là đoạn mã hiển thị một chuỗi :
<?php
echo "Hello World !";
?>
Kết quả :

Thứ Năm, 19 tháng 3, 2015

Bootstrap - Ẩn/hiện nội dung

Trong bài viết có quá nhiều nội dung, bạn muốn ẩn các thông tin chưa cần thiết để hiển thị tránh tình trạng làm rối mắt người xem. Bootstrap JS có một vài class hỗ trợ làm điều đó :
  • .collapse : ẩn nội dung
  • .collapse in : hiện nội dung
  • .collapsing : được thêm vào khi bắt đầu và xóa khi kết thúc
Trước khi sử dụng, bạn cần thêm các thư viện vào thẻ <head> để có thể chạy :

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"></link>


Ví dụ : khi bắt đầu, nội dung được ẩn đi, còn nếu muốn hiển thị trước thì sửa .collapse thành .collapse in
    

Đây là nội dung.

Trong đoạn code trên, data-target="#demo" dùng để chỉ ra thẻ html nào có id="demo" sẽ bị tác động.

Chia từng phần

Trong trường hợp bạn muốn chia từng phần với nhiều nội dung khác nhau, bạn có thể dùng cách sau :
Nội dung 1.
Nội dung 2.
Nội dung 3.
Đây là code cho hiển thị trên :





Nội dung 1.







Nội dung 2.







Nội dung 3.




Đơn giản quá phải không, chỉ vài lệnh gọi class là bạn đã có thể ẩn hiện nội dung tùy thích, bạn có thể tham khảo các bài viết khác để tạo giao diện đẹp hơn, linh hoạt hơn.
Tham khảo

Bootstrap - Tạo slide ảnh


Bootstrap cung cấp một số class để tạo slide ảnh.
Ví dụ :


Trong đó :

  • Để tạo 1 slide ảnh, bạn cần một id (trong ví dụ này id = "myCarousel")
  • class = "slide carousel" chỉ rằng đây là <div> chứa các ảnh
    • Thuộc tính data-ride="carousel" để tạo hiệu ứng chuyển động vòng của ảnh
  • Class .carousel-indicators quy định số ảnh có trong slide
    • Thuộc tính data-target xác định nơi hiển thị hình ảnh
    • Thuộc tính .data-slide-to xác định chỉ số hiển thị theo thứ tự
  • Class .carousel-inner quy định các slide trong <div>
    • Class .item định nghĩa nội dung của slide trong <div>, có thể là văn bản hoặc hình ảnh
    • Class .active phải được thêm vào để có thể chạy được slide
  • Hai bên slide có 2 nút prev/next giúp di chuyển qua lại giữa trong ảnh trong slide
  • Class .left, .right, .carousel-control giúp hiển thị các nút bên trái, bên phải
    • Thuộc tính data-slide (data-slide="prev" / data-slide="next") để di chuyển bằng tay khi click vào
  • Để thêm chú thích cho mỗi ảnh, cần thêm <div class = "carousel-caption"> trong mỗi <div class = "item">
Như vậy, thật đơn giản để tạo một slide ảnh với sự hỗ trợ của bootstrap.

Bootstrap - Forms

Bootstrap's Default Settings

Form tự động nhận một vài kiểu của bootstrap : các thẻ <input>, <textarea><select> với class .form-control có chiều rộng là 100%.

Bootstrap Form Layouts

Bootstrap có 3 loại layouts:
  • Vertical form (mặc định)
  • Horizontal form
  • Inline form
Các luật chuẩn của 3 loại layouts trên :
  • Luôn sử dụng <form role="form"> (giúp cải thiện khả năng xem cho người dùng)
  • Bao bên ngoài <label>, <input>... bởi <div class="form-group"> (tối ưu khoảng cách)
  • Thêm class .form-control tới các thẻ <input>, <textarea><select>

Bootstrap Vertical Form (default)

Ví dụ tạo một form với 2 trường nhập, 1 checkbox và 1 nút submit :















Bootstrap Inline Form

Trong inline form, các thẻ là inline, canh trái và các nhãn nằm bên cạnh.
Lưu ý : chỉ áp dụng với màn hình từ 768px wide trở lên
Quy tắc bổ sung cho các hình thức inline : Thêm lớp .form-inline vào thẻ <form>.















Nếu bạn không dùng các label cho thẻ <input>, bạn sẽ gặp rắc rối về hiển thị. Bạn có thể ẩn các label với tất cả các thiết bị, ngoại trừ khi xem màn hình bằng cách sử dụng class .sr-only.















Bootstrap Horizontal Form

Để tạo một form ngang :
  • .form-horizontal vào thẻ <form>
  • .control-label vào tất cả các thẻ <label>
Sử dụng lưới để sắp xếp các label và các thẻ trong form trong bố cục ngang.
































Thật dể dàng để tùy biến một form nhập liệu, vừa có hiệu ứng đẹp, vừa có bố cục được sắp xếp thích nghi.

Bootstrap - Phân trang

Nếu như bạn có một website với nhiều nội dung được hiển thị, khi đó cần phân trang cho các nội dung đó, tránh việc hiển thị quá nhiều nội dung trên cùng một trang.
Một .pagination của bootstrap được cung cấp để tạo ra giao diện phân trang đẹp mắt.



Active State

Khi thêm .active để xác định cho người dung biết mình đang ở trang thứ mấy :



Disabled State

Khi thêm .disabled để vô hiệu hóa link tương ứng được gắn :



Pagination Sizing

Khi thêm .pagination-lg để có kích thước lớn hơn hoặc .pagination-sm để có kích thước nhỏ hơn.





Tạo nút previous/next

Nút previous/next giúp người dùng di chuyển về trang trước đó hoặc đi đến trang kế tiếp trong danh sách phân trang.


Nếu bạn muốn đặt danh sách phân trang nằm giữa 2 nút previous/next, thì cần thêm .previous.next



Như vậy, chỉ cần vài class là bạn có thể tạo ra một dãy số với khung và hiệu ứng đẹp mắt.

Thứ Tư, 18 tháng 3, 2015

Bootstrap - Button Groups

Bootstrap cho phép ghép các nút khác nhau lại thành một nhóm như hình bên dưới :

Sử dụng thẻ <div>.btn-group để tạo một nhóm button :








Để thay đổi kích thước buttons trong nhóm, sử dụng .btn-group-*, có 4 loại kích thước :
  • lg
  • md
  • sm
  • xs







Vertical Button Groups

Bootstrap cũng hỗ trợ nhóm button theo chiều dọc, sử dụng .btn-group-vertical để hiển thị theo chiều dọc :







Nesting Button Groups & Drop Down Menus

Bạn có thể lồng các nhóm button lại với nhau và tạo ra menu xổ xuống :








Thật dể dàng để tạo ra một menu xổ đơn giản với bootstrap.

Bootstrap - Buttons

Trong bootstrap, button có 7 loại khác nhau, bao gồm :

  • .btn-default
  • .btn-primary
  • .btn-success
  • .btn-info
  • .btn-warning
  • .btn-danger
  • .btn-link
Ví dụ :









Các class của button có thể được đặt trong các thẻ <a>, <button> hoặc <input> :

Link Button



Link Button

Size Buttons

Button trong bootstrap có 4 kích thước như sau :
  • .btn-lg
  • .btn-md
  • .btn-sm
  • .btn-xs
Ví dụ :






Block Level Buttons

Nếu bạn muốn kích thước của buttons bằng với kích thước phần tử chứa nó, bạn có thể gọi .btn-block. Ví dụ :

<div> chứa button, sử dụng .btn-block

<div> chứa button, không sử dụng .btn-block

Active/Disabled Buttons

Button có thể được cài đặt ở trạng thái có thể click (active) hoặc không thể click (disabled) khi gọi 2 class tương ứng bên dưới :
  • .active

  • .disabled
  • Ví dụ :




    Trên đây là tất cả các kiểu và trạng thái của button trong bootstrap, thật dể dàng khi tạo ra một button với kích thước và màu sắc đẹp.

    Thứ Hai, 2 tháng 3, 2015

    Bootstrap - Table

    Table trong bootstrap bao gồm một lớp đệm và một đường chỉ ngang để phân biệt giữa các dòng.
    Thêm .table vào bảng :
    Ví dụ :

























    Firstname Lastname Email
    John Doe john@example.com
    Mary Moe mary@example.com
    July Dooley july@example.com

    Kết quả :
    Firstname Lastname Email
    John Doe john@example.com
    Mary Moe mary@example.com
    July Dooley july@example.com

    Tạo nền xen kẻ

    Sử dụng lớp .table-striped để tạo nền xen kẻ trong bảng :
    Ví dụ :
     
























    Firstname Lastname Email
    John Doe john@example.com
    Mary Moe mary@example.com
    July Dooley july@example.com

    Kết quả :
    Firstname Lastname Email
    John Doe john@example.com
    Mary Moe mary@example.com
    July Dooley july@example.com

    Tạo đường viền


    Sử dụng lớp .table-bordered để tạo đường viền trong bảng :
    Ví dụ :

























    Firstname Lastname Email
    John Doe john@example.com
    Mary Moe mary@example.com
    July Dooley july@example.com

    Kết quả :
    Firstname Lastname Email
    John Doe john@example.com
    Mary Moe mary@example.com
    July Dooley july@example.com

    Tạo hiệu ứng hover

    Sử dụng lớp .table-hover để tạo hiệu ứng hover, khi di chuột vào một dòng trong bảng thì dòng đó sẽ được tô nền, có thể sử dụng .active để làm nổi bậc một dòng mặc định :
    Ví dụ :

























    Firstname Lastname Email
    John Doe john@example.com
    Mary Moe mary@example.com
    July Dooley july@example.com

    Kết quả :
    Firstname Lastname Email
    John Doe john@example.com
    Mary Moe mary@example.com
    July Dooley july@example.com

    Tạo bảng đặc

    Sử dụng lớp .table-condensed làm cho bảng nhỏ gon hơn bằng cách bỏ bớt các cell padding :
    Ví dụ :

























    Firstname Lastname Email
    John Doe john@example.com
    Mary Moe mary@example.com
    July Dooley july@example.com

    Kết quả :
    Firstname Lastname Email
    John Doe john@example.com
    Mary Moe mary@example.com
    July Dooley july@example.com

    Tạo bảng đa màu theo ngữ cảnh

    Các lớp màu nền theo ngữ cảnh có thể được sử dụng trong thẻ <tr> hoặc thẻ <td>.
    • .success
    • .danger
    • .info
    Ví dụ :
     
























    Firstname Lastname Email
    John Doe john@example.com
    Mary Moe mary@example.com
    July Dooley july@example.com

    Kết quả :
    Firstname Lastname Email
    John Doe john@example.com
    Mary Moe mary@example.com
    July Dooley july@example.com

    Bootstrap - Mặc định thiết đặt

    Trong Bootstap mặc định font-size là 14px, với line-height là 1.428
    Đều đó được áp dụng cho thẻ <body> và tất cả các đoạn văn.
    Dưới đây là những điểm khác biệt của Bootstrap.

    <h1> - <h6>

    Theo mặc định, Bootstrap dùng để tạo kiểu cho tiêu đề html (h1 đến h6) như sau :
    <h1>h1 Bootstrap heading (36px)</h1>
    <h2>h2 Bootstrap heading (30px)</h2>
    <h3>h3 Bootstrap heading (24px)</h3>
    <h4>h4 Bootstrap heading (18px)</h4>
    <h5>h5 Bootstrap heading (14px)</h5>
    <h6>h6 Bootstrap heading (12px)</h6>

    h1 Bootstrap heading (36px)

    h2 Bootstrap heading (30px)

    h3 Bootstrap heading (24px)

    h4 Bootstrap heading (18px)

    h5 Bootstrap heading (14px)
    h6 Bootstrap heading (12px)

    <small>

    Trong Bootstrap thẻ <small> được dùng để tạo ra hiệu ứng chữ nhỏ :
    Ví dụ :


    <h1>h1 Bootstrap heading <small>Effect <small></small>



    <h2>h2 Bootstrap heading <small>Effect <small></small></h2>



    <h3>h3 Bootstrap heading <small>Effect <small></small></h3>



    <h4>h4 Bootstrap heading <small>Effect <small></small></h4>



    <h5>h5 Bootstrap heading <small>Effect <small></small></h5>


    <h6>h6 Bootstrap heading <small>Effect <small></small></h6>

    <h1>h1 Bootstrap heading <small>Effect <small></small>

    <h2>h2 Bootstrap heading <small>Effect <small></small></h2>

    <h3>h3 Bootstrap heading <small>Effect <small></small></h3>

    <h4>h4 Bootstrap heading <small>Effect <small></small></h4>

    <h5>h5 Bootstrap heading <small>Effect <small></small></h5>
    <h6>h6 Bootstrap heading <small>Effect <small></small></h6>

    <mark>

    Thẻ <mark> trong Bootstrap dùng để tô nền cho phần chữ được áp dụng như sau :
    Ví dụ :
    Cách sử dụng thẻ <mark><mark></mark>
    Cách sử dụng thẻ <mark>

    <abbr>

    Thẻ <abbr> trong Bootstrap dùng để tạo chú thích cho một từ nào đó :
    Ví dụ :
    Cách sử dụng thẻ <abbr>
    Cách sử dụng thẻ <abbr>

    <blockquote>

    Thẻ <blockquote> trong Bootstrap dùng để tạo trích dẫn như sau :
    Ví dụ :

    Hướng dẫn sử dụng thẻ <blockquote>






    từ hailong's blog



    Hướng dẫn sử dụng thẻ <blockquote>


    từ hailong's blog
    Để 'hailong's blog' hiển thị bên phải bạn thêm .pull-right :
    Hướng dẫn sử dụng thẻ <blockquote>


    từ hailong's blog








    <dl>

    Thẻ <dl> trong Bootstrap dùng để tạo danh sách : Ví dụ :


    Cà phê

    - cà phê đá

    - cà phê sữa

    Trà

    - Lipton

    - Atiso


    Cà phê
    - cà phê đá
    - cà phê sữa
    Trà
    - Lipton
    - Atiso

    <code>

    Thẻ <code> trong Bootstrap dùng để làm nổi bậc các thẻ html : Ví dụ :
    Đây là các thẻ trong html: span, section, and div
    Đây là các thẻ trong html: span, section, and div

    Màu sắc của chữ và nền

    Bootstrap cung cấp một số class màu sắc cho văn bản :
    • .text-muted
    • .text-primary
    • .text-success
    • .text-info
    • .text-warning
    • .text-danger
    Ví dụ :
    đây là.text-muted
    đây là .text-primary
    đây là .text-success
    đây là .text-info
    đây là .text-warning
    đây là .text-danger
    Bootstrap cung cấp một số class màu sắc cho nền văn bản :
    • .bg-primary
    • .bg-success
    • .bg-info
    • .bg-warning
    • .bg-danger
    Ví dụ :
    đây là .bg-primary
    đây là .bg-success
    đây là .bg-info
    đây là .bg-warning
    đây là .bg-danger

    Bootstrap - Mặc định thiết đặt

    Trong Bootstap mặc định font-size là 14px, với line-height là 1.428
    Đều đó được áp dụng cho thẻ <body> và tất cả các đoạn văn.
    Dưới đây là những điểm khác biệt của Bootstrap.

    <h1> - <h6>

    Theo mặc định, Bootstrap dùng để tạo kiểu cho tiêu đề html (h1 đến h6) như sau :
    Ví dụ :

    <h1>h1 Bootstrap heading (36px)</h1>
    <h2>h2 Bootstrap heading (30px)</h2>
    <h3>h3 Bootstrap heading (24px)</h3>
    <h4>h4 Bootstrap heading (18px)</h4>
    <h5>h5 Bootstrap heading (14px)</h5>
    <h6>h6 Bootstrap heading (12px)</h6>


    <small>

    Trong Bootstrap thẻ <small> được dùng để tạo ra hiệu ứng chữ nhỏ :
    Ví dụ :

    <h1>h1 Bootstrap heading <small>Effect <small></small>
    </h1>
    <h2>h2 Bootstrap heading <small>Effect <small></small></h2>
    <h3>h3 Bootstrap heading <small>Effect <small></small></h3>
    <h4>h4 Bootstrap heading <small>Effect <small></small></h4>
    <h5>h5 Bootstrap heading <small>Effect <small></small></h5>
    <h6>h6 Bootstrap heading <small>Effect <small></small></h6>


    <mark>

    Thẻ <mark> trong Bootstrap dùng để tô nền cho phần chữ được áp dụng như sau :
    Ví dụ :

    <p>Cách <mark>sử dụng</mark> thẻ <mark>&lt;mark&gt;</mark></p>


    <abbr>

    Thẻ <abbr> trong Bootstrap dùng để tạo chú thích cho một từ nào đó :
    Ví dụ :

    <p>Cách <abbr title="hướng dẫn sử dụng thẻ <abbr>">sử dụng</abbr> thẻ <abbr>&lt;abbr&gt;</abbr></p>


    <blockquote>

    Thẻ <blockquote> trong Bootstrap dùng để tạo trích dẫn như sau :
    Ví dụ :

    <blockquote>
    <p>Hướng dẫn sử dụng thẻ <blockquote></p>
    <footer>từ hailong's blog</footer>
    </blockquote>
    Để 'hailong's blog' hiển thị bên phải bạn thêm class pull-right :
    Ví dụ :

    <blockquote class="pull-right">
    <p>Hướng dẫn sử dụng thẻ <blockquote></p>
    <footer>từ hailong's blog</footer>
    </blockquote>


    <dl>

    Thẻ <dl> trong Bootstrap dùng để tạo danh sách :
    Ví dụ :

    <dl>
    <dt>Cà phê</dt>
    <dd>- cà phê đá</dd>
    <dd>- cà phê sữa</dd>
    <dt>Trà</dt>
    <dd>- Lipton</dd>
    <dd>- Atiso</dd>
    </dl>


    <code>

    Thẻ <code> trong Bootstrap dùng để làm nổi bậc các thẻ html :
    Ví dụ :

    <p>Đây là các thẻ trong html: <code>span</code>, <code>section</code>, and <code>div</code></p>


    Màu sắc của chữ và nền

    Bootstrap cung cấp một số class màu sắc cho văn bản :
    • .text-muted
    • .text-primary
    • .text-success
    • .text-info
    • .text-warning
    • .text-danger
    Ví dụ :

    <p class="text-muted">đây là.text-muted</p>
    <p class="text-primary">đây là .text-primary</p>
    <p class="text-success">đây là .text-success</p>
    <p class="text-info">đây là .text-info</p>
    <p class="text-warning">đây là .text-warning</p>
    <p class="text-danger">đây là .text-danger</p>

    Bootstrap cung cấp một số class màu sắc cho nền văn bản :
    • .bg-primary
    • .bg-success
    • .bg-info
    • .bg-warning
    • .bg-danger
    Ví dụ :

    <p class="bg-primary">đây là .bg-primary</p>
    <p class="bg-success">đây là .bg-success</p>
    <p class="bg-info">đây là .bg-info</p>
    <p class="bg-warning">đây là .bg-warning</p>
    <p class="bg-danger">đây là .bg-danger</p>

    Chủ Nhật, 1 tháng 3, 2015

    Bootstrap - Tạo bố cục trang

    Grid System

    Hệ thống lưới của Bootstrap được chia làm 12 cột.
    Nếu bạn không sử dụng hết 12 cột, bạn có thê gom nhóm các cột lại với nhau :


    Grid Classes

    Bootstrap grid system có 4 class :
    • .xs : dành cho điện thoại
    • .sm : dành cho tablets
    • .md : dành cho desktops
    • .lg : dành cho desktops loại lớn
    Các lớp trên có thể được kết hợp để tạo các bố trí năng động và linh hoạt hơn.
    Cấu trúc cơ bản của Grid System

    Sau đây là cấu trúc cơ bản của một grib system :

    Cấu trúc :













    ...

    Trong đoạn code trên :
    • <div class="row">.....</div>: tạo ra một dòng
    • <div class="col-*1-*2">.....</div> : tạo ra số cột mong muốn trong dòng vừa tạo (trong đó : *1 là tên lớp, *2 là số cột)

    Ví dụ : Tạo ra một website với bố cục đơn giản hiển thị trên desktop



    phần đầu




    cột trái


    cột phải




    phần cuối


    phần đầu
    cột trái
    cột phải
    phần cuối

    Bạn thấy đó, chỉ cần vài lệnh đơn giản, bạn đã có thể tùy biến bố cục của trang rất dể dàng, thay vì ngồi viết các đoạn css mình chỉ cần gọi lại các class của boostrap là đã có bố cục rất nhanh.

    Bootstrap - Grid System

    Grid System

    Hệ thống lưới của Bootstrap được chia làm 12 cột.

    Nếu bạn không sử dụng hết 12 cột, bạn có thê gom nhóm các cột lại với nhau :


    Grid Classes

    Bootstrap grid system có 4 class :
    • xs : dành cho điện thoại
    • sm : dành cho tablets
    • md : dành cho desktops
    • lg : dành cho desktops loại lớn

    Các lớp trên có thể được kết hợp để tạo các bố trí năng động và linh hoạt hơn.


    Cấu trúc cơ bản của Grid System

    Sau đây là cấu trúc cơ bản của một grib system :

    Cấu trúc :
    1. <div class="row">
    2. <div class="col-*1-*2">.....</div>
    3. <div class="row">
    4. <div class="col-1-*2">.....</div>
    5. <div class="col-1-*2">.....</div>
    6. <div class="col-1-*2">.....</div>
    7. </div>

    Trong đoạn code trên :

    • <div class="row">.....</div> : tạo ra một dòng
    • <div class="col-*1-*2">.....</div> : tạo ra số cột mong muốn trong dòng vừa tạo (trong đó : *1 là tên lớp, *2 là số cột)

    Ví dụ : Tạo ra 3 cột bằng nhau hiển thị trên desktop
    1. <div class="row" >
    2. <div class="col-md-4" style="background-color:red;">Cột 1</div>
    3. <div class="col-md-4" style="background-color:green;">Cột 2</div>
    4. <div class="col-md-4" style="background-color:blue;">Cột 3</div>
    5. </div>

    Bootstrap - giới thiệu

    Bootstrap là các HTML, CSS và JS framework phổ biến nhất cho phát triển web. Nó được thiết kế cho bất cứ ai (chuyên hoặc không chuyên) và bất cứ nơi đâu, giúp chúng ta phát triển web nhanh hơn, dể dàng và có hỗ trợ tối đa cho mọi độ phân giải màn hình từ desktop, tablet tới mobile phone.



    Bootstrap là mã nguồn mở, nó được tổ chức, phát triển và duy trì trên GitHub .

    Hàng triệu website tuyệt vời đang được xây dựng với Bootstrap và con số đó ngày càng tăng theo thời gian. Bootstrap thật sự vượt trội so với các framwork cùng loại.

    Bạn có thể tải Bootstrap tại trang chủ của nó :

    http://getbootstrap.com/getting-started/#download

    Nếu như bạn không muốn tải nó về, bạn có thể sử dụng từ một CDN (Content Delivery Network).



    Bạn cần chèn các đoạn mã lệnh ở trên trong phần <head> trước khi sử dụng các class của bootstrap.

    Bootstrap - giới thiệu

    Bootstrap là các HTML, CSS và JS framework phổ biến nhất cho phát triển web. Nó được thiết kế cho bất cứ ai (chuyên hoặc không chuyên) và bất cứ nơi đâu, giúp chúng ta phát triển web nhanh hơn, dể dàng và có hỗ trợ tối đa cho mọi độ phân giải màn hình từ desktop, tablet tới mobile phone.

    Bootstrap là mã nguồn mở, nó được tổ chức, phát triển và duy trì trên GitHub .

    Hàng triệu website tuyệt vời đang được xây dựng với Bootstrap và con số đó ngày càng tăng theo thời gian. Bootstrap thật sự vượt trội so với các framwork cùng loại.

    Bạn có thể tải Bootstrap tại trang chủ của nó :
    http://getbootstrap.com/getting-started/#download

    Nếu như bạn không muốn tải nó về, bạn có thể sử dụng từ một CDN (Content Delivery Network).

    Ví dụ :
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    Popular Posts

    Recent Posts

    Unordered List

    Text Widget

    Được tạo bởi Blogger.