基本作用:bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 —— 强调响应式设计
的概念。通过响应式设计,你无需再为你的网站设计一个手机版的。它在任何尺寸的屏幕上看起来都会不错。( 实践网址http://how2j.cn/k/boostrap/boostrap-setup/539.html,使用是非常简单的,只需要套用 bootstrap css中定义的class即可。)
引入的基本步骤
<!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">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好,世界!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
具体的套用:首先,我们需要把所有的HTML内容放在class为container-fluid
的div
下。
<div class="container-fluid">
你的html代码
</div>
然后,体会一下缩放的魅力。
(图片自适应:具体实践步骤是找一张巨大的图片,在谷歌浏览器的手机模拟器中,肯定会超出。然后为图片添加img-responsive 的class属性。
内容自动在父容器中居中:在文字容器中加入text-center类。
bootstrap风格自带样式的按钮:在按钮容器中加入btn
class 属性
将按钮从行内元素转变为块级元素:添加Bootstrap的 btn-block到你的按钮的 class 中。
将按钮的颜色转变常用的深蓝色:添加Bootstrap的 btn-primary class 属性到按钮标签上。(btn-info是浅蓝)
将多个元素放入一行并指定各个元素的相对宽度的需求:
<div class="row">
<div class="col-xs-4">要定位的元素</div>
<div class="col-xs-4">要定位的元素</div>
<div class="col-xs-4">要定位的元素</div>
</div>
文字深蓝色:给文本容器添加Bootstrap的 text-primary样式
如果要在一行字中单独对2个字变色,应如何去做??<p>Things cats <span class="text-danger">love:</span></p>
) 有些常见的小图标可以引用Font Awesome 等库,使用方法和Bootstrap类似。一般用在i标签里。
)