0%

bootstrap使用指南

Bootstarp是一个前端开发框架,来自Twitter,它基于 Html , css , javascript ,它简洁灵活,使得WEB开发变得更加快捷

提示自己,多看官方文档

多看官方文档

多看官方文档

多看官方文档

框架

一个半成品软件,开发人员可以在框架基础上,在进行开发,简化编码

好处

  1. 定义了很多的 css 样式和 js 插件,我们开发人员可以使用这些样式和插件得到丰富的页面效果
  2. 响应式布局(同一套页面可以兼容不同分辨率的设备)

快速入门

下载 Bootstarp

进入 Bootstarp中文网

点击中文文档,然后下载即可

也可以使用Bower进行安装

1
2
3
执行以下命令

$ bower install bootstrap

还可以使用npm进行安装

1
2
3
执行以下命令

$ npm install bootstrap@3

更多资料查看官方文档了解

在项目中使用

把下载下来的压缩包解压后,将里面的东西复制到你的项目里

然后创建里 html 文件(如果有可以不用创建),引入必要的资源文件

查看 说明文档 里的基本模板

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
以下就是基本模板里的代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
<!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好,世界!</h1>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>

里面引用的文件来自远端,如果你已经下载的 bootstrap 那么可以修改 link 后面的地址为本地文件地址

响应式布局

响应式布局的实现依赖于栅格系统,相当于把一行分成12个格子,可以指定元素占几个格子

步骤(详细的查看官方文档)

  1. 定义容器,相当于之前的 table

    1
    2
    3
    4
    5
    容器也有分类

    container-fluid:每一种设备都是100%宽度

    container:两边有留白,不会占满,具体查阅官方文档
  2. 定义行,相当于 tr

    image

  3. 定义元素,指定该元素在不同的设备上占的格子数目

    image

    下面提供代码来展现栅格系统,把代码复制进去然后运行到浏览器就行,但是注意看引用的地址是不是正确

    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
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
     <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>

    <style>
    .inner{
    border: 1px solid red;
    } /* 加上边框 */
    </style>

    </head>
    <body>
    <!-- 定义容器 -->
    <div class="container-fluid">
    <!-- 定义行 -->
    <div class="row">
    <!-- 定义元素 -->
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    </div>
    </div>
    </body>
    </html>

注意:

  • 一行中如果格子数目超过12,超过部分自动换行
  • 栅格类属于向上兼容,适用于与屏幕宽度大于或等于分界点大小的设备
  • 如果真实设备宽度小于设置栅格类属性的设备代码的最小值,会一个元素占满一整行

全局CSS样式

全局CSS样式:

  • 按钮
  • 图片
  • 表格
  • 表单

组件:

  • 导航条
  • 分页条

插件:

  • 轮播图

按钮

bootstrap 的中文文档里找到全局CSS样式,翻到按钮

将展示代码复制到编辑器里即可查看效果

1
2
3
4
5
6
或者复制下面这段代码也可以

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

文档下面也提供了很多样式,可以自行查阅修改

图片

依旧查看官方文档

这里放上一个例子,可以让图片适应响应式布局,即随着窗口的大小变化,图片一直会保持100%的显示

1
2
3
使用下面代码引用图片即可

<img src="..." class="img-responsive" alt="Responsive image">

官方文档还提供了很多改变图片形状等的例子,自行查阅体验

表格

通过对 table 表情添加不同的 class 属性就可以弄出不同的表格

条纹状表格:class="table table-striped"

带边框的表格: class="table table-bordered"

鼠标悬停: class="table table-hover"

更多的样式查看官方文档了解 官方文档是个神奇的东西

组件和插件

老样子,其实最大的帮助是你去看官方文档

导航条

这里提供导航条的代码

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

将导航条内放置品牌标志的地方替换为 <img> 元素即可展示自己的品牌图标

由于 .navbar-brand 已经被设置了 内补(padding)高度(height),你需要根据自己的情况添加一些 CSS 代码从而覆盖默认设置

1
2
3
4
5
6
7
8
9
10
11
代码展示

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>

分页条

为您的网站或应用提供带有展示页码的分页组件

这是一个简单的分页组件的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>

除此之外,你还可以定义它的大小,通过改变 ulclass

标准(就是上面的代码):class="pagination"

比标准小:class="pagination pagination-lg"

比标准大:class="pagination pagination-sm"

轮播图

轮播图都见过应该,就是一些图片按一定时间自动更换

下面是轮播图的代码片段

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
34
35
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>

<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

但是直接复制是看不到图片的,如果要看到图片在 <img src="..." alt="...">src 里面加入你图片的地址

至于 </div> 上面那个 ... ,把其替换成文字,就可以看出效果了

后记

markdown 是可以在里面写 html 的,本来写进去会展示的更直观,但是我不想太麻烦

所以就没写进去

bootstrap 的快速使用就到这里了,这些只是一些很基本的东西

如果要深入使用,要好好看开发文档

----------------本文结束感谢阅读----------------
如果觉得文章好的话,就打个赏吧!
隐藏