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

这篇文章主要介绍了BootStrap 图片样式、辅助类样式和CSS组件的实现代码，图文并茂介绍的非常详细，需要的朋友参考下吧

首先把模板代码上上来:

   BootStrap基础入门

图片样式

.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：禁用的菜单项。

 下拉菜单的应用
   HTML
 CSS
 Java
 Maven
 MySQL
 Spring

按钮组

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

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

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

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

 按钮组的应用

按钮式下拉菜单

 按钮式下拉菜单的应用
   按钮
 按钮
 按钮
 按钮
 按钮
 按钮
 按钮1
 按钮1
 按钮3
 按钮2
   按钮
 按钮
 按钮
 按钮

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

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

输入框组

，不能用于。</p><p>.input-group-addon用于在<input>前后添加额外元素，赋给一个<span>元素即可。</p><p><span style="color: #ff0000">注意：</span>将.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> <a href="#">Action</a></li><li> <a href="#">Another action</a></li><li> <a href="#">Something else here</a></li><li class="divider"></li><li> <a href="#">Separated link</a></li></ul></div><input type="text" class="form-control"></div><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> <a href="">按钮</a></li><li> <a href="">按钮</a></li><li> <a href="">按钮</a></li><li class="divider"></li><li> <a href="">按钮</a></li></ul></div><input type="text" class="form-control"></div></pre></div><p style="text-align: center"><img title="" alt="" src="https://ss.0133.cn/article/7b/4d/04/7b4d04b1517f62f7322afe471454596f.jpg-600"/></p><p><span style="color: #ff0000"><strong>标签页(选项卡)</strong></span></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"> <a href="#">Home</a></li><li role="presentation"> <a href="#">Profile</a></li><li role="presentation"> <a href="#">Messages</a></li></ul><ul class="nav nav-pills" role="tablist"> <li role="presentation" class="active"> <a href="#">Home</a></li><li role="presentation"> <a href="#">Profile</a></li><li role="presentation"> <a href="#">Messages</a></li></ul></pre></div><p style="text-align: center"><img title="" alt="" src="https://ss.0133.cn/article/17/8b/3b/178b3bc2ab5c0ea7cc08b3aa4c7600d9.jpg-600"/></p><p><span style="color: #ff0000"><strong>路径导航</strong></span></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> <a href="#">Home</a></li><li> <a href="#">Library</a></li><li class="active">Data</li></ol></pre></div><p style="text-align: center"><img title="" alt="" src="https://ss.0133.cn/article/0d/01/fb/0d01fbbfb90d1e4af8a452ec25caa067.jpg-600"/></p><p><span style="color: #ff0000"><strong>分页</strong></span></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"> <a href="#">← 上一页</a></li><li class="disabled"> <a href="">«</a></li><li class="active"> <a href="">1</a></li><li> <a href="">2</a></li><li> <a href="">3</a></li><li> <a href="">4</a></li><li> <a href="">5</a></li><li> <a href="">6</a></li><li> <a href="">7</a></li><li> <a href="">8</a></li><li> <a href="">9</a></li><li> <a href="">10</a></li><li> <a href="">»</a></li><li class="next"> <a href="#">下一页 →</a></li></ul></div><div class="text-center" style="border: 1px solid red;"> <ul class="pagination pagination-lg"> <li> <a href="">«</a></li><li class="active"> <a href="">1</a></li><li> <a href="">2</a></li><li> <a href="">3</a></li><li> <a href="">4</a></li><li> <a href="">5</a></li><li> <a href="">6</a></li><li> <a href="">7</a></li><li> <a href="">8</a></li><li> <a href="">9</a></li><li> <a href="">10</a></li><li> <a href="">»</a></li></ul></div></pre></div><p style="text-align: center"><img title="" alt="" src="https://ss.0133.cn/article/bf/36/7c/bf367c9c4e2f3c83b1b0ea0fa53f5912.jpg-600"/></p><p><span style="color: #ff0000"><strong>缩略图</strong></span></p><p>.thumbnail赋给<a>元素，可以实现缩略图样式。</p><p>.caption 可以实现缩略图标题及描述 </p><div class="jb51code"><pre class="brush:js;"> <h2 class="page-header">缩略图效果</h2><div class="row"> <div class="col-md-2"> <a href="" class="thumbnail"></a><div class="caption"> <h4>图片一</h4></div></div><div class="col-md-4"> <a href="" class="thumbnail"></a><div class="caption"> <h4>图片一</h4></div></div><div class="col-md-6"> <a href="" class="thumbnail"></a><div class="caption"> <h4>图片一</h4></div></div></div></pre></div><p style="text-align: center"><img title="" alt="" src="https://ss.0133.cn/article/b5/3a/ee/b53aee455f39d2ad997ab9a89591f0c1.jpg-600"/></p><p><span style="color: #ff0000"><strong>导航栏</strong></span></p><p>导航栏有一个不同，他不是写在Container包含层里面了，而是那个div的上面！</p><p><nav>元素。 <br/> .navbar-default：导航栏默认样式，用于<nav>元素。 <br/> .container是<nav>的子元素。导航栏内容都放入其中。 <br/> .navbar-header：导航栏头部样式。 <br/> .navbar-brand：设置品牌图标样式 <br/> .collapse是折叠导航栏的样式的基类。 <br/> .navbar-collapse是折叠导航栏样式。 <br/> .nav是导航栏的链接基类。 <br/> .navbar-nav是导航栏的链接样式。 <br/> .navbar-from：导航栏表单，可以使表单元素排在同一行。 <br/> .navbar-left 或 .navbar-right ：组件排列。导航链接、表单、按钮或文本对齐。 <br/> .navbar-btn：对于不在<form>中的<button>元素，实现垂直对齐。 <br/> .navbar-text：对于导航栏的普通文本有了行距和颜色，通常用于<p><br/> .navbar-fixed-top：导航栏固定在顶部，用于<nav>元素。需要为<body>设置padding-top:70px <br/> .navbar-fixed-bottom：导航栏固定在底部，用于<nav>元素。需要为<body>设置padding-bottom:70px; <br/> .navbar-static-top：导航栏静止在顶部，用于<nav>元素。会随着滚动条移动而消失。 <br/> .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"> <a class="navbar-brand" href="">Brand</a><p class="navbar-text">欢迎光临</p></div><div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-left"> <li class="active"> <a href="">起步</a></li><li> <a href="">CSS全局样式</a></li><li> <a href="">组件</a></li><li> <a href="">插件</a></li><li> <a href="">网站案例</a></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> <a href="">Link</a></li><li class="dropdown"> <a href="" class="dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span></a><ul class="dropdown-menu"> <li> <a href="#">Action</a></li><li> <a href="#">Another action</a></li><li> <a href="#">Something else here</a></li><li class="divider"></li><li> <a href="#">Separated link</a></li></ul></li></ul></div></div></nav><div class="container" style="background-color: #FFFFFF;"> ... </div></pre></div><p style="text-align: center"><img title="" alt="" src="https://ss.0133.cn/article/7a/ba/88/7aba887daa7601659215b5c6a6e56fd1.jpg-600"/></p><p>好了，然后直接上完整的源码:</p><p>完整的源码链接:</p><p><a href="https://github.com/chenhaoxiang/BootStrap/tree/master/day3">https://github.com/chenhaoxiang/BootStrap/tree/master/day3</a></p><p></p></div><p>以上就是BootStrap 图片样式、辅助类样式和CSS组件的实例详解的详细内容，更多请关注0133技术站其它相关文章！</p></article><div class="post-actions"><a href="javascript:;" etap="like" class="post-like action action-like" data-pid="0"><i class="fa fa-thumbs-o-up"></i>赞(<span>0</span>)</a><a href="javascript:;" class="action action-rewards" data-event="rewards"><i class="fa fa-jpy"></i> 打赏</a></div><div class="post-copyright">未经允许不得转载：<a href="/">0133技术站首页</a> » <a href="/cate74/">JavaScript 教程</a></div><nav class="article-nav"><span class="article-nav-prev">上一篇<br><a href="/cate74/11713349120000.html" rel="prev">学习JavaScript鼠标响应事件</a></span><span class="article-nav-next">下一篇<br><a href="/cate74/11713366012100.html" rel="next">javascript使用for循环批量注册的事件不能正确获取索引值的解决方法</a></span></nav><div class="relates relates-thumb"><div class="title"><h3>相关文章</h3></div><ul><li><a href="/cate74/112731067600.html"><img data-src="https://ss.0133.cn/upload/article/000/000/006/5d2d798d9febd779.jpg-160" alt="如何在JavaScript中使用对象方法？" class="thumb"></a><a href="/cate74/112731067600.html">如何在JavaScript中使用对象方法？</a></li><li><a href="/cate74/112752011600.html"><img data-src="https://ss.0133.cn/upload/article/000/000/006/5d32861c799f7757.png-160" alt="18个用于创建漂亮图表的JavaScript库推荐" class="thumb"></a><a href="/cate74/112752011600.html">18个用于创建漂亮图表的JavaScript库推荐</a></li><li><a href="/cate74/112855793600.html"><img data-src="https://ss.0133.cn/upload/article/000/000/013/5d42bb0686598404.jpg-160" alt="POST 请求的三种常见数据提交格式" class="thumb"></a><a href="/cate74/112855793600.html">POST 请求的三种常见数据提交格式</a></li><li><a href="/cate74/112863815225.html"><img data-src="https://ss.0133.cn/upload/article/000/000/013/5e13e133098fe155.jpg-160" alt="JavaScript基础--引用数据类型 (对象)" class="thumb"></a><a href="/cate74/112863815225.html">JavaScript基础--引用数据类型 (对象)</a></li><li><a href="/cate74/112899244025.html"><img data-src="https://ss.0133.cn/upload/article/000/000/013/5d454d428ac89348.jpg-160" alt="如何在JavaScript中使用字符串？" class="thumb"></a><a href="/cate74/112899244025.html">如何在JavaScript中使用字符串？</a></li><li><a href="/cate74/112916500025.html"><img data-src="https://ss.0133.cn/upload/article/000/000/006/5d47eb8530061725.jpg-160" alt="Window对象在前端领域的角色" class="thumb"></a><a href="/cate74/112916500025.html">Window对象在前端领域的角色</a></li><li><a href="/cate74/112917040100.html"><img data-src="https://ss.0133.cn/upload/article/000/000/001/5f6807e416857960.jpg-160" alt="了解JavaScript中的类" class="thumb"></a><a href="/cate74/112917040100.html">了解JavaScript中的类</a></li><li><a href="/cate74/112938684100.html"><img data-src="https://ss.0133.cn/upload/article/000/000/013/5d4949232b458994.jpg-160" alt="JavaScript中Switch语句的使用方法" class="thumb"></a><a href="/cate74/112938684100.html">JavaScript中Switch语句的使用方法</a></li></ul></div><!-- <div class="title" id="comments"><h3>评论 <small>抢沙发</small></h3></div><div id="respond" class="no_webshot"><form action="return false;" method="post" id="commentform"><div class="comt"><div class="comt-title"><img data-src="https://secure.gravatar.com/avatar/?s=100&d=mm" class="avatar avatar-100" height="50" width="50"><p><a id="cancel-comment-reply-link" href="javascript:;">取消</a></p></div><div class="comt-box"><textarea placeholder="你的评论可以一针见血" class="input-block-level comt-area" name="comment" id="comment" cols="100%" rows="3" tabindex="1" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};">

-->

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

图片样式应用

清除浮动的应用

下拉菜单的应用

按钮组的应用

按钮式下拉菜单的应用

前端开发

置顶推荐

猜你喜欢