BootStrap 图片样式、辅助类样式和CSS组件的实例详解

首先把模板代码上上来:

图片样式

.img-responsive：直接为图片添加该样式，可以实现响应式图片。

.center-block：图片居中样式，而不能使用text-center样式。

图片形状样式：.img-rounded(圆角图片)、.img-circle(圆形图片)、.img-thumbnail(边框圆角)

文字文字文字文字文字文字文字文字文字文字文字文字

辅助类样式

文本颜色类：.text-muted(柔和的)、.text-primary、.text-success、.text-info、.text-warning、.text-danger

背景颜色类：.bg-primary、.bg-success、.bg-info、.bg-warning、.bg-danger

三角符号：

快速浮动类：.pull-left(左浮动)、.pull-right(右浮动)

清除浮动：为父元素添加 .clearfix 可以清除浮动。

让内容块网页居中：

CSS组件

下拉菜单

.dropdown将下拉菜单触发器和下拉菜单包含在其中(下拉菜单父元素)。

data-toggle属性：下拉菜单触发器。取值为“dropdown”。

.dropdown-menu：给

指定下拉菜单的样式。

.dropup：向上弹出的下拉菜单(下拉菜单父元素)。

下拉菜单对齐方式：.dropdown-menu-left和.dropdown-menu-right

.divider：为下拉菜单添加分隔线，用于将多个链接分组。

.disabled：禁用的菜单项。



按钮组

.btn-group：按钮组(可以实现将一组按钮放在同一行)。

.btn-toolbar：按钮组工具栏(将多个按钮组放在其中)。

按钮组的尺寸：.btn-group-lg、.btn-group-sm、.btn-group-xs

.btn-group-vertical：垂直排列的按钮组。



按钮式下拉菜单



在这里呢，如果我们下拉菜单很多，就可以用滚动条来解决！

用overflow: auto;，然后定义一个高度就好。

输入框组

