图片与辅助样式
响应式图片.img-responsive
1.新建一个web项目ch08。
2.在ch08中新建一个demo01.html，将css文件模版导入进来。
3.将移动设备优先拷贝到demo01的头文件中。
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no”>
4.导入css文件
5.定义一个div，设置响应式图片
<div class="container">
<img src="img/pic01.jpg" class="img-responsive" />
<hr/>
6.运行效果（图片会跟着屏幕大小来自适应）
那么，这个css样式做了什么事情呢？
其实，它就是对图片的宽度设了100%，高度自动。
图片形状
-
设置图片形状（三种样式）
-
<hr/>
<img src="img/pic01.jpg" width="150" height="150" class="img-rounded" />
<img src="img/pic01.jpg" width="150" height="150" class="img-circle" />
<img src="img/pic01.jpg" width="150" height="150" class="img-thumbnail" />
2.运行效果
第一个是圆角的，第二个是圆形，第三个是有外边框的。
文本样式
1.文本样式
bootstrap主要给我们提供了这六种文本样式柔和灰text-muted、主要蓝text-primary、成功绿text-success、信息蓝text-info、警告黄text-warning、危险红text-danger。
2.例如：1）危险红text-danger
<p class="text-danger">大家好</p>
运行效果
2）信息蓝text-info
<p class="text-info">大家好</p>
运行效果
文本背景样式
1.文本背景样式
bootstrap也给我们定义好了这几种文本背景样式主要蓝bg-primary、成功绿bg-success、信息蓝bg-info、警告黄bg-waring和危险红bg-danger。
2.设置信息蓝的文本背景样式
<p class="bg-info text-danger">大家好</p>
3.运行效果
（这里设置了蓝背景，红文字。）
辅助图标
1.关闭图标close
第一种用button
<button type="button" class="close">×</button>
第二种用超链接
<a href="#" class="close">×</a>
2.运行效果都一样，鼠标移上去就会有一个×的按钮。
3.向下箭头 caret，我们需要用到<span>标签，并在<span>标签里面添加样式
<span class="caret"></span>
4.运行效果
内容浮动
1.在ch08中新建一个demo02.html
2.设置.pull-right向右浮动、.pull-left向左浮动、.clearfix清除浮动
<body>
<div class="center-block">
居中
</div>
<div>
<div class="pull-left" style="width:200px;">居左</div>
<div class="pull-right" style="width: 200px;">居右</div>
<div class="clearfix visible-sm"></div>
//表示这个div在小屏幕分辨率下才可以显示
<div>ccc</div>
</div>
</body>
3.运行效果
扫一扫
1319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
