python笔记(web前端 Bootstrap)_pywebio 与bootstrip

作者：小丑西瓜9 | 2024-02-07 17:28:42

踩

pywebio 与bootstrip

一、Bootstrap介绍

在这里插入图片描述

几个常用的网站：

二、基本使用的方法

支持移动端

head标签加：<meta name="viewport" content="width=device-width, initial-scale=1">
1

在这里插入图片描述

Normalize.css（初始化页面）
为了增强跨浏览器表现的一致性，我们使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal维护的一个CSS 重置样式库。

样式类
1、栅格系统（必须包含在container中）

1.每一行均分十二列
2.每一个人标签可以自定义占的列数 ：`col-x-xx`（x代表不同设备[lg,md,sm,xs] xx代表占的列[1~12]）
3.只有列能作为行的直接子元素（列和行搭配着用）
1
2
3

2、常用的样式

 表单等
1

常用的几个模板

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <style>
        .c{
            height:100px;
            width:100px;
        }
        body{
            background-color:#eee;
        }
        .c1{
             background-color:red;
            }
        @media screen and (max-width:400px)/*在移动端进行修改样式*/
        {
            .c1{
                 background-color:green;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">第一行
        <!--col-xs-4:支持iPhonex的 占四列-->
        <div class="col-md-1 col-xs-4">占一列</div>
        <div class="col-md-10 col-xs-4">占十列</div>
        <div class="col-md-1 col-xs-4">占一列</div>
        <div class="col-md-5 col-md-offset-2">第二行左边空两列</div>
        <div class="col-md-5 col-md-push-3">推3列</div>
    </div>
    <div class="row">第二行</div>
    <div class="row">第三行</div>
    <div class="c1 c"></div>
    <h1>h1. Bootstrap heading
        <small>Secondary text</small>
    </h1>
    <h2>h2. Bootstrap heading
        <small>Secondary text</small>
    </h2>
    <h3>h3. Bootstrap heading
        <small>Secondary text</small>
    </h3>
    <h4>h4. Bootstrap heading
        <small>Secondary text</small>
    </h4>
    <h5>h5. Bootstrap heading
        <small>Secondary text</small>
    </h5>
    <h6>h6. Bootstrap heading
        <small>Secondary text</small>
    </h6>
    <!--字体突出-->
    <p class="lead">
        字体突出
    </p>
    <!--高亮显示-->
    <p>
        <!--高亮显示-->
        高亮
        <mark>显示</mark>

        <!--删除线-->
        <del>原价：110</del>

        <!--插入文本-->
        <ins>插入文本</ins>

        <!--下画线-->
        <u>下画线</u>

        <!--重点强调-->
        <strong>重点强调</strong>

        <!--斜体-->
        <em>斜体</em>


    </p>

    <!--对齐-->
    <p class="text-left">Left aligned text.</p>
    <p class="text-center">Center aligned text.</p>
    <p class="text-right">Right aligned text.</p>
    <p class="text-justify">Justified text.</p>
    <p class="text-nowrap">No wrap text.</p>

    <!--登陆注册示例-->
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <h1 class="text-center">请登陆</h1>
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-3 control-label">邮箱</label>
                    <div class="col-sm-9">
                        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-3 control-label">密码</label>
                    <div class="col-sm-9">
                        <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox">记住
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary btn-block">Sign in</button>
                    </div>
                </div>
            </form>
        </div>
    </div>


    <!--作业 信息采样一-->
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">基本信息 <span class="glyphicon glyphicon-pushpin pull-right"></span></h3>
        </div>
        <div class="panel-body">
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                    <div class="col-sm-4">
                        <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                    <div class="col-sm-4">
                        <input type="password" class="form-control" id="inputPassword5" placeholder="Password">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                    <div class="col-sm-4">
                        <input type="email" class="form-control" id="inputEmail6" placeholder="Email">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                    <div class="col-sm-4">
                        <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> Remember me
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <input type="file" id="exampleInputFile" class="col-sm-offset-2 col-sm-10">
                    <p class="help-block col-sm-offset-2 col-sm-10">Example block-level help text here.</p>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">属性</label>
                    <div class="col-sm-10">
                        <div class="radio">
                            <label>
                                <input type="radio" name="inlineRadioOptions">Option one is this and that&mdash;be sure
                                to include why it's great
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="inlineRadioOptions">Option one is this and that&mdash;be sure
                                to include why it's great
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="inlineRadioOptions" id="inlineRadio3">Option one is this and
                                that&mdash;be sure to include why it's great
                            </label>
                        </div>
                    </div>

                </div>
            </form>
        </div>
        <button class="btn btn-success pull-right">下一步</button>
    </div>

    <!--进度条-->
    <div class="progress">
        <div id="myBar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45"
             aria-valuemin="0"
             aria-valuemax="100" style="width: 45%">
            <span class="sr-only">45% Complete</span>
        </div>
    </div>

    <!--轮播图-->
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="7c9f6a94f234b83a0af2315d92170e2b (1).jpeg" alt="...">
                <div class="carousel-caption">

                </div>
            </div>
            <div class="item">
                <img src="7c9f6a94f234b83a0af2315d92170e2b (1).jpeg" alt="...">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
            ...
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

    <!--模态框-->
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox"> Remember me
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-default">Sign in</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<script>
    <!--进度条-->
    var width = 0;
    var t;
    function changWith(){
        if(width<100)
        {
            width++;
            $("#myBar").css("width",width+"%").text(width+"%");
        }
        else{
            clearInterval(t);
        }

    }
    t = setInterval(changWith,200);
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324

登录页面展示
在这里插入图片描述
信息采取页面展示

模态框弹出页面展示

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/66582