Bootstrap là gì?

Bootstrap là một bộ công cụ mạnh mẽ, tập hợp các công cụ HTML, CSS và JavaScript để tạo và xây dựng các trang web và ứng dụng web đáp ứng. Bootstrap là một dự án mã nguồn mở và miễn phí được lưu trữ trên GitHub và được tạo bởi Twitter.  

Nói tóm lại, Bootstrap là một bộ sưu tập phong phú các đoạn mã tiện dụng, có thể tái sử dụng được viết bằng CSS, HTML và JavaScript. Nó cũng là một khung phát triển giao diện người dùng cho phép các nhà phát triển và nhà thiết kế xây dựng các trang web đáp ứng đầy đủ một cách nhanh chóng

Bootstrap cực kỳ phổ biến, hiện được hơn 27% trang web dựa trên JavaScript sử dụng

Bây giờ bạn đã biết một chút về những điều cơ bản của Bootstrap, hãy xem tại sao nó lại nhận được nhiều sự yêu thích như vậy

Khóa học Full Stack Web Developer

Lịch sử của Bootstrap

Bootstrap được phát triển tại Twitter bởi Mark Otto và Jacob Thornton và được phát hành vào tháng 8 năm 2011 trên GitHub dưới dạng sản phẩm mã nguồn mở

Bootstrap 2 được phát hành vào năm 2012, tiếp theo là Bootstrap 3 vào năm 2013. Bootstrap 4 ra mắt vào năm 2018. Bootstrap 5 hiện đang trong giai đoạn thử nghiệm

Vào tháng 6 năm 2014 Bootstrap là dự án số một trên GitHub

Tại sao nên sử dụng Bootstrap?

• Bootstrap cung cấp CSS đáp ứng điều chỉnh cho điện thoại, máy tính bảng và máy tính để bàn. Bootstrap cũng tương thích với nhiều trình duyệt và được hỗ trợ bởi Chrome, Firefox, Internet Explorer, Safari và Opera
• Bootstrap cần thiết lập tối thiểu và có thể tạo bố cục chức năng trong vòng chưa đầy một giờ. Bạn không cần phải dành thời gian quý báu của mình để tạo bất cứ thứ gì từ đầu
• Bạn không cần phải thành thạo HTML và CSS để sử dụng Bootstrap, mặc dù đó là một điểm cộng nếu bạn là nhà phát triển phụ trợ và cần thực hiện một số thay đổi về giao diện người dùng
• Bootstrap đi kèm với các thành phần mà bạn có thể dễ dàng sử dụng cho trang web của mình, bao gồm thanh điều hướng, danh sách thả xuống, thanh tiến trình và hình thu nhỏ
• Nó cung cấp tài liệu tuyệt vời và có một cộng đồng lớn

Trang web đáp ứng là gì?

Trang web phản hồi tự động điều chỉnh để phù hợp với các màn hình và chế độ xem có kích thước khác nhau. Điều đó có nghĩa là, bất kể người dùng đang duyệt web bằng loại thiết bị nào, thiết bị đó trông và hoạt động hoàn hảo

Các trang web đáp ứng rất quan trọng vì chúng cho phép doanh nghiệp tiếp cận thành công nhiều loại thiết bị hơn, do đó tiếp cận được nhiều người hơn

Bootstrap là gì. Gói Bootstrap chứa gì?

Bootstrap là một bộ công cụ và do đó có nhiều công cụ dành cho nhà phát triển và lập trình viên. Nó chứa các công cụ HTML, CSS và JavaScript được thiết kế để tạo và xây dựng các trang web và ứng dụng. Điều này bao gồm giàn giáo và plug-in

Bootstrap cũng có các mẫu thiết kế CSS và HTML cơ bản có lựa chọn tốt các thành phần giao diện người dùng. Chúng bao gồm các cảnh báo, nút và nhóm đầu vào, băng chuyền, danh sách thả xuống, biểu mẫu, Glyphicons, nhãn và huy hiệu, phương thức, điều hướng, phân trang, thanh tiến trình, kiểu chữ, bảng, tab, v.v.

Bootstrap 4 là gì?

Bootstrap 4 là phiên bản hiện tại của khung (phiên bản tiếp theo Bootstrap 5 đang trong giai đoạn thử nghiệm Beta kể từ tháng 3 năm 2021). Bootstrap 4 có các thành phần mới, biểu định kiểu nhanh hơn, các nút và hiệu ứng bổ sung cũng như tăng khả năng phản hồi

Bootstrap 4 hỗ trợ các bản phát hành ổn định, hiện tại của tất cả các nền tảng và trình duyệt chính

Bây giờ, trong phần tiếp theo của hướng dẫn Bootstrap là gì, bạn sẽ hiểu cách kết hợp Bootstrap trong ứng dụng của mình

Nhúng Bootstrap vào góc

Có hai cách để nhúng thư viện bootstrap vào ứng dụng của bạn.  

