Hướng Dẫn Sử Dụng Bootstrap - Phần 2

Trong bài hướng dẫn này , bạn học  Bootstrap Grid System Hướng Dẫn Sử Dụng để tạo ra Grid System .

Như bạn đã biết, trong thiết kế đồ họa, hệ thống lưới  là một cấu trúc hai chiều tạo thành các trục ngang và dọc , hữu ích cho cấu trúc nội dung. Nó được sử dụng rộng rãi để thiết kế bố trí và cấu trúc nội dung trong thiết kế in ấn. Trong thiết kế web, nó là một phương pháp rất hiệu quả để tạo ra một bố trí phù hợp nhanh chóng và hiệu quả sử dụng HTML và CSS. Như vậy, hệ thống lưới đã trở thành một thành phần thiết yếu / mô-đun cho các khuôn khổ thiết kế web hoặc công việc.

Giải thích nó một cách đơn giản, trong thiết kế web, chúng tôi tạo ra các hàng và cột bằng HTML và CSS để đạt được một mạng lưới. Và cột chứa các nội dung thực tế.

Như của phiên bản 2.3.2, Twitter Bootstrap cung cấp hai loại lưới. Hệ thống lưới mặc định là 940px cột rộng và 12. Bạn có thể thêm các kiểu phản ứng với nó và sau đó nó sẽ trở nên thích nghi với 724px và 1170px rộng đối với khung nhìn nó là ra về với.

Ngoài ra còn có một hệ thống lưới tuy biến. Đây là dựa trên một percentange thay vì điểm ảnh dựa. Và có thể được mở rộng để đáp ứng giống như lưới cố định mặc định. Chúng tôi sẽ thảo luận về một mặc định với một số ví dụ trong hướng dẫn này và sẽ có hướng dẫn riêng biệt cho hệ thống lưới tùy biến.

Nó sẽ là tuyệt vời nếu bạn đã tải về các tập tin Bootstrap mới nhất từ “http://twitter.github.io/bootstrap/assets/bootstrap.zip”. 

Hướng Dẫn Sử Dụng Bootstrap - Phần 1

Hey xin chào mọi người hôm nay bắt đầu gửi tới các bạn series “Hướng dẫn sử dụng Bootstrap“. Bài mở đầu cho series này là bài giới thiệu về  Bootstrap hay còn gọi là Twitter Bootstrap.

Trong thiết kế giao diện sử dụng CSS việc lập đi lập lại nhiều lần nói thiệt cũng chán , một số thì viết mới hoàn toàn , còn một số sử dụng lại bản cũ để sửa lại , hey nhiều khi sửa lại còn lâu hơn viết mới.Để khắc phục vấn đề trên là sử dụng  Twitter Bootstrap một trong những css framework được ưa chuộng hiện nay.

A- Giới thiệu về Twitter Bootstrap

Twitter Bootstrap bao gồm các mã CSS + HTML cơ bản cho Grids, Layouts, Typography, Tables, Forms, Navigation, Alerts, Popovers etc.. và nhiều thành phần khác của website. Đi kèm với hàng loạt plugin jquery để tạo ra các thành phần giao diện như Transitions, Modal, Dropdown, Scrollspy, Tooltip, Tab, Popover, Alert, Button, Collapse, Carousel, Typeahead, Affix.

Twitter Bootstrap cung cấp lưới cố định (fixed) rộng 940px và 12 cột. Tất nhiên là cũng có giải pháp cho việc dùng layout dạng động (fluid).

Style của các phần tử HTML trong Twitter Bootstrap khá đơn giản và thanh lịch. Ví dụ như phần đổ bóng trong input, highlight của bảng biểu, các mã CSS hiển thị cảnh báo, tabs, phân trang…

Hiện nay đã ra phiên bản Bootstrap 3 RC1 nhưng mình sẽ hướng dẫn các bạn phiên bản 2 sau đó sẽ đến 3 ha.

PhpStorm 7.0 Serial Link Gốc Full

Phiên bản mới nhất PhpStorm 7.0
Phần mềm hỗ trợ tuyệt vời nhất cho coder PHP

Debug javascript với Chrome Dev Tools

Bạn đã bao giờ phải đau đầu khi đoạn JavaScript của mình không chạy không? Và sau đó lại phải sử dụng hàm alert() để xem code đó có chạy không. Rất mất công và khó thành công! Đặc biệt là khi ứng dụng web ngày càng yêu cầu xử lí phức tạp hơn nên JavaScript được viết rất nhiều vì thế việc debug rất cần thiết. Đừng lo lắng! Chrome Dev Tools đã giúp chúng ta rất nhiều  Chúng ta cùng bắt đầu tìm hiểu về debug JavaScript nhé.

Các ký tự đặc biệt trong thiết kế web

Có một vài ký tự đặc biệt trong HTML. Ví dụ như bạn không thể hiện được dấu lớn hơn hoặc nhỏ hơn trong các đoạn văn bởi vì trình duyệt có thể hiểu nhầm chúng là ký tự của các thẻ.

Nếu bạn muốn trình duyệt hiển thị được những ký tự này, chúng ta phải chèn những code đặc biệt vào trong tài liệu thiết kế web.

Mẹo nhỏ khi sử dụng Chrome Dev Tools

Chào mọi  người,

Chrome Dev Tools là một bộ công cụ không thể thiếu cho Web Developer khi phát triển web trên Google Chrome. Nó cho phép ta có thể kiểm tra cấu trúc HTML của web, debug javascript, … Nhưng bên cạnh đó Chrome Dev Tools còn có rất nhiều chức năng mà có thể bạn chưa biết 

1. Chrome Dev Tools dạng dọc

Bình thường khi chúng ta mở Chrome Dev Tools (nhấn F12 hoặc Inspect Element) thì nó sẽ nằm ở bên dưới của Google Chrome.  Nhưng nó còn có thể chuyển sang dạng dọc như hình dưới đây: