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>
頁面主題（段落 ：<p>標籤）
樣例代碼：（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>內聯文本：（<mark> 、<del> 、<s>、<ins>、<u>、<small>、<strong>、<i>）
樣例代碼：
<%@ 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">[email protected]</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>