bootstrap使用笔记

发布时间:2020-11-11 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了bootstrap使用笔记编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文翻译自【http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem】

1、需要在H5的文档声明中使用;

2、如下一个简单的两列布局,先添加一个class=row,用class=span*来表示占几列。每一行的span加起来刚好是12;

<div class="row">
  ="span4">...</div="span8">
>

3、用.offset*表示右移多少。.offset4 moves .span4 over four columns.

4、嵌套列。新开辟一个row,在这个下面再添加span,但所有span之和为row的大小。e.g.

="span9">
    Level 1 column
    >
      ="span6">Level 2="span3">
    >

5、流式网格布局,采用的是百分比而不是像素大小。

基本流体,只需将.row 改为 .row-fluid.

="row-fluid">

流体偏移,仍旧使用.offset*

="span4 offset2">

流体嵌套

="span12"
    Fluid 12
    
        Fluid 6
        >
          >Fluid 6>
        >

2、布局

1、固定布局,只需<div class="container">

body="container"
    ...
  >

2、流体布局  <div class="container-fluid">

="container-fluid"="span2"<!--Sidebar content-->
    ="span10"Body content>

3、响应式设计

 要想使用响应式布局,需要添加相应的meta标签;同时还要添加bootstrap的响应式css。

meta name="viewport" content="width=device-width,initial-scale=1.0"link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

支持设备

Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:

Label Layout width Column width Gutter width
Large display 1200px and up 70px 30px
Default 980px and up 60px 20px
Portrait tablets 768px and above 42px 20px
Phones to tablets 767px and below Fluid columns,no fixed widths
Phones 480px and below Fluid columns,no fixed widths
/* Large desktop */
@media (min-width: 1200px) { ... }
 
 Portrait tablet to landscape and desktop 
@media (min-width: 768px) and (max-width: 979px) { Landscape phone to portrait tablet 
@media (max-width: 767px) { Landscape phones and down 
@media (max-width: 480px) { ... }

响应实用类

Responsive utility classes

可以用这些实用类在设备中显示或隐藏内容,下表是一个可用的类和他们在给定的设备中的效果,这些都可以在responsive.less中找到。

For faster mobile-friendly development,use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

Class Phones767px and below Tablets979px to 768px DesktopsDefault
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

When to use

Use on a limited basis and avoid creating entirely different versions of the same site. Instead,use them to complement each device's presentation. Responsive utilities should not be used with tables,and as such are not supported.

你可以用他们在不同的设备中呈现不同的显示。响应实用类不可以与表格一起用,因为它不支持表格。

e.g.

 

总结

以上是编程之家为你收集整理的bootstrap使用笔记全部内容,希望文章能够帮你解决bootstrap使用笔记所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478