图片与辅助样式

来源：互联网发布：骚男淘宝零食店编辑：程序博客网时间：2024/04/27 23:49

图片与辅助样式

响应式图片.img-responsive

1.新建一个web项目ch08。

2.在ch08中新建一个demo01.html，将css文件模版导入进来。

3.将移动设备优先拷贝到demo01的头文件中。

<metaname="viewport" content="width=device-width,initial-scale=1, user-scalable=no”>

4.导入css文件

5.定义一个div，设置响应式图片

<hr/>

6.运行效果（图片会跟着屏幕大小来自适应）

那么，这个css样式做了什么事情呢？

其实，它就是对图片的宽度设了100%，高度自动。

图片形状

设置图片形状（三种样式）

<hr/>

2.运行效果

第一个是圆角的，第二个是圆形，第三个是有外边框的。

文本样式

1.文本样式

bootstrap主要给我们提供了这六种文本样式柔和灰text-muted、主要蓝text-primary、成功绿text-success、信息蓝text-info、警告黄text-warning、危险红text-danger。

2.例如：1）危险红text-danger

运行效果

2）信息蓝text-info

运行效果

文本背景样式

1.文本背景样式

bootstrap也给我们定义好了这几种文本背景样式主要蓝bg-primary、成功绿bg-success、信息蓝bg-info、警告黄bg-waring和危险红bg-danger。

2.设置信息蓝的文本背景样式

3.运行效果

（这里设置了蓝背景，红文字。）

辅助图标

1.关闭图标close

第一种用button

第二种用超链接

2.运行效果都一样，鼠标移上去就会有一个×的按钮。

3.向下箭头 caret，我们需要用到<span>标签，并在<span>标签里面添加样式

4.运行效果

内容浮动

1.在ch08中新建一个demo02.html

2.设置.pull-right向右浮动、.pull-left向左浮动、.clearfix清除浮动

<body>

居中

</div>

<div>

//表示这个div在小屏幕分辨率下才可以显示

</div>

</body>

3.运行效果

0 0