Hướng dẫn overlap bootstrap columns - chồng chéo các cột bootstrap

Các vòng tròn của bạn chồng chéo vì bạn không cung cấp cho họ MKORE với hộp đựng bootstrap của họ. Bạn đã có một mã hóa cứng bằng

a div{
  max-width: 100%;
}
5, nhưng khai báo cột rất hẹp (tại
a div{
  max-width: 100%;
}
6).

Các cột Bootstrap luôn cộng lên 12. Bạn có tổng cộng bốn - hai khai báo

a div{
  max-width: 100%;
}
7, cộng với 2 từ
a div{
  max-width: 100%;
}
8. 8 cột còn lại không có người. Điều này có nghĩa là nội dung của bạn sẽ bị vắt sang trái.

Giả sử bạn muốn bảy cột (với phần đầu tiên), có lẽ bạn đang tìm kiếm một cấu trúc tương tự như thế này:

Tất cả các khai báo trên

a div{
  max-width: 100%;
}
9 đều thêm vào 12, và do đó chiếm chiều rộng đầy đủ. Lưu ý rằng bạn có thể sử dụng bất kỳ kết hợp chiều rộng nào để tổng hợp lên đến 12 cột - 3 bốn, 4 ba, 6 twos, v.v.any combination of widths to sum up to 12 columns -- 3 fours, 4 threes, 6 twos, etc.

Để đảm bảo rằng các vòng tròn của bạn không bao giờ ESACPE giới hạn của họ (và do đó trùng lặp), bạn cần đặt

0 là 100%:

a div{
  max-width: 100%;
}

Ngoài ra, nếu bạn chỉ muốn hai cột (như được minh họa trong hình ảnh của bạn), bạn có thể cung cấp cho họ chiều rộng cột rộng hơn. Đơn giản chỉ cần chia (12 - [offset]) cho số lượng cột bạn muốn và đó là đặc điểm kỹ thuật mà bạn nên sử dụng.two columns (as illustrated in your image), you can give them a wider column width. Simply divide (12 - [offset]) by the number of columns you would like, and that's the specification that you should use.

Trong trường hợp này, đó là

1, khi chúng tôi trừ phần bù của
2 từ
3, sau đó chia
4 cho
2, cho chúng tôi
1:

Ngoài ra, lưu ý rằng bạn đã bỏ lỡ việc đóng

7 cho
8 :)

Hi vọng điêu nay co ich! :)

3

Nội dung chính ShowShow

  • Lỗi #1: Những quan niệm sai lầm căn bản về framework này
  • Lỗi #2: Cho rằng không cần biết CSS vẫn dùng được Bootstrap và không cần một designer
  • Lỗi #3: Thay đổi file CSS của Bootstrap
  • Lỗi #4: Dùng HẾT mọi thứ Bootstrap cung cấp
  • Lỗi #5: Dùng hộp hội thoại sai cách
  • Lỗi #6: Vấn đề với nút chọn file để upload
  • Lỗi #7: Phức tạp hóa bằng việc viết thêm code JavaScript và bỏ qua những thuộc tính “data-”
  • Lỗi #8: Không dùng tools giúp làm việc với Bootstrap dễ dàng
  • Lỗi #9: Lỗi không tương thích với IE8 và những trình duyệt cũ hơn
  • Lỗi #10: Bỏ qua những khuôn mẫu tốt
  • Kết luận
  • Tài liệu tham khảo

Nội dung chính Show
Learn more.

Lỗi #1: Những quan niệm sai lầm căn bản về framework này

<% include partials/header %>

Welcome to our locations

View our Camp grounds

Home Add a new CampGround

<% campgrounds.forEach(function(campground){ %>

<%= campground.name %>

<% }) %>

Lỗi #2: Cho rằng không cần biết CSS vẫn dùng được Bootstrap và không cần một designer

Lỗi #3: Thay đổi file CSS của Bootstrap15 gold badges24 silver badges35 bronze badges

Lỗi #4: Dùng HẾT mọi thứ Bootstrap cung cấpMar 26, 2019 at 1:30

1

Lỗi #5: Dùng hộp hội thoại sai cách


Lỗi #6: Vấn đề với nút chọn file để upload

<% campgrounds.forEach(function(campground){ %>

<%= campground.name %>

<% }) %>

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

