bootstrap系列之七图片与辅助样式

最新推荐文章于 2022-11-02 11:12:59 发布

原创最新推荐文章于 2022-11-02 11:12:59 发布 · 494 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

JAVAEE 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了使用HTML进行页面元素的样式设置与布局调整的方法，包括图片的不同显示效果（响应式、圆角、圆形和边框样式）、文本颜色设置、按钮样式的调整以及元素的水平居中、左右浮动等布局技巧。

效果一

<body>
		<div class="container">
			<img src="img/pic01.jpg" class="img-responsive" />
			<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" />
			<hr />
			<p class="text-danger">大家好</p>
			<p class="text-info">大家好</p>
			<p class="text-primary">大家好</p>
			<hr />
			<p class="bg-info text-danger">大家好</p>
			<hr/>
			<button type="button" class="close">×</button>
			<a href="#" class="close">×</a>
			<hr />
			<span class="caret"></span>
	</body>

效果二

<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 class=" visible-sm">ccc</div>
		</div>
	</body>