9/4...Bootstrap学习，及思路总结

来源：互联网发布：组策略优化工具编辑：程序博客网时间：2024/06/04 00:34

基本作用：bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 —— 强调响应式设计的概念。通过响应式设计，你无需再为你的网站设计一个手机版的。它在任何尺寸的屏幕上看起来都会不错。( 实践网址http://how2j.cn/k/boostrap/boostrap-setup/539.html，使用是非常简单的，只需要套用 bootstrap css中定义的class即可。)

引入的基本步骤

步骤 1 : <!DOCTYPE html>

步骤 2 : 导入js 导入css

步骤 3 : 套用class

步骤 4 : 本地测试

<!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">

<title>Bootstrap 101 Template</title>


<link href="css/bootstrap.min.css" rel="stylesheet">




</head>
<body>
<h1>你好，世界！</h1>


<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>
</body>
</html>

具体的套用：首先，我们需要把所有的HTML内容放在class为container-fluid的div下。

你的html代码

</div>

然后，体会一下缩放的魅力。

（图片自适应：具体实践步骤是找一张巨大的图片，在谷歌浏览器的手机模拟器中，肯定会超出。然后为图片添加img-responsive 的class属性。

内容自动在父容器中居中：在文字容器中加入text-center类。

bootstrap风格自带样式的按钮：在按钮容器中加入btn class 属性

将按钮从行内元素转变为块级元素：添加Bootstrap的 btn-block到你的按钮的 class 中。

将按钮的颜色转变常用的深蓝色：添加Bootstrap的 btn-primary class 属性到按钮标签上。（btn-info是浅蓝）

将多个元素放入一行并指定各个元素的相对宽度的需求:

<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标签里。

）

阅读全文

0 0