Phương thức bootstrap w3school

Khi nhìn sơ qua, Bootstrap có vẻ đơn giản. Sự thật là, cũng không quá khó để bắt đầu sử dụng Bootstrap. Có tài liệu tốt ở đây, tài liệu Bootstrap, nhiều ví dụ về HTML, CSS và JavaScript. Đa số những lỗi quan trọng đều được đề cập trong tài liệu trên, nhưng cũng có những lỗi khá nhạy cảm, hoặc gây ra những sự nhập nhằng. Như vậy, bạn phải tìm hiểu kỹ, còn không thì gặp lỗi là chuyện thường

Chúng ta sẽ xem xét 10 lỗi, vấn đề và khái niệm sai lầm khi sử dụng Bootstrap

Lỗi #1. Những khái niệm sai lầm căn bản về khuôn khổ này

Bạn hiểu nhầm khái niệm vì tài liệu Bootstrap không nói rõ, hoặc bạn không có đủ thời gian để đọc kỹ. Dẫn đến, bạn không hiểu đúng, làm sai và đổ lỗi cho khung. Bootstrap tổng hợp đủ mọi thứ, nhưng dung lượng của nó không quá lớn

Bootstrap đi kèm với các mẫu thiết kế HTML và CSS cơ bản mô tả cách sử dụng các thành phần giao diện (UI = User Interface) phổ biến. Chúng bao gồm Typography (định dạng văn bản), Tables (bảng), Forms, Buttons, Glyphicons (các icon biểu tượng nhỏ), Dropdowns, Buttons và Input Groups, Navigation (các định dạng điều hướng/liên kết), Pagination (phân . Bạn có thể chọn một số thành phần và sử dụng các cấu hình mặc định của chúng để nhanh chóng tạo giao diện người dùng Hỗ trợ đa trình duyệt, đa thiết bị truy cập web và đa cấp độ phân tích theo một định dạng tốt

Bootstrap không làm mọi công việc cho bạn, nhưng nó cung cấp một số lượng hợp lý các mẫu mặc định để bạn chọn, như vậy, nó giúp các nhà phát triển tập trung nhiều hơn vào công việc phát triển vì vậy với việc lắng nghe về thiết kế và

Nó giúp cho việc tạo mẫu nhanh, nhưng nó giúp thiết kế trang web hoàn thiện, chứ không chỉ là việc tạo mẫu. Nó cho phép mở rộng, theo đó chúng ta có thể mở rộng nó tùy theo nhu cầu. Lúc mới ra đời, Bootstrap có nhược điểm và việc mở rộng rất phức tạp. Nhưng càng ngày thì điều này càng được cải thiện

Lỗi #2. Cho rằng không cần biết CSS vẫn được sử dụng Bootstrap và không cần một nhà thiết kế

If you think you used Bootstrap does not know CSS, then you was bad. Bất kỳ nhà phát triển front-end nào cũng cần học CSS và HTML5. Bootstrap bỏ đi rất nhiều phần thủ thuật CSS (chẳng hạn như các tiền tố riêng của trình duyệt và cung cấp các định dạng cơ bản mặc định, do đó bạn vẫn cần phải hiểu CSS. Bạn không cần biết truy xuất theo thiết bị (truy vấn phương tiện) hoạt động như thế nào, nhưng bạn cần hiểu thiết kế tương thích (thiết kế đáp ứng) hoạt động như thế nào. Bootstrap được làm ra không phải để dạy bạn CSS, nhưng nó có thể giúp nếu bạn muốn. Xem mã nguồn với định dạng LESS hoặc SASS là một cách bắt đầu tốt

Một công việc tương tự, bạn không cần một nhà thiết kế, và bạn có thể lập luận rằng bạn không cần một nhà thiết kế với Bootstrap. Tuy nhiên, nếu có thể, hãy sử dụng sự trợ giúp của một nhà thiết kế. Một điều không phổ biến với Bootstrap là những trang web sử dụng Bootstrap nhìn giống nhau. Điều này có thể được thực hiện. Hàng triệu trang web được xây dựng bằng Bootstrap. Những ví dụ tốt cho thấy những thiết kế khác nhau có được bằng cách nào được trình bày tại Bootstrap Expo, một trang tập hợp các trang web sử dụng Bootstrap. Hãy xem xét, lấy cảm hứng và bắt đầu xây dựng thiết kế riêng biệt của bạn

Lỗi #3. Change file CSS of Bootstrap

Đơn giản là. Không thể chỉnh sửa tập tin bootstrap. css

If you change file bootstrap. css, mọi thứ sẽ sớm trở nên phức tạp. Toàn bộ thiết kế sẽ bị hỏng khi bạn muốn nâng cấp các tệp Bootstrap này. Bạn có thể ghi đè (overwrite) trong trang định dạng (stylesheet) của riêng bạn những thiết lập mặc định của Bootstrap về màu sắc (color colors), kiểu dáng (định dạng), lề (lề ngoài), phần đệm (lề trong), . Không có gì phải xung quanh tệp bootstrap. css

Bạn không biết LESS hay SASS? . css

Bạn muốn biết nhiều hơn? . Bạn sẽ hiểu rõ hơn điều gì đang diễn ra, và cái nào nằm ở đâu (dòng nào trong tệp) nếu bạn sử dụng mã LESS (LESS source), không phải CSS tĩnh (CSS tĩnh)

Lỗi #4. Use HẾT mọi thứ Bootstrap cung cấp

Như đã nói ở trên, Bootstrap tổng hợp nhiều thứ, các thành phần giao diện người dùng (các thành phần giao diện), các mẫu thiết kế HTML và CSS (các mẫu thiết kế HTML và CSS), và các plugin JavaScript. Nhưng sử dụng CÓ CHỌN LỌC. Bạn không cần phải sử dụng mọi thứ của Bootstrap

Đặc biệt với plugin. chỉ sử dụng những plugin mà bạn cần, và không sử dụng mọi thứ vì chúng trông đẹp và hay. Trang web của bạn sẽ bị làm quá (overdone). Please start by work not used file bootstrap. js và tạo trang web chỉ bằng HTML và CSS. Sau đó, thêm vào những phần nào cần thiết cho những công việc cụ thể, từng cái một

Lỗi #5. Sử dụng hộp thoại sai cách

Bootstrap modals (hộp hội thoại) cung cấp các khung hội thoại linh hoạt với tính năng yêu cầu tối thiểu và nó đi kèm theo các mặc định thông minh (mặc định thông minh). Mặc dù modal thì dễ sử dụng và cung cấp những hiệu chỉnh phong phú, nhưng có một vài điều chúng ta cần nhớ để tránh những cách sử dụng sai phổ biến

Showing more than a modal

Bootstrap không hỗ trợ hiển thị các chế độ chồng (chồng chéo). Only 1 modal at 1 time can display. Hiển thị nhiều hơn 1 phương thức tại 1 thời điểm có thể đạt được, nhưng cần phải sửa đổi mã đã chỉnh sửa để thực hiện điều này một cách đúng đắn

Modal Bootstrap xuất hiện sai (bên dưới phần nền)

Nếu các đối tượng chứa modal hoặc thành phần cha của nó có thuộc tính thì vị trí là cố định hoặc tương đối, modal sẽ không hiển thị đúng. Luôn luôn chắc chắn rằng các đối tượng chứa phương thức và thành phần cha của nó không sử dụng thuộc tính vị trí đặc biệt. Cách tốt nhất là đặt mã HTML của phương thức ngay trước thẻ đóng < /body>, hoặc tốt hơn nữa là ngay sau thẻ mở < body>. Đây là cách tốt nhất để tránh những thành phần khác ảnh hưởng đến giao diện và tính năng của phương thức

Phương thức trên thiết bị di động (thiết bị di động)

Có một số cảnh báo mà các nhà phát triển cần biết khi làm việc với các phương thức trên thiết bị di động sử dụng bàn phím ảo trên thiết bị di động có bàn phím ảo. Đặc biệt lưu ý các thiết bị chạy iOS, có lỗi hiển thị, vị trí các thành phần thuộc tính đã được sửa sẽ không bị thay đổi thuộc tính này khi bàn phím ảo xuất hiện. Bootstrap không xử lý vấn đề này, nên nhà phát triển sẽ phải xử lý những vấn đề này trong mã

Lỗi #6. Vấn đề với nút chọn tệp để tải lên

Bootstrap không thiết kế sẵn thành phần tương ứng với nút tải lên tệp. Một cách đơn giản để có nút tải lên tệp đẹp mắt là đoạn HTML và CSS sau

<span class="btn btn-default btn-file">
    Browse <input type="file">
span>

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

Có nhiều ví dụ khác nhau để làm việc tương tự. Ví dụ này là của Cory LaViska, chi tiết về nó thì bạn đọc tại site của mr ý. Cũng có một ví dụ mở rộng mẫu khác cung cấp nhiều tính năng hơn thông qua việc sử dụng mã JavaScript bổ sung

Lỗi #7. Phức tạp hóa bằng việc viết thêm mã JavaScript và bỏ qua các thuộc tính “data-”

Các nhà thiết kế, hoặc nhà phát triển JavaScript mới vào nghề, nếu họ không hiểu về JavaScript, họ sẽ không biết cách sử dụng và phức tạp hóa JavaScript. Cần lưu ý rằng mọi plugin của Bootstrap chỉ có thể áp dụng đơn thuần thông qua HTML, không cần viết thêm dù chỉ 1 dòng mã JavaScript. Đây được gọi là API thứ nhất của Bootstrap (Bootstrap’s first-class API) và bạn phải xem đây là giải pháp tốt nhất trước khi làm việc với các plugin

Ví dụ, chúng ta có thể kích hoạt 1 phương thức, không sử dụng mã JavaScript, như sau, thiết lập thuộc tính data-toggle="modal" cho nút kích hoạt như đối tượng hoặc liên kết , data-target=#myModal là thiết lập phương thức có id . 4 thuộc tính bị bỏ qua trong 1 thẻ HTML kích hoạt duy nhất

<button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch my modalbutton>

Lỗi #8. Không sử dụng các công cụ giúp làm việc với Bootstrap dễ dàng

Nhà phát triển mắc nhiều lỗi khi sử dụng Bootstrap. Do đó, Bootstrap tạo ra Bootlint, 1 công cụ kiểm tra cấu trúc HTML của những dự án sử dụng Bootstrap. Bootlint có thể sử dụng thông qua trình duyệt hoặc thông qua dòng lệnh trên nút nền. js. Bootlint giúp bạn làm việc nhanh hơn

Cao hơn, nếu bạn muốn đóng góp vào dự án Bootstrap, bạn nên tìm hiểu Rorschach. Rorschach là công cụ tự động kiểm tra tính hợp lệ của mã đóng góp bản gốc, nó sẽ thực thi một số kiểm tra đối với mỗi mã đóng góp bản gốc. Nếu nó thấy không có tính hợp lệ, nó sẽ bình luận báo lỗi gì và sửa đổi ra sao, và đóng mã yêu cầu đóng góp

Lỗi #9. Lỗi không tương thích với IE8 và các trình duyệt cũ hơn

Bootstrap hoạt động tốt nhất trên trình duyệt di động và máy tính mới. Các trình duyệt cũ sẽ hiển thị giao diện với định dạng khác đi, nhưng mọi thứ vẫn hoạt động bình thường. Sự hỗ trợ bao gồm Internet Explorer 8 và 9, với chú ý rằng một số thuộc tính CSS3 và một số thành phần HTML5 không được hỗ trợ đầy đủ trên các trình duyệt này

Khả năng tương thích trình duyệt Bootstrap

Để có đủ hỗ trợ đầu cho Internet Explorer 8 và các trình duyệt cũ khác, bạn cần sử dụng công cụ hỗ trợ cho các truy xuất CSS3 (CSS3 Media Queries) là Reply. js, HTML 5 shim, những công cụ này cho phép hiển thị những thành phần HTML5 này, và thêm thẻ

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

2 để đảm bảo IE không chạy trong chế độ tương thích chế độ. Mã HTML

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

3 trông sẽ như sau

< head>
    ...
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    

< /head>

When used Reply. js, chú ý những cảnh báo sau khi phát triển & xuất bản ứng dụng

Lỗi #10. Loại bỏ các khuôn mẫu tốt

Một câu hỏi biến phổ biến trên Stack Overflow là làm cách nào để menu Bootstrap xổ xuống khi rê chuột qua, chứ không phải đợi tới khi nhấp chuột. Vấn đề này không quá phức tạp và được giải quyết bằng CSS, nhưng khuôn mẫu tốt là không nên giải quyết nó. Tính năng này bị Bootstrap loại bỏ xạ là có lý do, đặc biệt khi Bootstrap là framework ưu tiên hỗ trợ di động (mobile first framework). Lý do ở đây là thiết bị cảm ứng không có hành động rê chuột, mà chỉ có hành động chạm (chỉ các sự kiện chạm). Nên trên thiết bị di động nó sẽ không hoạt động đúng

Kết luận

Trong bài viết hướng dẫn rút gọn phần đầu này, tôi hy vọng sẽ giúp bạn tránh được một số lỗi phổ biến, tránh hiểu sai những khái niệm cơ bản và khung sử dụng hiệu quả nhất. chú ý rằng, Bootstrap không phải dành cho mọi người, cũng không phải phù hợp cho mọi dự án. Khi chọn một khung, bạn phải dành thời gian đọc tài liệu và khung "chơi" để cảm nhận nó và cấu hình nó hoạt động như thế nào. Bootstrap cũng cần làm như vậy

Đọc tài liệu, chơi và thử nghiệm với những ví dụ mẫu, hiểu đúng những vấn đề cơ bản, và thích thú/tận hưởng khi tạo ra những thiết kế mới và đẹp