Cơ bản về Bootstrap

Thảo luận trong 'HTML và CSS' bắt đầu bởi Gardener, 5/9/14.

Loading...
  1. Gardener

    Gardener Admin

    [​IMG]
    1.Bootstrap là gì?

    Với việc viết đi viết lại các đoạn code html,cssjs là cho công việc kéo dài vào nhàm chán với lại phải cân chỉnh cho đẹp, chính xác thì rất mất thời gian. Như vậy bootstrap giúp gì trong việc này? Vâng câu trả lời cho câu hỏi là công dụng của bootstrap, như trang chủ của bootstrap định nghĩa sản phẩm của họ như sau:

    “Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.”

    Bootstrap là một dạng framework html,css và js. Hơn thế nữa sử dụng bootstrap thì việc thiết kế “Responsive web design” đơn giản hơn nhiều.

    Và nếu bạn là người đam công nghệ respone thì không thể bỏ qua “Bootstrap”.

    2.Hướng dẫn cách sử dụng.

    Các bạn vào địa chỉ sau để có thể tải bootstrap bản cập nhật mới nhất:

    có 3 lựa chọn mình nghĩ bạn nên chọn cái đầu tiên:
    [​IMG]

    Khi tải về các bạn được 1 file nén zip các bạn giải nén ra được 1 thư mục chứa 3 thư mục con:
    [​IMG]

    Chúng ta chú ý đến 2 thư mục là css và js

    Thư mục css:
    [​IMG]
    Thư mục js:
    [​IMG]

    Đưa bootstrap vào trong file html (do bootstrap demo):

    HTML:
    <!DOCTYPE html>
    
    <htmllang="en">
    
    <head><metacharset="utf-8">
    
    <metahttp-equiv="X-UA-Compatible"content="IE=edge">
    
    <metaname="viewport"content="width=device-width, initial-scale=1"><title>Bootstrap basic</title>
    
    <!-- Bootstrap -->
    
    <linkhref="css/bootstrap.min.css"rel="stylesheet">
    
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    
    <!--[if lt IE 9]>
    
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
    
    </head><body><h1>Hello, world!</h1>
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
    
    </script>
    
    <!-- Include all compiled plugins (below), or include individual files as needed --><script src="js/bootstrap.min.js"></script>
    
    </body>
    
    </html>
    Mã:
    HTML:
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    
    <!--[if lt IE 9]>
    
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
    =>đoạn này chỉ là khi bạn chạy file html này trên trình duyệt IE 9 có 1 số lỗi phát sinh thì được gọi đến file js theo đường dẫn trên để fix lỗi trình duyệt làm cho code bạn chạy tốt hơn


    Vừa rồi những thông tin mình biết về bootstrap cũng như là cách tải và sử dụng, chúc các bạn thành công !
    Loading...
    Last edited: 7/9/14

Chia sẻ trang này