bootstrap 文字描述布局示例

最新推荐文章于 2024-04-11 14:32:47 发布

原创最新推荐文章于 2024-04-11 14:32:47 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

bootstrap 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何使用Bootstrap框架的样式和组件，创建出吸引人的文字描述布局。通过实例展示，帮助读者掌握在网页设计中有效组织内容的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用bootstrap提供的样式，做出如下效果

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<head>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>质量录入</title>
</head>
<body>
<form action="<%=basePath %>rest/wx" method="post">
	<div class="container">
		<h1 class="page-header">bootstrap<small>布局示例</small></h1>
		<p><abbr title="前端CSS框架" class="initialism">BootstrapWeb</abbr> 
Bootstrap，来自 Twitter，是目前<strong>很受欢迎的前端框架</strong>。Bootstrap 是基于<em> HTML、CSS、JAVASCRIPT</em> 的，它简洁灵活，使得 Web 开发更加快捷。[1]  
它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，
一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。[2]  国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，
也是基于Bootstrap源码进行性能优化而来。[3] 
		</p>
		<blockquote class="pull-right"><p>Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。</p><small>来之百度百科</small></blockquote>
	</div>
</form>
</body>
</html>