bootstrap入门

BOOTSTRAP ginotang 690℃ 0评论

环境搭建

bootstrap依赖的文件不多,一般只需要两个文件就可以使bootstrap框架工作,两个文件一个是css文件,另一个是JavaScript文件。这两个文件分别是:

  • bootstrap.css/bootstrap.min.css
  • bootstrap.js/bootstrap.min.js

这些文件可以从bootstrap官方网站下载,但更简单的方式是使用bootcdn提供的cdn加速服务引入这两个文件。

基本代码:

移动设备优先

bootstrap3 一开始就是对移动设备友好的,因此,为了使页面在移动设备上能够正常缩放,必须在页面中添加下面这句话:

meta标签中还可以设置最大缩放倍数,是否允许用户对页面进行缩放。例如:

布局容器(container)

bootstrap中的元素基本都被包含在布局容器中,布局容器使用.container标识。bootstrap有两种容器,分别是固定宽度和100%宽度两种,固定宽度容器使用.container标识,100%宽度容器使用.container-fluid标识,重要的是,它们不能互相嵌套。

Grid系统

Grid系统由行(row)和列(column)组成,Grid系统中的行和列有如下特点:

  • row必须包含在container中
  • 每一行只能有12列,多出的列会被自动排列到下一行中
  • 只有column可以作为row的直接子元素
  • 列使用以col开头的css类标识

创建一行一列:

Bootstrap中的屏幕分类

bootstrap的屏幕种类按从大到小被划分为4个种类:

  • 超小屏幕(extra small),屏幕像素小于768,一般指手机
  • 小屏幕(small),屏幕像素大于或等于768,一般指平板电脑
  • 中等屏幕(medium),像素大于或等于992,中等桌面显示器(15寸)
  • 大屏幕(large), 像素大于或等于1200,大桌面显示器(17寸)

也就是说,4个种类的屏幕划分可以具体到3种设备,分别是手机,平板和桌面显示器。

bootstrap预定义了4种css样式,这些样式只能应用于column中,它们分别对应上面4种尺寸的屏幕,分别是:

  • col-xs-*
  • col-sm-*
  • col-md-*
  • col-lg-*

创建两栏布局

两栏布局是经典的页面布局,通常左侧用于内容布局,右侧用于边栏。

显示效果如下:

可以见到,当窗口缩少,两栏布局会变成单栏堆叠布局,如果不希望这种情况出现,可以为column添加更多限制:

修改之后,即使在手机这样小的屏幕中,页面依然可以维持两栏布局。

媒体查询

媒体查询的作用是检测运行当前代码的设备屏幕大小,使得我们可以根据不同的设备运用不同的设置。更具体一点,bootstrap列之间的补白(padding)是各15px,加起来间隔就是30px。通过媒体查询,可以在小屏幕设备中设置更小的padding。

less文件中的语法:

设置小屏幕下的padding为各5px:

该样式可直接写在style标签里面

列偏移(column offset)

列偏移就是使column从原来的位置向目标点偏移指定列数。列偏移有4种不同的偏移选项,应用于4种不同屏幕大小的设备,它们分别是:

  • col-xs-offset-*
  • col-sm-offset-*
  • col-md-offset-*
  • col-lg-offset-*

例如,在小屏幕设备使第二列向右偏移4列距离

实际上,你会发现,第二列不仅在小屏幕设备上会发生偏移,该偏移样式同样也应用到了更大的显示设备上。如果你不希望小屏幕以外的设备发生偏移,可以使用样式覆盖:

样式覆盖产生的效果和列偏移一样:小范围的样式会影响更大范围的样式,因此,设置了col-md-offset-0之后,范围比md更大的设备也不会产生列偏移。

列重排序

列的重排序通过向前推往后拉的方式实现,向前推和往后拉具体由col-*-push-*col-*-pull-*实现。

运行后第一列和第二列的位置互相交换。

使用表单

按照表单的排列方式划分,bootstrap有3类表单。分别是堆叠表单、内联表单和水平排列表单。

bootstrap中的表单使用样式form-control标识,且最好把表单元素放置于form-group元素标记的div中。

堆叠表单

所有表单元素从上到下排列, 包括label标签本身也会占用一行

stack form

 

内联表单

所有表单排列在一行,内联表单通过把表单元素放置于使用form-inline标记的form中来达到目的。

内联表单必须为每个input元素添加label标签,否则屏幕阅读器无法正确识别。如果确实不需要label标签,可以使用.sr-only样式标记该标签,使标签仅在屏幕阅读器下可见。

inline form

 

水平排列表单

一个表单排一行,这是最常用的方式。水平排列的表单使用.form-horizontal样式标记。

horizontal form

水平排列的表单元素配合预定义的栅格类,使表单元素可不被row包含。

有两点需要注意的:

第一:配合栅格系统使用的label必须添加control-label样式修饰,否则label默认左对齐

align left without control label

 

 

第二:栅格系统的布局样式不能应用于input标签,label标签可以。因此input标签需要使用div包裹。

静态控件

静态控件指控件内容一般不会再改变的控件,最常见的如p标签。

如果需要在表单中将一行纯文本和label元素放置于一行,只需要为p元素添加.form-control-static样式即可。

static control

 

 

 

 

 

一些代码

 

转载请注明:Pure nonsense » bootstrap入门

喜欢 (0)
0 0 投票数
文章评分
订阅评论
提醒
guest
0 评论
内联反馈
查看所有评论
0
希望看到您的想法,请您发表评论x
()
x