主要内容
环境搭建
bootstrap依赖的文件不多,一般只需要两个文件就可以使bootstrap框架工作,两个文件一个是css文件,另一个是JavaScript文件。这两个文件分别是:
- bootstrap.css/bootstrap.min.css
- bootstrap.js/bootstrap.min.js
这些文件可以从bootstrap官方网站下载,但更简单的方式是使用bootcdn提供的cdn加速服务引入这两个文件。
基本代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 导入bootstrap css样式 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <title>Beginning Bootstrap</title> </head> <body> <!-- 导入bootstrap JavaScript文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html> |
移动设备优先
bootstrap3 一开始就是对移动设备友好的,因此,为了使页面在移动设备上能够正常缩放,必须在页面中添加下面这句话:
1 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
meta标签中还可以设置最大缩放倍数,是否允许用户对页面进行缩放。例如:
1 |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> |
布局容器(container)
bootstrap中的元素基本都被包含在布局容器中,布局容器使用.container
标识。bootstrap有两种容器,分别是固定宽度和100%宽度两种,固定宽度容器使用.container
标识,100%宽度容器使用.container-fluid
标识,重要的是,它们不能互相嵌套。
1 2 3 4 5 |
<!-- 固定宽度 --> <div class="container"></div> <!-- 100%宽度 --> <div class="container-fluid"></div> |
Grid系统
Grid系统由行(row)和列(column)组成,Grid系统中的行和列有如下特点:
- row必须包含在container中
- 每一行只能有12列,多出的列会被自动排列到下一行中
- 只有column可以作为row的直接子元素
- 列使用以col开头的css类标识
创建一行一列:
1 2 3 4 5 6 7 |
<!-- 固定宽度 --> <div class="container"> <!-- 创建一行一列 --> <div class="row"> <div class="col-lg-12"><p>.col-lg-12</p></div> </div> </div> |
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-*
创建两栏布局
两栏布局是经典的页面布局,通常左侧用于内容布局,右侧用于边栏。
1 2 3 4 5 6 |
<div class="container"> <div class="row show-grid"> <div class="col-md-8">col-md-8</div> <div class="col-md-4 show-grid">col-md-4</div> </div> </div> |
显示效果如下:
可以见到,当窗口缩少,两栏布局会变成单栏堆叠布局,如果不希望这种情况出现,可以为column添加更多限制:
1 2 3 4 5 6 |
<div class="container"> <div class="row show-grid"> <div class="col-md-8 col-xs-8">col-md-8</div> <div class="col-md-4 col-xs-4">col-md-4</div> </div> </div> |
修改之后,即使在手机这样小的屏幕中,页面依然可以维持两栏布局。
媒体查询
媒体查询的作用是检测运行当前代码的设备屏幕大小,使得我们可以根据不同的设备运用不同的设置。更具体一点,bootstrap列之间的补白(padding)是各15px,加起来间隔就是30px。通过媒体查询,可以在小屏幕设备中设置更小的padding。
less文件中的语法:
1 2 3 4 5 6 7 8 |
/* 小屏幕(平板,大于等于 768px) */ @media (min-width: @screen-sm-min) { ... } /* 中等屏幕(桌面显示器,大于等于 992px) */ @media (min-width: @screen-md-min) { ... } /* 大屏幕(大桌面显示器,大于等于 1200px) */ @media (min-width: @screen-lg-min) { ... } |
设置小屏幕下的padding为各5px:
该样式可直接写在style标签里面
1 2 3 4 |
@media (min-width: 768px) { div[class^="col"]{padding-left:5px; padding-right:5px;} } |
列偏移(column offset)
列偏移就是使column从原来的位置向目标点偏移指定列数。列偏移有4种不同的偏移选项,应用于4种不同屏幕大小的设备,它们分别是:
- col-xs-offset-*
- col-sm-offset-*
- col-md-offset-*
- col-lg-offset-*
例如,在小屏幕设备使第二列向右偏移4列距离
1 2 3 4 |
<div class="row show-grid"> <div class="col-sm-4">col-sm-4</div> <div class="col-sm-4 col-sm-offset-4">col-sm-4</div> </div> |
实际上,你会发现,第二列不仅在小屏幕设备上会发生偏移,该偏移样式同样也应用到了更大的显示设备上。如果你不希望小屏幕以外的设备发生偏移,可以使用样式覆盖:
1 2 3 4 |
<div class="row show-grid"> <div class="col-sm-4">col-sm-4</div> <div class="col-sm-4 col-sm-offset-4 col-md-offset-0">col-sm-4</div> </div> |
样式覆盖产生的效果和列偏移一样:小范围的样式会影响更大范围的样式,因此,设置了col-md-offset-0之后,范围比md更大的设备也不会产生列偏移。
列重排序
列的重排序通过向前推
和往后拉
的方式实现,向前推和往后拉具体由col-*-push-*
和col-*-pull-*
实现。
1 2 3 4 |
<div class="row show-grid"> <div class="col-md-8 col-md-push-4">.col-md-8 .col-md-push-4</div> <div class="col-md-4 col-md-pull-8">.col-md-4 .col-md-pull-8</div> </div> |
运行后第一列和第二列的位置互相交换。
使用表单
按照表单的排列方式划分,bootstrap有3类表单。分别是堆叠表单、内联表单和水平排列表单。
bootstrap中的表单使用样式form-control
标识,且最好把表单元素放置于form-group
元素标记的div中。
堆叠表单
所有表单元素从上到下排列, 包括label标签本身也会占用一行
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="container"> <div class="row"> <!-- 把你的代码放在这里 --> <div class="form-group"> <label for="exampleInputEmail">Email address</label> <input type="email" class="form-control" id="exampleInputEmail" placeholder="Email" /> </div> <div class="form-group"> <label for="exampleInputPassword">Password</label> <input type="password" class="form-control" id="exampleInputPassword", placeholder="Password" /> </div> </div> </div> |
内联表单
所有表单排列在一行,内联表单通过把表单元素放置于使用form-inline
标记的form
中来达到目的。
内联表单必须为每个input
元素添加label
标签,否则屏幕阅读器无法正确识别。如果确实不需要label标签,可以使用.sr-only
样式标记该标签,使标签仅在屏幕阅读器下可见。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="container"> <div class="row"> <form class="form-inline"> <div class="form-group"> <label for="exampleInputName">Name</label> <input type="text" class="form-control" id="exmapleInputName" placeholder="your name here" /> </div> <div class="form-group"> <label for="exmapleInputEmail">Email</label> <input type="text" id="exmapleInputEmail" class="form-control" placeholder="Email" /> </div> </form> </div> </div> |
水平排列表单
一个表单排一行,这是最常用的方式。水平排列的表单使用.form-horizontal
样式标记。
水平排列的表单元素配合预定义的栅格类,使表单元素可不被row包含。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="container"> <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-md-2 control-label">Email</label> <div class="col-md-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> </form> </div> |
有两点需要注意的:
第一:配合栅格系统使用的label必须添加control-label
样式修饰,否则label默认左对齐
第二:栅格系统的布局样式不能应用于input标签,label标签可以。因此input标签需要使用div包裹。
静态控件
静态控件指控件内容一般不会再改变的控件,最常见的如p
标签。
如果需要在表单中将一行纯文本和label元素放置于一行,只需要为p
元素添加.form-control-static
样式即可。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<form class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <p class="form-control-static">email@example.com</p> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div> </div> </form> |
一些代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <title>Beginning Bootstrap</title> <style type="text/css"> .show-grid [class^=col-] { padding-top: 10px; padding-bottom: 10px; background-color: #eee; background-color: rgba(86, 61, 124, .15); border: 1px solid #ddd; border: 1px solid rgba(86, 61, 124, .2); } </style> </head> <body> <div class="container"> <div class="row show-grid"> <!-- 把你的代码放在这里 --> </div> </div> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html> |
转载请注明:Pure nonsense » bootstrap入门