• Bootstrap góc qua CDN
• Bootstrap góc thông qua NPM

Bootstrap góc qua CDN

Bootstrap CDN là Mạng phân phối nội dung công cộng. Nó cho phép bạn tải các tệp CSS và JavaScript từ xa từ các máy chủ của nó. Để làm điều đó, hãy truy cập liên kết này, sao chép mã CSS và JavaScript và dán chúng vào phần đầu và phần thân của chỉ mục. html của ứng dụng Angular của bạn.  

<. loại tài liệu html>

<đầu>

Chúng tôi đã đánh dấu mã đã dán để bạn hiểu rõ hơn.  

Bootstrap góc thông qua NPM

Một cách khác để thêm Bootstrap vào dự án Angular của bạn là cài đặt nó vào thư mục dự án của bạn bằng cách sử dụng NPM (Trình quản lý gói nút).  

npm cài đặt bootstrap

npm cài đặt jquery

Các lệnh đã nêu ở trên cài đặt các thư viện Bootstrap và JQuery. Các tệp sau khi cài đặt có thể được tìm thấy trong tệp node_modules

• nút_modules/jquery/dist/jquery. tối thiểu. js
• nút_modules/bootstrap/dist/css/bootstrap. tối thiểu. css
• nút_modules/bootstrap/dist/js/bootstrap. tối thiểu. js

Dán các đường dẫn tương đối tới các tệp này trong góc. json, trong phần xây dựng

