bootstrap 学习笔记 - 2 （排版+代码样式）

最新推荐文章于 2023-11-22 01:15:43 发布

原创最新推荐文章于 2023-11-22 01:15:43 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

bootstrap 专栏收录该内容

5 篇文章

订阅专栏

本文档详细介绍了Bootstrap框架中的排版样式，包括标题、段落、内联文本、对齐方式、大小写转换、缩略语、地址、引用、列表及描述列表的使用方法，并提供了丰富的代码样例。

Bootstrap学习

Bootstrap学习之 - 排版样式

标题（<h>标签）

样例代码：（bootstrap已经对h标签进行了样式定义）

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>My JSP '??.jsp' starting page</title>
		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
		<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.11.2.min.js"></script>
		<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>

	</head>

	<body style="padding:20px;">
		<h1>h1</h1>
		<h2>h1</h2>
		<h3>h1</h3>
		<h4>h1</h4>
		<h5>h1</h5>
		<h6>h1</h6>
	</body>
</html>

页面主题（段落：标签）

样例代码：（lead表示突出显示）

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
		<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.11.2.min.js"></script>
		<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>

	</head>

	<body style="padding:20px;">
		<p>这是一个段落，不做突出显示</p>
		<p class="lead">这是一个段落，需要突出显示</p>
		<p>这是一个段落，不做突出显示</p>
		<p>这是一个段落，不做突出显示</p>
		<p>这是一个段落，不做突出显示</p>
		<p class="lead">这是一个段落，需要突出显示</p>
		<p>这是一个段落，不做突出显示</p>
		<p>这是一个段落，不做突出显示</p>
		<p>这是一个段落，不做突出显示</p>
		
	</body>
</html>

内联文本：（ 、<del> 、<s>、<ins>、、、、）

样例代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
		<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.11.2.min.js"></script>
		<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>

	</head>

	<body style="padding:20px;">

                我是<mark>中国人</mark>，我为此自豪。<br/>
		原价<del>999</del>元  现价<strong>199</strong>元<br/>
		<s>无用的文本</s><br/>
		<ins>这是插入文本</ins><br/>
		<u>我带下划线</u><br/>
		<small>我是小号字体</small><br/>
		这是个<strong>着重文本</strong><br/>
		<em>强调</em><br/>
		<i>斜体</i><br/>
		
	</body>
</html>

对齐：（text-left | center | right | justify | nowrap）

justify：普通的，自动换行显示；

nowrap：不换行显示；

样例代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
		<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.11.2.min.js"></script>
		<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>

	</head>

	<body style="padding:20px;">
		<p class="text-left">align:left</p>
		<p class="text-right">align:right</p>
		<p class="text-center">align:center</p>
		<p class="text-justify">我能灵活的换行：align:justify align:justify align:justify align:justify align:justify align:justify align:justify align:justify align:justify align:justify align:justify align:justify align:justify align:justify align:justify align:justify align:justify align:justify align:justify align:justify align:justify align:justify align:justify align:justify align:justify align:justify align:justify align:justify align:justify</p>
		<p class="text-nowrap">我很直：align:nowrap align:nowrap align:nowrap align:nowrap align:nowrap align:nowrap align:nowrap align:nowrap align:nowrap align:nowrap align:nowrap align:nowrap align:nowrap align:nowrap align:nowrap align:nowrap  align:nowrap  align:nowrap  align:nowrap  align:nowrap  align:nowrap  align:nowrap  align:nowrap  align:nowrap  align:nowrap  align:nowrap  align:nowrap </p>		
	</body>
</html>

改变大小写：（text-lowercase | uppercase | capitalize）

样例代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
		<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.11.2.min.js"></script>
		<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>

	</head>

	<body style="padding:20px;">
		ABCD--to---<p class="text-lowercase">ABCD</p>
		abcd--to---<p class="text-uppercase">abcd</p>
		abc abc abc aBc--to--<p class="text-capitalize">abc abc abc aBc</p>
	</body>
</html>

基本缩略语：（<abbr title="total world">XXX</abbr>）

<abbr title="total world">XXX</abbr>

<abbr title=“HyperText Markup Language” class="initializm">HTML</abbr>

样例代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
		<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.11.2.min.js"></script>
		<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>

	</head>

	<body style="padding: 20px;">
		<abbr title="World Wide Web">WWW</abbr><br/>

		<abbr title="HyperText Markup Language" class="initializm">HTML</abbr>
	</body>
</html>

地址：（<address>）

样例代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
		<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.11.2.min.js"></script>
		<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>

	</head>

	<body style="padding: 20px;">
		<address>
		<strong>西安市.曲江新区.曲江六号</strong><br/>
		<a hre="mail:to">547333161@qq.com</a>
		</address>	
	</body>
</html>

引用：（<blockquote>）

<blockquote>

<footer>

<blockquote-reverse>

样例代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
		<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.11.2.min.js"></script>
		<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>

	</head>

	<body style="padding: 20px;">
		<blockquote>
			<p>普通的引用块</p>
		</blockquote>
		<blockquote>
			<p>带有footer的引用块</p>
			<footer><cite title="Source Title">This is footer</cite></footer>
		</blockquote>
		<blockquote class="blockquote-reverse">
			<p>右侧标识的引用卡</p>
		</blockquote>
	</body>
</html>

列表（有序、无序、无样式、内联）

list-unstyle

list-inline

样例代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
		<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.11.2.min.js"></script>
		<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>

	</head>

	<body style="padding: 20px;">
		<p>无序的</p>
		<hr/>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
			<li>Item 5</li>
			
		</ul>
		<hr/>
		<p>有序的</p>
		<hr/>
		<ol>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
			<li>Item 5</li>
			
		</ol>
		<hr/>
		<p>无样式的</p>
		<hr/>
		<ul class="list-unstyled">
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
			<li>Item 5</li>
		</ul>
		<hr/>		
		<p>内联的，一行的</p>
		<hr/>
		<ul class="list-inline">
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
			<li>Item 5</li>
		</ul>	
	</body>
</html>

描述（dl dt dd）

样例代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <base href="<%=basePath%>">

        <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
        <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
        <script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.11.2.min.js"></script>
        <script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>

    </head>

    <body style="padding: 20px;">
        <dl>
            <dt>dt</dt>
            <dd>dd</dd>
            
            <dt>dt</dt>
            <dd>dd</dd>
            
            <dt>dt</dt>
            <dd>dd</dd>
            
            
        </dl>
        
        <dl class="dl-horizontal">
            <dt>dt</dt>
            <dd>dd</dd>
            
            <dt>dt</dt>
            <dd>dd</dd>
            
            <dt>dt</dt>
            <dd>dd</dd>
            
            
        </dl>
    </body>
</html>

Bootstrap学习之 - 代码

<code>

<kdb>

样例代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
		<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.11.2.min.js"></script>
		<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>

	</head>

	<body style="padding: 20px;">
 		<p>For example, <code><section></code> should be wraped as inline</p>
 		<p>To switch directories, type <kbd>cd</kbd> followed by the name of the directory. To edit settings, press <kbd>ctrl</kbd> +<kbd> , </kbd></p>
 		<pre>this is <code><pre></code></pre>
 		<pre>this is <code><pre></code> include <code><var></code>
	 		<p>
	 			<var>y = 2x;</var>
	 		</p>
 		</pre>
	</body>
</html>