flask-bootstrap-高亮-下划线-删除线-加粗-斜体

小鱼儿 2022-04-05 11:18 378阅读 0赞

## 简述 ##

这是最基本的啦。以后肯定是可以用到的~

## 核心代码 ##

> 参考  
> [https://getbootstrap.com/docs/4.1/content/typography/\#inline-text-elements][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.*

You can use the mark tag to highlight text.
 <del>This line of text is meant to be treated as deleted text.</del>
 <s>This line of text is meant to be treated as no longer accurate.</s>
 <ins>This line of text is meant to be treated as an addition to the document.</ins>
 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.

### 高亮 ###

* `highlight`

You can use the mark tag to highlight text.

### 删除线 ###

* `<del>` 或者`<s>`

<del>This line of text is meant to be treated as deleted text.</del>
 
 <s>This line of text is meant to be treated as no longer accurate.</s>

### 下划线 ###

* `<ins>` 或 ``

<ins>This line of text is meant to be treated as an addition to the document.</ins>
 
 This line of text will render as underlined

### 加粗斜体变小 ###

第一个是正常的效果

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.*

This line of text is meant to be treated as fine print.
 This line rendered as bold text.
 This line rendered as italicized text.

## 完整代码 ##

*  **templates/index.html**

<!doctype html>
 <html lang="zh">
 <head>
 
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
 
 <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">
 You can use the mark tag to
 highlight
 text.
 
 
 <del>This line of text is meant to be treated as deleted text.</del>
 
 <s>This line of text is meant to be treated as no longer accurate.</s>
 
 <ins>This line of text is meant to be treated as an addition to the document.</ins>
 
 This line of text will render as underlined
 
 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.
 </div>
 </div>
 
 
 <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>

*  [app.py][]

from flask import Flask, render_template
    
    app = Flask(__name__)
    
    
    @app.route('/')
    def hello_world():
        return render_template('index.html')
    
    
    if __name__ == '__main__':
        app.run()

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExOTk5MDQxMg_size_16_color_FFFFFF_t_70]

[https_getbootstrap.com_docs_4.1_content_typography_inline-text-elements]: https://getbootstrap.com/docs/4.1/content/typography/#inline-text-elements
[app.py]: http://app.py
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExOTk5MDQxMg_size_16_color_FFFFFF_t_70]: /images/20220405/7a49de48fe0e42b9aa15a3ee62e793e0.png