bootstrap简单使用(一) 网格系统和排版 小灰灰 2023-06-26 05:33 1阅读 0赞 [https://www.runoob.com/bootstrap/bootstrap-tutorial.html][https_www.runoob.com_bootstrap_bootstrap-tutorial.html] 菜鸟教程 bootstrap的讲解 记录网格系统和排版的标签代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例网格系统和排版</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.3.7/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>container 容器</h1> <div class="row"> <div class="col-md-2 col-md-offset-2" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>这是一个网格 一共12个 根据col-mod来设置多少个 offset移动 </p> </div> </div> <div class="row"> <div>排序前</div> <div class="col-md-3 "style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <h4>左边</h4> <p>第一列的内容</p> </div> <div class="col-md-9"style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <h4>右边</h4> <p>第一列的内容</p> </div> </div> <div class="row"> <div>排序后 col-md-pull</div> <div class="col-md-3 col-md-pull-2"style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <h4>左边</h4> <p>第一列的内容</p> </div> <div class="col-md-9 col-md-push-4"style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <h4>右边</h4> <p>第一列的内容</p> </div> </div> </div> <br/><br/><br/> <div class="container"> <div class="row"> <h1>字体，段落的配置</h1> <h1>h1 大标题.<small>h1 副标题</small></h1> <h2>h2 大标题.<small>h2 副标题</small></h2> <p>我是一个参照物 不是lead</p> <p class="lead">我是一个lead</p> <p><small>本内容是标签内的 变小85%</small></p><br> <p><strong>本内容是标签内的 强壮</strong></p> <p><em>本内容是标签内的 斜体</em></p> <p class="text-left">左对齐</p> <p class="text-center">居中</p> <p class="text-right">右对齐</p> <p class="text-mured">本内容减弱</p> <p class="text-primary">带有一个primary</p> <p class="text-success">带有一个success</p> <p class="text-info">带有一个info</p> <p class="text-waring">带有一个waring</p> <p class="text-danger">带有一个danger</p> <abbr title="这是一个完整的句子" class="initialism">我是一个abbr缩写</abbr> <address> <a href="mailto:#">我是一个地址:123213@163.com</a> </address> </div> </div> <br/><br/><br/> <div class="container"> <div>引用 blockquote</div> <blockquote> <p> 这是一个默认的引用实例 </p> </blockquote> <blockquote> <p>这是一个有源标题的引用</p> <small>我是一个数据我是一个数据<cite title="源标题"> 源标题</cite></small> </blockquote> <blockquote class="pull-right"> <p>这是一个有源标题的引用，并且向右对齐的引用</p> <small>我是一个数据我是一个数据<cite title="源标题"> 源标题</cite></small> </blockquote> <br/><br/><br/> <div class="container"> <div class="row"> <h1>有序排序</h1> <ol> <li>有序1</li> <li>有序2</li> <li>有序3</li> </ol> <h2>无序排列</h2> <ul> <li>无序1</li> <li>无序2</li> <li>无序3</li> </ul> <h2>未定义排序</h2> <ul class="list-unstyled"> <li>未定义排序1</li> <li>未定义排序2</li> <li>未定义排序3</li> </ul> <h2>内联排序</h2> <ul class="list-inline"> <li>内联排序1</li> <li>内联排序2</li> <li>内联排序3</li> </ul> <h2>定义列表</h2> <dl> <dt>定义列表1</dd> <dd>定义列表2</dd> </dl> <h2>水平定义列表</h2> <dl class="dl-horizontal"> <dt>定义列表dt</dd> <dd>定义列表dd</dd> <dt>定义列表dt1</dd> <dd>定义列表dd1</dd> </dl> </div> <div> .lead 使段落突出显示 <br/> .small 设定小文本 (设置为父文本的 85% 大小)<br/> .text-left 设定文本左对齐 <br/> .text-center 设定文本居中对齐 <br/> .text-right 设定文本右对齐 <br/> .text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行 <br/> .text-nowrap 段落中超出屏幕部分不换行 <br/> .text-lowercase 设定文本小写 <br/> .text-uppercase 设定文本大写 <br/> .text-capitalize 设定单词首字母大写 <br/> .initialism 显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母 <br/> .blockquote-reverse 设定引用右对齐 <br/> .list-unstyled 移除默认的列表样式， 列表项中左对齐 ( ul 和 ol 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式) <br/> .list-inline 将所有列表项放置同一行 <br/> .dl-horizontal 该类设置了浮动和偏移，应用于 dl 元素和 dt 元素中，具体实现可以查看实例 <br/> .pre-scrollable 使 pre元素可滚动，代码块区域最大高度 </div> </div> </div> </div> <div class="container"> 代码部分 <pre><script 我是一个独立的块元素 script script script></pre> <code> <depency 我是一个内联 ></code> </div> <div> <var> var 变量赋值: x = ab + y</var><br/> <kbd> kbd 按键提示： CTRL + P</kbd><br/> <pre> pre 多行代码 </pre><br/> <pre class="pre-scrollable"> class= pre-scrollable 多行代码带有滚动条 </pre><br/> <samp> samp 电脑程序输出: Sample output </samp><br/> <code> code 同一行代码片段: span, div </code><br/> </div> </body> </html> 暂时记录 后期完善 [https_www.runoob.com_bootstrap_bootstrap-tutorial.html]: https://www.runoob.com/bootstrap/bootstrap-tutorial.html
还没有评论，来说两句吧...