-
前端BootStrap与LayUI框架
七、BootStrap
7.1、BootStrap模板
DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap的HTML标准模板title> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> head> <body> <h1>Hello, world!h1> <script src="js/jquery-3.4.1.js">script> <script src="bootstrap/js/bootstrap.min.js">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
7.2、布局容器
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>布局容器title> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/> head> <body> <div class="container-fluid" style="background-color: thistle;height: 500px;" > .container-fluid类用于100% 宽度，占据全部视口（viewport）的容器。 div> 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
7.3、栅格网格
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>栅格网格系统title> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/> head> <body> <div style="background-color: mediumaquamarine;">4div> <div style="background-color: navajowhite;">8div> <hr /> <div class="container"> <div class="row"> <div class="col-md-4 col-lg-4" style="background-color: deepskyblue;">4div> <div class="col-md-8 col-lg-8" style="background-color: bisque;">8div> div> <hr> <div class="row"> <div class="col-md-1" style="background-color: mediumslateblue;">1div> <div class="col-md-1" style="background-color: burlywood;">1div> <div class="col-md-1" style="background-color: indianred;">1div> <div class="col-md-1" style="background-color: darkturquoise;">1div> div> <div class="row"> <div class="col-md-6" style="background-color: lightblue;">6div> <div class="col-md-6" style="background-color: lightgoldenrodyellow;">6div> div> <div class="row"> <div class="col-md-4" style="background-color: green;">4div> <div class="col-md-4" style="background-color: fuchsia;">4div> <div class="col-md-4" style="background-color: azure;">4div> div> <div class="row"> <div class="col-md-4" style="background-color: burlywood;">4div> <div class="col-md-4" style="background-color: darkcyan;">4div> <div class="col-md-5" style="background-color: goldenrod;">5div> div> <hr /> <div class="row"> <div class="col-md-1" style="background-color: mediumslateblue;">1div> <div class="col-md-1 col-md-offset-1" style="background-color: burlywood;">1div> <div class="col-md-1" style="background-color: indianred;">1div> <div class="col-md-1 col-md-offset-4" style="background-color: darkturquoise;">1div> div> <hr /> <div class="row"> <div class="col-md-1" style="background-color: black;">1div> <div class="col-md-1 col-md-push-3" style="background-color: blue;">1div> <div class="col-md-1" style="background-color: gold;">1div> <div class="col-md-1 col-md-pull-2" style="background-color: green;">1div> div> <hr /> <div class="row"> <div class="col-md-6" style="background-color: navajowhite;"> <div class="row"> <div class="col-md-1" style="background-color: #31708F;">1div> <div class="col-md-9" style="background-color: khaki;">9div> <div class="col-md-1" style="background-color: rosybrown;">1div> <div class="col-md-1" style="background-color: palegreen;">1div> div> div> <div class="col-md-6" style="background-color: teal;"> 6 div> div> <hr/> <div class="row"> <div class="col-md-3 col-sm-6" style="background-color: darkblue">3div> <div class="col-md-3 col-sm-6" style="background-color: brown">3div> <div class="col-md-3 col-sm-6" style="background-color: rosybrown">3div> <div class="col-md-3 col-sm-6" style="background-color: blueviolet">3div> div> div> 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
7.4、常用样式
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>常用样式title> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/> head> <body> <h1>标题1<small>副标题small>h1> <h2>标题2<span class="small">副标题2span>h2> <h3>标题3h3> <div class="h1">你好div> <hr> <p>通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。p> <p class="lead">通过.lead 来突出<small>强调small><b>内容b>(其作用就是<strong>增大strong>文本<i>字号i>，加粗<em>文本em>，而且对行高和margin也做相应的处理。p> <hr> <div class="text-muted">.text-muted：提示，使用浅灰色（#999）div> <div class="text-primary">.text-primary：主要，使用蓝色（#428bca） div> <div class="text-success">.text-success：成功，使用浅绿色(#3c763d) div> <div class="text-info">.text-info：通知信息，使用浅蓝色（#31708f）div> <div class="text-warning">.text-warning：警告，使用黄色（#8a6d3b） div> <div class="text-danger">.text-danger：危险，使用褐色（#a94442）div> <hr> <p style="text-align: right;">Bootstrap通过定义四个类名来控制文本的对齐风格p> <p class="text-left">左对齐 - Bootstrap通过定义四个类名来控制文本的对齐风格p> <p class="text-right">右对齐 - Bootstrap通过定义四个类名来控制文本的对齐风格p> <p class="text-center">居中对齐- Bootstrap通过定义四个类名来控制文本的对齐风格p> <p class="text-justify"> Hello 网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份 Hi 网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份 网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份 p> 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
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>常用样式title> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/> head> <body> <ul> <li>无序项目列表一li> <li>无序项目列表二li> ul> <ol> <li>无序项目列表一li> <li>无序项目列表二li> ol> <dl> <dt>HTMLdt> <dd>超文本标记语言dd> <dt>CSSdt> <dd>层叠样式表是一种样式表语言dd> dl> <hr /> <ul class="list-unstyled"> <li>无序项目列表一li> <li>无序项目列表二li> ul> <ul class="list-inline"> <li>首页li> <li>java学院li> <li>在线课堂li> ul> <dl class="dl-horizontal"> <dt>HTML 超文本标记语言dt> <dd>HTML称为超文本标记语言，是一种标识性的语言。dd> <dt>测试标题不能超过160px的宽度,否则2个点dt> <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果。dd> dl> <hr><br> this is a simple code <code>this is a simple codecode> <br> <code> this is a simple code<br> this is a simple code code> <p>使用<kbd>ctrlkbd> + <kbd>skbd>保存内容p> <pre> public class HelloWorld { public static void main(String[] args){ System.out.println("hello world..."); } } pre> <pre> <h2>你好</h2> pre> <pre class="pre-scrollable"> <ol> <li>...........li> <li>...........li> <li>...........li> <li>...........li> <li>...........li> <li>...........li> <li>...........li> <li>...........li> <li>...........li> <li>...........li> <li>...........li> <li>...........li> ol> pre> <hr /> <table class="table table-bordered table-striped table-hover table-condensed"> <tr class="info"> <th>JavaSEth> <th>数据库th> <th>JavaScriptth> tr> <tr class="success"> <td>面向对象td> <td>oracletd> <td>jsontd> tr> <tr class="warning"> <td>数组td> <td>mysqltd> <td>ajaxtd> tr> <tr class="active"> <th>JavaSEth> <th>数据库th> <th>JavaScriptth> tr> <tr class="danger"> <td>面向对象td> <td>oracletd> <td>jsontd> tr> <tr > <td>数组td> <td>mysqltd> <td>ajaxtd> tr> table> 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
7.5、表单控件
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单title> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/> head> <body> <input type="text" /> <br> <select> <option>请选择城市option> <option>上海option> <option>北京option> select> <br> <textarea>textarea><br> <input type="checkbox" name="hobby" /> 唱歌 <input type="checkbox" name="hobby" /> 跳舞 <br> <input type="radio" name="sex" /> 男 <input type="radio" name="sex" /> 女<br> <button>按钮button> <input type="button" value="按钮" /> <hr><br> <div class="row"> <div class="col-md-3"> <input type="text" class="form-control" /> <br> <input type="text" class="form-control input-lg" /> <br> <input type="text" class="form-control input-sm" /> <br> div> div> <div class="row"> <div class="col-md-3"> <select class="form-control"> <option>请选择城市option> <option>上海option> <option>北京option> select> <br> <select class="form-control" multiple="multiple"> <option>请选择城市option> <option>上海option> <option>北京option>- 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
-
相关阅读:
读书笔记：Head First Java实战（第三版）
Android 和 iOS 漏洞加剧移动安全的威胁
C++&QT day10
第07章 MyBatisPlus持久化操作（一）
雷电4模拟器安装xposed框架（2022年）
使用ffmpeg将视频转成HLS(m3u8)格式
标准编解码库：ByteToMessageDecoder
JavaScript面试常见问题（二）
北理工嵩天Python语言程序设计笔记（目录）
油猴Safari浏览器辅助插件：Tampermonkey for Mac中文版
- 原文地址：https://blog.csdn.net/qq_52992141/article/details/127708904
