Hoạt hình thành công trong bootstrap
Nắm bắt được những phần chính trong kết cấu của Bootstrap, bao gồm cả cách tiếp cận của chúng tôi đối với việc phát triển web tốt hơn, nhanh hơn và mạnh hơn Show
loại tài liệu HTML5Bootstrap sử dụng các phần tử HTML và các thuộc tính CSS, những yêu cầu thứ nhất phải sử dụng HTML5 doctype. Vì thế, hãy thêm nó vào dòng đầu tiên trong các dự án của bạn
Ưu tiên các thiết bị di độngVới Bootstrap 2, chúng tôi đã bổ sung thêm các phong cách thân thiện với các thiết bị di động như một phần chính của khung. Tuy nhiên, trong Bootstrap 3, chúng tôi đã viết lại dự án để có thể tương thích với các thiết bị di động ngay từ khi bắt đầu. Thay vì phải thêm các tùy chọn kiểu dáng cho các thiết bị, chúng tôi đã gắn trực tiếp vào lõi. Các kiểu dành cho thiết bị di động xuyên suốt trong cả thư viện thay vì nằm trong các tệp riêng lẻ Để đảm bảo việc kết xuất và "chạm phóng to", hãy thêm thẻ meta viewport vào của bạn
Bạn có thể vô hiệu hóa tính năng phóng to trên các thiết bị di động bằng cách thêm 17 vào chế độ xem meta của thẻ. Thuộc tính này sẽ vô hiệu hóa tính năng phóng to, điều đó có nghĩa là người dùng chỉ có thể cuộn trang, tạo cảm giác như người dùng đang sử dụng một ứng dụng điện thoại thuần túy. Nhìn chung, chúng tôi không đề xuất sử dụng thuộc tính này trên tất cả các trang web, vì vậy hãy cân nhắc trước khi sử dụng
Bootstrap thiết lập các kiểu chung cho công việc hiển thị, kiểu chữ và các liên kết. Cụ thể, chúng tôi
Những phong cách này nằm trong tập tin 25bình thường hóa. cssĐể cải thiện việc kết xuất đối với các trình duyệt, chúng tôi sử dụng Chuẩn hóa. css, một dự án được thực hiện bởi Nicolas Gallagher và Jonathan Neal Hộp đựngDễ dàng căn giữa nội dung của một trang bằng cách bọc nội dung của nó bên trong một 26. Vùng chứa thiết lập thuộc tính 27 trên tất cả các kích thước được áp dụng cho truy vấn phương tiện để tương thích với hệ thống lưới của chúng tôi. Lưu ý rằng, do 28 và chiều rộng cố định nên vùng chứa mặc định không thể bị lồngSử dụng lớp 26 cho một vùng chứa đáp ứng có chiều rộng cố định 6Sử dụng lớp 30 cho vùng chứa có chiều rộng tối đa, bằng chiều rộng khung nhìn của bạn 8Bootstrap bao gồm một hệ thống lưới đáp ứng, tương thích với hầu hết các thiết bị di động. Hệ thống này được chia thành 12 cột tương thích với mọi kích thước khung nhìn của thiết bị. Nó bao gồm các lớp được định nghĩa trước để thuận tiện cho việc xây dựng tổ chức cục bộ, cùng với đó là một bộ trộn để tạo ra nhiều tổ chức cục bộ theo ngữ nghĩa Giới thiệuCác hệ thống lưới được sử dụng để tạo ra các cực cho các trang bằng các chuỗi và cột chứa nội dung của bạn. Và dưới đây là cách hệ thống lưới Bootstrap đang hoạt động
Vui lòng xem các ví dụ để biết cách áp dụng các nguyên tắc này vào mã của bạn Chúng tôi sử dụng các truy vấn phương tiện sau trong các tập tin Ít hơn của chúng tôi để tạo ra các điểm nổi bật chính trong hệ thống lưới của chúng tôi 6Để tương thích với một số ít thiết bị, chúng tôi sẽ mở rộng các truy vấn phương tiện này bằng cách bổ sung thuộc tính 38 8Các tùy chọn của lướiVui lòng xem hệ thống lưới của Bootstrap đang hoạt động như thế nào trên các thiết bị trong bảng sau Thiết bị siêu nhỏ Điện thoại (<768px)Thiết bị nhỏ Máy tính bảng (≥768px)Thiết bị trung bình Máy tính để bàn (≥992px)Thiết bị lớn Máy tính để bàn (≥1200px)Hành vi lưới Luôn luôn nằm ngangThu gọn để bắt đầu, nằm ngang trên các điểm dừng Chiều rộng vùng chứa Không có (tự động)750px970px1170px Tiền tố lớp 39 40 41 42# của cột12Độ rộng cộtTự động Ví dụ. Chồng theo hàng ngangSử dụng một tập hợp các lớp 43, bạn có thể tạo ra một hệ thống lưới cơ bản. Hệ thống này sẽ hiển thị chồng lên nhau trên thiết bị di động và máy tính bảng (kích thước nhỏ) trước khi hiển thị dưới dạng hàng ngang trên màn hình máy tính (kích thước trung bình). Please set the column of the grid to side in the 33 5Ví dụ. thùng chứa chất lỏngChuyển bất kỳ một mạng lưới lưới có chiều rộng cố định nào thành một mạng lưới có chiều rộng đầy đủ bằng cách thay đổi 26 bên ngoài cùng thành 30 8Ví dụ. Điện thoại di động và máy tính để bànBạn không muốn các cột của bạn xếp chồng lên nhau trên các thiết bị có màn hình nhỏ? . Vui lòng xem ví dụ bên dưới để hiểu rõ hơn về cách thức hoạt động 1Ví dụ. Điện thoại, máy tính bảng, máy tính để bànBạn có thể tạo ra các cơ cấu tổ chức cục bộ hơn nữa bằng cách sử dụng các lớp dành cho bảng máy tính 49col-xs-12. col-sm-6. col-md-8 0Đặt lại cột đáp ứngKhi sử dụng 4 bậc (tương ứng với 4 điểm kích thước của màn hình) của hệ thống lưới, bạn sẽ gặp phải một vấn đề, đó là tại một kích thước được xác định, có thể sẽ có một cột cao hơn các cột . Để sửa lỗi này, hãy sử dụng một lớp 50 cùng với các lớp đáp ứng tiện ích của chúng tôi.col-xs-6 .col-sm-3 1Ngoài việc xóa các cột tại các điểm Responsive, bạn có thể cần thực hiện reset offset, push, hooặc pull. Vui lòng tham khảo ví dụ lưới để hiểu rõ hơn 2Di chuyển cộtDi chuyển cột sang phía bên phải bằng cách sử dụng các lớp 51. Các lớp này làm tăng khoảng cách lề trái (margin-left) của một cột lên bằng 52 cột. Ví dụ, 53 dịch 54 sang bên phải một khoảng cách bằng 4 lần chiều rộng của một cộtcol-md-4. col-md-offset-4 col-md-3. col-md-offset-3 col-md-3. col-md-offset-3 col-md-6. col-md-offset-3 3Các cột lồng nhauĐể tạo các cột khác nhau, Vui lòng thêm một 33 mới và một tập tin cột 43 bên trong cột 43 đã tồn tại. Các hàng nằm bên trong có thể chứa một tập hợp các cột, tối đa là 12 hoặc ít hơn 4Thứ tự cộtDễ dàng thay đổi thứ tự của các cột trong hệ thống lưới bằng cách sử dụng các lớp 58 và 59 5Các biến số và mixin Ít hơnNgoài các lớp của lưới được xây dựng sẵn để thuận tiện cho việc xây dựng cục bộ một cách nhanh chóng, Bootstrap còn sử dụng các biến số và mixin Ít hơn để tạo ra các bố cục ngữ nghĩa đơn giản của riêng bạn biến sốCác biến tham số xác định số lượng cột, độ rộng và kích thước truy vấn phương tiện. Chúng tôi sử dụng những biến này để tạo ra các lưới lớp (đã đề cập ở phía trên) cũng như các mixin được liệt kê bên dưới đây 6hỗn hợpMixin được sử dụng để liên kết với các biến số , mục đích là để tạo ra CSS ngữ nghĩa cho các cột riêng lẻ trong hệ thống lưới 7Ví dụ ứng dụngBạn có thể thay đổi giá trị các biến số về các giá trị tùy biến của riêng bạn, nếu không hãy sử dụng các giá trị trộn lẫn với các giá trị mặc định của nó. Đây là một ví dụ về việc sử dụng các thiết lập mặc định để tạo ra một cột cục bộ 2 với khoảng trắng ở giữa 8 9tiêu đềTất cả các tiêu đề thẻ của HTML, thẻ từ to, all available. Các lớp từ 60 đến 61 được sử dụng khi bạn muốn tạo kiểu cho các thẻ tiêu đề nhưng vẫn muốn văn bản của bạn hiển thị trên cùng một dòngNét chấm phẩy 36px h2. tiêu đề bootstrapNét chấm phẩy 30pxh3. tiêu đề bootstrapDấu chấm phẩy 24pxh4. tiêu đề bootstrapNét chấm phẩy 18pxh5. tiêu đề bootstrapDấu chấm phẩy 14pxh6. Tiêu đề BootstrapSemibold 12px 0Bạn cũng có thể tạo ra các văn bản khác đi kèm trong tiêu đề bằng thẻ 62hoặc lớp 63h2. Tiêu đề Bootstrap Văn bản phụh3. Tiêu đề Bootstrap Văn bản phụh4. Tiêu đề Bootstrap Văn bản phụh5. Tiêu đề Bootstrap Văn bản phụh6. Tiêu đề Bootstrap Văn bản phụ 1Thân hình 64 default of Bootstrap is 14px, with 65 has Rate 1. 428. Các thuộc tính này được áp dụng cho các phần và tất cả các đoạn văn bản. Hơn nữa,(các đoạn văn) sẽ nhận khoảng căn lề bên dưới (margin-bottom) bằng một nửa chiều cao dòng của chúng (mặc định là 10px) Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur musiculus. Nullam id dolor id nibh ultricies phương tiện Cum sociis natoque penatibus et magnis dis parturient montes, nascetur musiculus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit Làm nổi bật đoạn vănBạn có thể làm cho một đoạn văn trở nên nổi bật hơn bằng cách thêm lớp 66Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus Build with LessTypograghy ratio trong Bootstrap based on 2 variable in Ít hơn trong các biến. ít hơn. 21 và 22. Biến thứ nhất là cơ sở kích thước phông chữ được sử dụng rất phổ biến, còn biến thứ hai là cơ sở chiều cao dòng. Chúng tôi sử dụng những biến này và một số cơ sở toán học cho phép để tạo lề, phần đệm và chiều cao dòng. Các biến tùy chỉnh và Bootstrap sẽ tự động điều chỉnhNhấn mạnhVui lòng sử dụng các thẻ nhấn mạnh mặc định của HTML với các kiểu đơn giản Text has small sizeĐể giảm tính năng nhấn mạnh cho các đoạn văn bản hoặc khối văn bản, hãy sử dụng thẻ 62 để thay đổi kích thước của những văn bản đó bằng 85% so với kích thước của phần tử cha. Các phần tử tiêu đề nhận những 64 của riêng họ khi nằm trong thẻ 62. Bạn cũng có thể sử dụng một phần tử có lớp 63 trên cùng một dòng thay vì 62Dòng văn bản này được coi là bản in đẹp 2in đậmĐược sử dụng để nhấn mạnh một đoạn văn bản với giá trị font-weight cao Đoạn văn bản sau đây được hiển thị dưới dạng văn bản in đậm 3in nghiêngĐược sử dụng để nhấn mạnh một đoạn văn bản với chữ nghiêng Đoạn văn bản sau đây được hiển thị dưới dạng văn bản in nghiêng 4Các phần tử thay thếBạn có thể tự sử dụng các thẻ 62 và 62 trong HTML5. Thẻ 62được sử dụng để in đậm một từ hoặc cụm từ trong khi thẻ 62được sử dụng phổ biến cho các thuật ngữ về kỹ thuật, âm thanh,Các lớp căn chỉnhDễ dàng căn chỉnh lại văn bản với các thành phần khác bằng các lớp căn chỉnh văn bản Văn bản căn trái Căn giữa văn bản Văn bản được căn phải văn bản hợp lý 5Tên viết tắtSử dụng thẻ 62 của HTML để hiển thị tên viết tắt, và sẽ hiển thị đầy đủ tên khi di chuột qua. Các thẻ này thuộc tính 79 đi kèm, có đường viền bên dưới ở dạng các dấu chấm liền nhau và khi di chuột qua sẽ hiển thị con trỏ dạng trợ giúpTên viết tắt cơ bảnThuộc tính sử dụng của 79 có giá trị là tên đầy đủ của tên viết tắt trên thẻ 62Viết tắt của thuộc tính từ là attr 6chủ nghĩa ban đầuThêm lớp 82 vào thẻ 62 để thiết lập kích thước phông chữ nhỏ hơn một chútHTML là thứ tốt nhất kể từ khi bánh mì cắt lát 7addressHiển thị thông tin liên hệ cho phần tử cha gần nhất hoặc cả. Để bảo toàn định dạng, hãy kết thúc tất cả các dòng bằng thẻ 84Twitter, Inc. 8Trích dẫn khốiĐể trích dẫn một khối nội dung từ một nguồn khác trong tài liệu của bạn Default default blockHãy bọc một khối HTML bất kỳ mà bạn muốn trích dẫn bằng thẻ thẻ ưu tiên sử dụng Line lineKhi bạn muốn sử dụng những đoạn mã gợi ý trên cùng 1 dòng, hãy đóng gói nó bằng thẻ 90 39 40 41
Bạn có thể thêm lớp 92 để thiết lập chiều cao tối đa bằng 350px và cho phép người dùng cuộn nội dung theo chiều dọc
biến sốĐể chỉ rõ đâu là biến số, hãy sử dụng thẻ 62
80
Đầu ra mẫuĐể xác định đầu ra mẫu của một chương trình, hãy sử dụng thẻ 62
Văn bản này được coi là đầu ra mẫu từ một chương trình máy tính 81 95 vào thẻ bất kỳ 96 97 để thêm kiểu định dạng đường kẻ lừa cho bất kỳ bảng nào mà bạn muốnTương thích với hầu hết các loại trình duyệtBảng kẻ sọc được tạo kiểu thông qua bộ chọn 98 của CSS(Không được hỗ trợ trong Internet Explorer 8)#First NameLast NameUsername1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter 82Table has a borderThêm lớp 99 để hiển thị đường bao cho bảng và các ô trong bảng#First NameLast NameUsername1MarkOtto@mdoMarkOtto@TwBootstrap2JacobThornton@fat3Larry the Bird@twitter 82Bảng có dòng đổi màu khi di chuộtThêm lớp 00 để kích hoạt trạng thái di chuột trên các dòng của bảng bên trong thẻ#First NameLast NameUsername1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter 82Chặt bảngThêm lớp 01 để làm cho các ô trong bảng gần nhau hơn#First NameLast NameUsername1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter 82Các class theo ngữ cảnhSử dụng các lớp theo ngữ cảnh để tô màu cho các dòng hoặc các ô trong bảng ClassDescription 02Áp dụng màu hover cho một dòng hoặc một ô trong bảng 03Biểu thị sự thành công hoặc một hành động tích cực 04Biểu thị sự thay đổi và hành động mang tính thông báo 05Biểu thị sự báo hoặc nhắc nhở 06Biểu thị sự nguy hiểm hoặc một hành động mang tính #Tiêu đề cộtTiêu đề cộtTiêu đề cột1Nội dung cộtNội dung cộtNội dung cột2Nội dung cộtNội dung cộtNội dung cột3Nội dung cộtNội dung cộtNội dung cột4Nội dung cộtNội dung cộtNội dung cột5Nội dung cộtNội dung cột6Nội dung cộtNội dung cột7Nội dung cộtNội dung cột8Nội dung cộtNội dung cột9Nội dung cột9Nội dung cộtNội dung cột 87Bảng đáp ứngĐể tạo bảng đáp ứng, hãy bọc phần tử có lớp 07 bằng một phần tử khác có lớp 08, khi đó bảng sẽ tự động điều chỉnh kích thước cho phù hợp và cho phép người dùng cuộn ngang trên thiết bị di động (độ #Table headingTiêu đề bảngTiêu đề bảngTiêu đề bảngTiêu đề bảngTiêu đề bảngTiêu đề bảng1Ô của bảngÔ của bảngÔ của bảngÔ của bảngÔ của bảngTô của bảng2Ô của bảng của Ô của bảng là Ô của ô của bảng. Ô của bảng là Ô của bảng. #Table headingTiêu đề bảngTiêu đề bảngTiêu đề bảngTiêu đề bảngTiêu đề bảngTiêu đề bảng1Ô của bảngÔ của bảngÔ của bảngÔ của bảngÔ của bảngTô của bảng2Ô của bảng của Ô của bảng là Ô của ô của bảng. Ô của bảng là Ô của bảng. 88ví dụ cơ bảnCác thành phần của biểu mẫu (điều khiển biểu mẫu) tự động nhận một số kiểu chung. Toàn bộ các form-control 62, 62Hộp kiểm và radioHộp kiểm được sử dụng để lựa chọn một hoặc nhiều tùy chọn trong một danh sách. Trong khi đó, radio được sử dụng cho việc lựa chọn 1 tùy chọn duy nhất Default (xếp chồng) 89Hộp kiểm trên cùng một dòngHãy sử dụng lớp 11 hoặc 12 để hiển thị danh sách các hộp kiểm/radio trên cùng một dòng 60Lựa chọnSử dụng tùy chọn mặc định hoặc bổ sung 13 để hiển thị nhiều tùy chọn cùng một lúc 61Các form-control tĩnhKhi bạn cần đặt một dòng văn bản thuần bên cạnh một nhãn bên trong một biểu mẫu dàn hàng ngang, hãy sử dụng lớp 14 trên thẻ. 62Đầu vào đang được tập trungChúng tôi loại bỏ 15 mặc định trên một số kiểm soát biểu mẫu và sử dụng 16 để hiển thị đầu vào như đang được 17Trình diễn
|