.input-group：只能用于文本框，不能用于和。</p> <p>.input-group-addon用于在<input>前后添加额外元素，赋给一个<span>元素即可。</p> <p>注意：将.input-group-addon和<input>元素包在.input-group之中。</p> <p>.input-group-lg 和 .input-group-sm 可以改变输入框组的尺寸。</p> <p>.input-group-btn可以作为额外元素的按钮，应该是作为<button>的父元素。</p> <div class="jb51code"> <pre class="brush:js;"> <h2 class="page-header">输入框组的应用</h2> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control" placeholder="username" /> <span class="input-group-addon">.00</span> </div> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default">Go!</button> </span> <input type="text" class="form-control" placeholder="username" /> </div> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li> </li> <li> </li> <li> </li> <li class="divider"></li> <li> </li> </ul> </div> <!-- /btn-group --> <input type="text" class="form-control"> </div> <!-- /input-group --> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default"> 按钮 </button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li> </li> <li> </li> <li> </li> <li class="divider"></li> <li> </li> </ul> </div> <input type="text" class="form-control"> </div></pre> </div> <p style="text-align: center"><p class="pic_center"><img title="" alt="" src="https://files.52php.cn/file_images/article/201701/201701201019436.png" /></p></p> <p><h3>标签页(选项卡)</h3></p> <p>.nav是标签页的基类</p> <p>.nav-tabs是标签页类样式</p> <p>.active是标签页的状态类(当前样式)</p> <p>.nav-pills胶囊式标签页</p> <p>.nav-stacked胶囊式标签页堆放排列(垂直排列)</p> <div class="jb51code"> <pre class="brush:js;"> <h2 class="page-header">选项卡效果</h2> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"> </li> <li role="presentation"> </li> <li role="presentation"> </li> </ul> <ul class="nav nav-pills" role="tablist"> <li role="presentation" class="active"> </li> <li role="presentation"> </li> <li role="presentation"> </li> </ul></pre> </div> <p style="text-align: center"><p class="pic_center"><img title="" alt="" src="https://files.52php.cn/file_images/article/201701/201701201019437.png" /></p></p> <p><h3>路径导航</h3></p> <p>.breadcrumb：赋给</p> <p>可以实现面包屑效果。</p> <p>.active赋给当前栏目，当前栏目不加链接。</p> <div class="jb51code"> <pre class="brush:js;"> <h2 class="page-header">路径导航效果</h2> <ol class="breadcrumb"> <li> </li> <li> </li> <li class="active">Data</li> </ol></pre> </div> <p style="text-align: center"><p class="pic_center"><img title="" alt="" src="https://files.52php.cn/file_images/article/201701/201701201019438.png" /></p></p> <p><h3>分页</h3></p> <p>.pagination赋给</p> <p>元素可以实现分页效果</p> <p>« 上一页</p> <p>» 下一页</p> <p>.disabled禁用状态</p> <p>.active激活状态</p> <p>.pagination-lg分页大尺寸</p> <p>.pagination-sm分页小尺寸</p> <p>.pager可以实现翻页效果。上一页、下一页效果。</p> <div class="jb51code"> <pre class="brush:js;"> <div class="text-center" style="border: 1px solid red;"> <ul class="pagination pagination-lg pager"> <li class="previous"> </li> <li class="disabled"> </li> <li class="active"> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li class="next"> </li> </ul> </div> <div class="text-center" style="border: 1px solid red;"> <ul class="pagination pagination-lg"> <li> </li> <li class="active"> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ul> </div></pre> </div> <p style="text-align: center"><p class="pic_center"><img title="" alt="" src="https://files.52php.cn/file_images/article/201701/201701201019439.png" /></p></p> <p><h3>缩略图</h3></p> <p>.thumbnail赋给元素，可以实现缩略图样式。</p> <p>.caption 可以实现缩略图标题及描述</p> <div class="jb51code"> <pre class="brush:js;"> <h2 class="page-header">缩略图效果</h2> <div class="row"> <div class="col-md-2"> <div class="caption"> <h4>图片一</h4> </div> </div> <div class="col-md-4"> <div class="caption"> <h4>图片一</h4> </div> </div> <div class="col-md-6"> <div class="caption"> <h4>图片一</h4> </div> </div> </div></pre> </div> <p style="text-align: center"><img title="" alt="" src="https://files.52php.cn/file_images/article/201701/2017012010194310.gif" /></p> <p><h3>导航栏</h3></p> <p>导航栏有一个不同，他不是写在Container包含层里面了，而是那个div的上面！</p> <p>.navbar：导航栏的基类，用于<nav>元素。 .navbar-default：导航栏默认样式，用于<nav>元素。 .container是<nav>的子元素。导航栏内容都放入其中。 .navbar-header：导航栏头部样式。 .navbar-brand：设置品牌图标样式 .collapse是折叠导航栏的样式的基类。 .navbar-collapse是折叠导航栏样式。 .nav是导航栏的链接基类。 .navbar-nav是导航栏的链接样式。 .navbar-from：导航栏表单，可以使表单元素排在同一行。 .navbar-left 或 .navbar-right ：组件排列。导航链接、表单、按钮或文本对齐。 .navbar-btn：对于不在<form>中的<button>元素，实现垂直对齐。 .navbar-text：对于导航栏的普通文本有了行距和颜色，通常用于<p>元素。 .navbar-fixed-top：导航栏固定在顶部，用于<nav>元素。需要为<body>设置padding-top:70px .navbar-fixed-bottom：导航栏固定在底部，用于<nav>元素。需要为<body>设置padding-bottom:70px; .navbar-static-top：导航栏静止在顶部，用于<nav>元素。会随着滚动条移动而消失。 .navbar-inverse：可以实现反色导航栏，用于<nav>元素。</p> <div class="jb51code"> <pre class="brush:js;"> <nav class="navbar navbar-default navbar-static-top"> <!--导航栏头部信息--> <div class="container"> <!--品牌信息--> <div class="navbar-header"> <p class="navbar-text">欢迎光临</p> </div> <!--导航栏主链接--> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-left"> <li class="active"> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ul> <!--表单 搜索框--> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="搜索"> </div> <button type="submit" class="btn btn-default">搜索</button> </form> <ul class="nav navbar-nav navbar-right"> <li> </li> <li class="dropdown"> <ul class="dropdown-menu"> <li> </li> <li> </li> <li> </li> <li class="divider"></li> <li> </li> </ul> </li> </ul> </div> </div> </nav> <div class="container" style="background-color: #FFFFFF;"> ... </div></pre> </div> <p style="text-align: center"><p class="pic_center"><img title="" alt="" src="https://files.52php.cn/file_images/article/201701/2017012010194311.png" /></p></p> <p>好了，然后直接上完整的源码:</p> <p>完整的源码链接:</p> <p></p> <p>像学后台的，把这个BootStrap学到这里，然后能灵活应用基本就差不多啦~~~如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程之家网站的支持！</p> <p style="text-align:right;">（编辑：李大同）</p> <p style="text-align:right;">【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!</p> </td> </tr> </table> </div> <div class="dede_pagess"><ul class="pagelist"></ul></div> <div class="ad-690"><script src='https://ess.0577qiche.com/d/js/acmsd/ad76.js' language='javascript'></script></div> <div class="g-box10"> <div class="t-2">相关内容</div> <ul class="b-box12"></ul> <ul class="b-box13"><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/479203.html" target="_blank">scala – 获取SettingKey [T]的值</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/570845.html" target="_blank">AngularJS实际项目应用——Service层介绍</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/358527.html" target="_blank">regex – 使用match在只有bash的字符串中查找子字符串</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/522922.html" target="_blank">使用多种方式调用webservice服务</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/573231.html" target="_blank">angular-material – 在Angular Material中,如何使md-siden</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/580084.html" target="_blank">错误TS2304：在角度4项目的app.components.ts和main.ts文件</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/407501.html" target="_blank">Shell脚本对Linux进行文件校验</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/585529.html" target="_blank">twitter-bootstrap – 我应该使用从CDN的Bootstrap还是在我</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/559549.html" target="_blank">AngularJs DELETE与数据集错误的内容类型头</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/375140.html" target="_blank">openLDAP如何从当前配置中删除nis架构</a></li><div class="cl"></div></ul> </div> </div> </div> <div class="right-1 fr"> <div class="g-box8"> <div class="t-2">推荐文章</div> <ul></ul> </div> <div class="g-box11"> <div class="t-2">站长推荐</div> <ul class="b-box7"><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/554024.html" target="_blank">angularjs – 你在Angular中存储/创建模型的位置</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/493858.html" target="_blank">从Scala实现具有Raw类型的Java接口</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/584995.html" target="_blank">点击td 获得tr所有的值（BootStrap 篇）</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/345407.html" target="_blank">shell脚本编程之循环控制结构</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/582363.html" target="_blank">修改Bootstrap的一些默认样式</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/427297.html" target="_blank">bash – 如何在.screenrc中转义管道,以便在启动时</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/378286.html" target="_blank">UNIX时间戳记到MySQL DATETIME</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/374839.html" target="_blank">unix – 如何仅使用IPv6在多个主机上执行命令？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/438375.html" target="_blank">amazon-web-services – Elastic Beanstalk上的</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/564675.html" target="_blank">angularjs – 按Object键入ng重复</a></li></ul> </div> <script type="text/javascript">jQuery(".g-box8").slide({ titCell:"li",triggerTime:0 }); </script> <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad103.js' language='javascript'></script></div> <div class="g-box3 u-3"> <div class="t-1">热点阅读</div> <ul class="b-box2"></ul> </div> <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad77.js' language='javascript'></script></div> </div> <div class="cl"></div> </div> <div class="ad-960"><script src='https://ess.0577qiche.com/d/js/acmsd/ad78.js' language='javascript'></script></div> <div class="footer"> <p>【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。</p> <p>建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果</p> <p>Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同</p> <p><script type="text/javascript" src="//js.users.51.la/21280179.js"></script></p> </div> </body> </html>