"xây dựng". {

"người xây dựng". "@angular-devkit/build-angular. trình duyệt",

"tùy chọn". {

"đường đầu ra". "dist/democomponents",

"mục lục". "src/chỉ mục. html",

"chủ yếu". "src/chính. ts",

"polyfill". "src/polyfill. ts",

"tsConfig". "tsconfig. ứng dụng. json",

"aot". thật,

"tài sản". [

"src/favicon. ico",

"src/tài sản"

],

"phong cách". [

"src/phong cách. css",

"node_modules/bootstrap/dist/css/bootstrap. tối thiểu. css"

],

"kịch bản". [

"node_modules/bootstrap/dist/js/bootstrap. tối thiểu. js",

"node_modules/jquery/dist/jquery. tối thiểu. js"

]

},

Bây giờ chúng ta đã tạo thiết lập ban đầu cho ứng dụng, hãy xem bản trình diễn đơn giản để tìm hiểu cách sử dụng các mẫu và tùy chỉnh chúng theo yêu cầu của bạn

Demo - Tạo ứng dụng với Angular Bootstrap

Điều đầu tiên cần làm là tìm một mẫu bạn muốn tạo ứng dụng của mình với. Bạn có thể tìm kiếm “Bootstrap Templates” trên Google và nhấp vào liên kết.  

Chúng tôi đã chọn một mẫu từ trang web này. Dưới đây, chúng tôi đã thêm một gif đơn giản hiển thị quá trình truy xuất mã HTML cho mẫu đã chọn

Trong bản trình diễn này, chúng tôi đang tạo một blog Simplilearn bao gồm một vài liên kết đến các khóa học của chúng tôi và liên kết đến kênh Youtube của chúng tôi.  

Bước 1. Khi bạn đã sẵn sàng mã, hãy tạo ứng dụng Angular của bạn bằng lệnh sau

ng create  

cd  

Mã HTML bao gồm phần đầu với một vài thẻ meta và tiêu đề và thẻ nội dung bao gồm các bộ mã khác nhau cho từng phần của ứng dụng.  

Bạn cũng có thể tìm thấy tệp CSS tùy chỉnh cho mẫu trong phần đầu. Nhấp vào liên kết, sao chép mã và dán vào tệp style. tệp css của ứng dụng của bạn.  

thân thể {

đệm-top. 56px;

}

Bây giờ, việc tạo kiểu đã hoàn tất, bạn có thể sao chép toàn bộ mã trong phần nội dung và dán vào ứng dụng của mình. thành phần. tệp html. Tại thời điểm này, bạn có thể chạy ứng dụng của mình để xem mẫu đã được tải đúng cách trên trình duyệt chưa.  

Chúng tôi chắc chắn rằng bạn biết rằng Angular sử dụng khái niệm về các thành phần để xác định giao diện người dùng của ứng dụng. Đó là một cách tiếp cận tốt hơn để tạo các thành phần khác nhau cho các thành phần giao diện người dùng khác nhau và kết hợp tất cả chúng trong tệp HTML cuối cùng. Điều này cũng cho phép bạn thay đổi mã mà không có bất kỳ sự nhầm lẫn nào

Bước 2. Bây giờ, chúng tôi đang tạo bốn thành phần khác nhau, thanh điều hướng, phần giới thiệu, khóa học và chân trang. Tùy thuộc vào mẫu bạn đã chọn, bạn có thể quyết định số lượng thành phần bạn muốn tạo

Bạn có thể cắt và dán mã từ ứng dụng của mình. các thành phần. html trong tệp của thành phần có liên quan.  

thanh điều hướng của tôi. thành phần. tệp html bao gồm mã cho thanh điều hướng trên cùng

Chúng tôi muốn từ Simplilearn xuất hiện trên thanh và kết quả là chúng tôi đã thêm từ này vào mã. Bạn có thể thay đổi mã theo yêu cầu của bạn

Phần Intro của blog có đoạn code sau.  

<. -- Nội dung trang -->

<. -- Hàng tiêu đề -->

      

<. -- /. col-lg-8 -->

Trại đào tạo trực tuyến số 1 thế giới

1.000.000 nghề nâng cao

            1,000 live classes every month

85% báo cáo các lợi ích nghề nghiệp bao gồm thăng chức hoặc công việc mới

Khám phá các chương trình

      

<. -- /. col-md-4 -->

    

<. -- /. hàng -->

<. -- Kêu gọi hành động tốt -->

Được chứng nhận, Tiến lên phía trước với các chương trình của chúng tôi

      

    

Ở đây, chúng tôi đã thêm logo Simplilearn và một vài dòng sẽ được hiển thị trên giao diện người dùng.  

Trong thành phần khóa học, chúng tôi đã thêm ba khóa học khác nhau và liên kết đến trang Simplilearn để biết tổng quan về cùng một khóa học. Đây là mã

<. -- Hàng nội dung -->

Chương trình sau đại học về Lean Six Sigma

Thời lượng. 6 tháng
Nhóm thuần tập bắt đầu. 04 Tháng mười, 2020

        

Thông tin thêm

        

      

    

<. -- /. col-md-4 -->

Chương trình Sau Đại học về Phát triển Web Full Stack

Thời lượng. 9 tháng
Nhóm thuần tập bắt đầu. 11 Tháng 10, 2020

        

Thông tin thêm

        

      

    

<. -- /. col-md-4 -->

Chương trình sau đại học về An ninh mạng

Thời lượng. 6 tháng
Bắt đầu nhóm. 28 Tháng chín, 2020

        

Thông tin thêm

        

      

    

<. -- /. col-md-4 -->

  

<. -- /. hàng -->

Trình duyệt của bạn không hỗ trợ thẻ video

Hãy xem Kênh YouTube của chúng tôi để xem các video kỹ thuật và hướng dẫn

<. -- /. thùng chứa -->

Chúng tôi cũng đã thêm một video và biểu tượng Youtube mà sau khi nhấp vào sẽ điều hướng đến kênh Youtube Simplilearn

chân trang. tệp html có mã sau.  

<. -- Chân trang -->

Bước 3. Bước cuối cùng là thêm các thẻ HTML tùy chỉnh của các thành phần trong ứng dụng. thành phần. tệp html.  

Bước 4. Lưu tệp và chạy nó.  

phục vụ

Sau khi chạy, hãy mở trình duyệt của bạn và điều hướng đến localhost. 4200. Nếu một ứng dụng khác đang chạy trên địa chỉ đó, bạn chỉ cần chạy lệnh sau.  

ng phục vụ --port

Tất cả những thay đổi được thực hiện đối với mã sẽ được phản ánh trong trình duyệt. Chúng tôi thực sự khuyên bạn nên thử với mã và thêm các tính năng thú vị khác để làm đẹp ứng dụng của mình.  

Để tìm hiểu thêm về Bootstrap là gì, hãy đăng ký Khóa đào tạo chứng chỉ góc và có kiến ​​thức chuyên sâu về các khái niệm như TypeScript, Hệ thống lưới Bootstrap, v.v.

Đăng ký Khóa đào tạo chứng chỉ góc cạnh và có được kiến ​​thức chuyên sâu về các khái niệm như TypeScript, Hệ thống lưới Bootstrap, v.v.

Bước tiếp theo

Chúng tôi hy vọng rằng bài viết này về Bootstrap là gì đã giúp bạn hiểu cách nhúng các mẫu vào Angular. Nếu bạn muốn học Angular và có thể tạo dựng sự nghiệp từ nó, sẽ rất hữu ích

Khóa đào tạo chứng chỉ Angular của Simplilearn giúp bạn thành thạo việc phát triển web front-end với Angular. Bạn sẽ học cách tạo các ứng dụng với sự trợ giúp của các khái niệm như tạo điều kiện phát triển các ứng dụng web một trang, các thành phần, bản đánh máy, nội xạ phụ thuộc và chỉ thị với khóa học này. Khóa học cũng bao gồm một dự án thời gian thực để kiểm tra kỹ năng của bạn.  

Nếu bạn có phản hồi hoặc câu hỏi, hãy gửi cho chúng tôi một nhận xét trong phần bình luận. Các chuyên gia của chúng tôi sẽ liên hệ lại với bạn càng sớm càng tốt