Lỗi #8: Không dùng tools giúp làm việc với Bootstrap dễ dàng

.container > .row img,
.container-fluid > .row img  { max-width: 100%; }

Lỗi #9: Lỗi không tương thích với IE8 và những trình duyệt cũ hơnMar 26, 2019 at 1:55

Lỗi #10: Bỏ qua những khuôn mẫu tốtTxRegex

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.Learn more.19 silver badges20 bronze badges

Tôi đã viết một mã Node.js để hiển thị 3 hình ảnh và tôi đang sử dụng bootstrap để tạo kiểu cho những hình ảnh này cạnh nhau nhưng chồng chéo khi tôi sử dụng col-mid- "bất kỳ số nào".

Shiladitya

Lỗi #1: Những quan niệm sai lầm căn bản về framework này

Lỗi #2: Cho rằng không cần biết CSS vẫn dùng được Bootstrap và không cần một designer

Lỗi #3: Thay đổi file CSS của Bootstrap

Lỗi #4: Dùng HẾT mọi thứ Bootstrap cung cấp

Lỗi #5: Dùng hộp hội thoại sai cách

Lỗi #2: Cho rằng không cần biết CSS vẫn dùng được Bootstrap và không cần một designer

Nếu bạn nghĩ dùng Bootstrap không cần biết CSS, thì bạn đã sai. Bất kỳ front-end developer nào cũng cần học CSS và HTML5. Bootstrap bỏ đi rất nhiều phần CSS trick (như là những tiền tố riêng của trình duyệt và cung cấp các định dạng mặc định cơ bản, 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ị (media queries) hoạt động như thế nào, nhưng bạn cần hiểu thiết kế tương ứng (responsive design) hoạt động như thế. 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 source code với dạng LESS hoặc SASS là một cách bắt đầu tốt.

Một việc tương tự, bạn không cần một designer, và bạn có thể lý luận rằng bạn không cần một designer với Bootstrap. Tuy nhiên nếu có thể, hãy dùng sự trợ giúp của một designer. Một than phiền phổ biến với Bootstrap là những sites dùng Bootstrap nhìn giống nhau. Điều này có thể xãy ra. Hàng triệu websites đượ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 ở Bootstrap Expo, một trang tập hợp những sites 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: Thay đổi file CSS của Bootstrap

Đơn giản là: Không được sửa file bootstrap.css.

Nếu bạn thay đổi 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ư khi bạn muốn nâng cấp những file Bootstrap. Bạn có thể viết đè (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ề colors (màu sắc), styles (định dạng), margins (lề ngoài), paddings (lề trong), mọi thứ khác. Không việc gì phải đụng đến file bootstrap.css.

Bạn không biết LESS hoặc SASS? Không sao, bạn có thể tạo file CSS riêng và viết đè bất cứ gì từ bootstrap.css.

Bạn muốn biết nhiều hơn? Hãy dùng source code theo dạng LESS của Bootstrap. 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 file) nếu bạn dùng mã LESS (LESS source), không phải CSS tĩnh (static CSS).

Lỗi #4: Dùng HẾT mọi thứ Bootstrap cung cấp

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

Đặc biệt với plugins. CHỈ dùng những plugins mà bạn cần, và đừng dùng mọi thứ vì chúng trông đẹp và hay. Website của bạn sẽ bị làm quá (overdone). Hãy bắt đầu bằng việc không dùng file bootstrap.js, và tạo site chỉ bằng HTML và CSS. Sau đó, thêm thành phần nào cần cho những việc cụ thể, từng cái một.

Lỗi #5: Dùng hộp hội thoại sai cách

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

Hiển thị nhiều hơn một modal

Bootstrap không hỗ trợ hiển thị chồng (overlapping) modals. Chỉ 1 modal tại 1 thời điểm có thể hiển thị. Hiển thị nhiều hơn 1 modal tại 1 thời điểm có thể đạt được, nhưng cần chỉnh sửa code để 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 đối tượng chứa modal hoặc thành phần cha của nó có thuộc tính position là fixed hoặc relative, modal sẽ không hiển thị đúng. Luôn luôn chắc rằng đối tượng chứa modal và thành phần cha của nó không dùng thuộc tính position đặc biệt. Cách tốt nhất là đặt mã HTML của modal 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 tới giao diện và tính năng của modal.

Modal trên thiết bị di động (mobile devices)

Có một số cảnh báo mà developers cần biết khi làm việc với modals trên thiết bị di động dùng bàn phím ảo mobile devices with virtual keyboards. Đặc biệt chú ý các thiết bị chạy iOS, có một lỗi hiển thị, những thành phần có thuộc tính position là fixed sẽ không được 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 developer sẽ phải xử lý những vấn đề này trong code.

Lỗi #6: Vấn đề với nút chọn file để upload

Bootstrap không thiết kế sẵn thành phần tương ứng với nút upload file. Một cách đơn giản để có được nút upload file đẹ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ụ mẫu khác để làm được việc tương tự. Ví dụ mẫu 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ẫu mở rộng khác cung cấp nhiều tính năng hơn thông qua việc sử dụng thêm mã JavaScript.

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

Designers, hoặc developers 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. Phải CHÚ Ý rằng mọi plugins của Bootstrap có thể áp dụng chỉ đơn thuần thông qua HTML, không cần viết thêm dù chỉ 1 dòng code JavaScript. Đây gọi là API thứ tự đầu tiên của Bootstrap (Bootstrap’s first-class API) và bạn phải xem đây là giải pháp trước nhất khi làm việc với plugins.

Ví dụ, chúng ta có thể kích hoạt 1 modal, không dùng code JavaScript, như sau, thiết lập thuộc tính data-toggle="modal" cho đối tượng kích hoạt như button hay liên kết

9,
<% include partials/header %>

Welcome to our locations

View our Camp grounds

Home Add a new CampGround

<% campgrounds.forEach(function(campground){ %>

<%= campground.name %>

<% }) %>
0 là thiết lập modal có id là myModal sẽ được kích hoạt/hiển thị,


0 là không đóng modal khi user clicks ra ngoài modal, và

1 là không đóng modal khi user nhấn phím escape. 4 thuộc tính được bỏ trong 1 tag HTML kích hoạt duy nhất:
a div{
  max-width: 100%;
}
1

Lỗi #8: Không dùng tools giúp làm việc với Bootstrap dễ dàng

Developers mắc nhiều lỗi khi dùng Bootstrap. Do đó, Bootstrap tạo ra Bootlint, 1 tool kiểm tra cấu trúc HTML của những projects dùng Bootstrap. Bootlint có thể dùng thông qua browser hoặc thông qua dòng lệnh trên nền Node.js. Bootlint giúp bạn làm việc nhanh hơn.

Cao cấp hơn, nếu bạn muốn đóng góp vào project 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ột bản đóng góp code, nó sẽ thực thi một số kiểm tra đối với mỗi bản đóng góp code. Nếu nó thấy không thỏa mãn tính hợp lệ, nó sẽ comment báo lỗi gì và sửa ra sao, và đóng yêu cầu đóng góp code.

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

Bootstrap hoạt động tốt nhất trên những trình duyệt mobile và máy tính mới. Những 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 những trình duyệt này.

Bootstrap browser compatibility

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


2 để đảm bảo IE không chạy trong chế độ compatibility mode. Phần mã HTML

3 trông sẽ như sau:
a div{
  max-width: 100%;
}
4

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

Lỗi #10: Bỏ qua những khuôn mẫu tốt

Một câu hỏi 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 đợi tới khi click. 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 bỏ ra rìa là có lý do, đặc biệt khi Bootstrap là framework ưu tiên hỗ trợ mobile (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 (only touch events). Nên trên mobile nó sẽ không làm việc đúng.

Kết luận

Trong bài hướng dẫn ngắn ngọn này, tôi hy vọng 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ăn bản, và sử dụng framework 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 project. Khi chọn một framework, bạn phải dành thời gian đọc tài liệu, và "chơi" framework để cảm nhận nó và hình dung 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ăn bản, và thích thú/tận hưởng khi tạo ra những thiết kế mới và đẹp.

Tài liệu tham khảo

  • http://www.toptal.com/twitter-bootstrap/the-10-most-common-bootstrap-mistakes
  • http://getbootstrap.com/
  • http://www.w3schools.com/bootstrap/default.asp