flask-bootstrap-高亮-下劃線-刪除線-加粗-斜體
阿新 • • 發佈：2018-12-13
簡述
這是最基本的啦。以後肯定是可以用到的~
核心程式碼
參考
https://getbootstrap.com/docs/4.1/content/typography/#inline-text-elements
效果：
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</ 高亮
<mark>highlight</mark>
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
刪除線
<del>或者<s>
<p>
<del>This line of text is meant to be treated as deleted text.</del>
</p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
下劃線
<ins>或<u>
<p>
<ins>This line of text is meant to be treated as an addition to the document.</ins>
</p>
<p><u>This line of text will render as underlined</u></p>
加粗斜體變小
第一個是正常的效果
This line of text is meant to be treated as original print.
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
完整程式碼
- templates/index.html
<!doctype html>
<html lang="zh">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<p>You can use the mark tag to
<mark>highlight</mark>
text.
</p>
<p>
<del>This line of text is meant to be treated as deleted text.</del>
</p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p>
<ins>This line of text is meant to be treated as an addition to the document.</ins>
</p>
<p><u>This line of text will render as underlined</u></p>
<p>
This line of text is meant to be treated as original print.
</p>
<p>
<small>This line of text is meant to be treated as fine print.</small>
</p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def hello_world():
return render_template('index.html')
if __name__ == '__main__':
app.run()
