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

首先把模板代码上上来:

创新互联2013年开创至今，是专业互联网技术服务公司，拥有项目成都网站设计、成都做网站网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元刚察做网站,已为上家服务,为刚察各地企业和个人服务,联系电话:028-86922220



 
  
  
  
  
  
  
  BootStrap基础入门

图片样式

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

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

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

图片样式应用
   
    
    文字文字文字文字文字文字文字文字文字文字文字文字

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

辅助类样式

文本颜色类：.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 可以清除浮动。

让内容块网页居中：

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

CSS组件

下拉菜单

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

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

.dropdown-menu：给

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

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

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

.disabled：禁用的菜单项。

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

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

按钮组

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

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

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

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

按钮组的应用

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

按钮式下拉菜单

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

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

用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><pre><h3 class="page-header">输入框组的应用</h3> <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><img src="/upload/otherpic47/77757.png" alt="BootStrap 图片样式、辅助类样式和CSS组件的实例详解"></p><p><strong>标签页(选项卡)</strong></p><p>.nav是标签页的基类</p><p>.nav-tabs是标签页类样式</p><p>.active是标签页的状态类(当前样式)</p><p>.nav-pills胶囊式标签页</p><p>.nav-stacked胶囊式标签页堆放排列(垂直排列) </p><div><pre> <h3 class="page-header">选项卡效果</h3> <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><img src="/upload/otherpic47/77758.png" alt="BootStrap 图片样式、辅助类样式和CSS组件的实例详解"></p><p><strong>路径导航</strong></p><p>.breadcrumb：赋给</p><p>可以实现面包屑效果。</p><p>.active赋给当前栏目，当前栏目不加链接。 </p><div><pre> <h3 class="page-header">路径导航效果</h3> <ol class="breadcrumb"> <li> <a href="#">Home</a> </li> <li> <a href="#">Library</a> </li> <li class="active">Data</li> </ol></pre></div><p><img src="/upload/otherpic47/77759.png" alt="BootStrap 图片样式、辅助类样式和CSS组件的实例详解"></p><p><strong>分页</strong></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><pre> <div class="text-center" > <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" > <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><img src="/upload/otherpic47/77760.png" alt="BootStrap 图片样式、辅助类样式和CSS组件的实例详解"></p><p><strong>缩略图</strong></p><p>.thumbnail赋给<a>元素，可以实现缩略图样式。</p><p>.caption 可以实现缩略图标题及描述 </p><div><pre> <h3 class="page-header">缩略图效果</h3> <div class="row"> <div class="col-md-2"> <a href="" class="thumbnail"><img src="img/001.png" /></a> <div class="caption"> <h5>图片一</h5> </div> </div> <div class="col-md-4"> <a href="" class="thumbnail"><img src="img/001.png" /></a> <div class="caption"> <h5>图片一</h5> </div> </div> <div class="col-md-6"> <a href="" class="thumbnail"><img src="img/001.png" /></a> <div class="caption"> <h5>图片一</h5> </div> </div> </div></pre></div><p><img src="/upload/otherpic47/77761.gif" alt="BootStrap 图片样式、辅助类样式和CSS组件的实例详解"></p><p><strong>导航栏</strong></p><p>导航栏有一个不同，他不是写在Container包含层里面了，而是那个div的上面！</p><p>.navbar：导航栏的基类，用于<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><pre><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" > ... </div></pre></div><p><img src="/upload/otherpic47/77762.png" alt="BootStrap 图片样式、辅助类样式和CSS组件的实例详解"></p><p>好了，然后直接上完整的源码:</p><p>完整的源码链接:</p><p>https://github.com/chenhaoxiang/BootStrap/tree/master/day3</p><p>像学后台的，把这个BootStrap学到这里，然后能灵活应用基本就差不多啦~~~如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！</p> <br> 分享文章：BootStrap图片样式、辅助类样式和CSS组件的实例详解 <br> 网站地址：<a href="http://cqcxhl.com/article/ihsicc.html">http://cqcxhl.com/article/ihsicc.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/dihcsde.html">电脑mysql怎么启动电脑mysql 怎么启动</a> </li><li> <a href="/article/dihcsse.html">android回复 android恢复工具</a> </li><li> <a href="/article/dihccpd.html">css未加载样式错乱 css样式加载失败</a> </li><li> <a href="/article/dihcscs.html">html5模拟终端 html用什么模拟器打开</a> </li><li> <a href="/article/dihcsed.html">微信企业群怎么拉进去微信企业怎么拉微信好友进群</a> </li> </ul> </div> </div> <div class="footer"> <div class="footer_content"> <div class="footer_content_top clear"> <div class="content_top_share fl"> <div><img src="/Public/Home/img/logo.png"></div> <div class="top_share_content"> <dd>分享至：</dd> <dt class="bdsharebuttonbox clear" id="share"> <a href="#" class="bds_tsina iconfont fl" data-cmd="tsina" title="分享到新浪微博"></a> <a href="#" class="bds_sqq iconfont fl" data-cmd="sqq" title="分享到QQ好友"></a> <a href="#" class="bds_weixin iconfont fl" data-cmd="weixin" title="分享到微信"></a> <a href="#" class="bds_weixin iconfont fl" data-cmd="tieba" title="分享到贴吧"></a> </dt> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script> </div> </div> <div class="content_top_left fl clear"> <div class="top_left_list fl"> <dd><a href="/about/">关于我们</a></dd> <dt> <a href="/about/#gsjj">公司简介</a> <a href="/about/#fzlc">发展历程</a> </dt> </div> <div class="top_left_list fl"> <dd><a href="/service/">服务项目</a></dd> <dt> <a href="/service/">高端网站建设</a> <a href="/miniprogram/">小程序开发</a> <a href="/service/app.html">APP开发</a> <a href="/service/yingxiao.html">网络营销</a> </dt> </div> <div class="top_left_list fl"> <dd><a href="/jianzhan/">建站知识</a></dd> <dt> <a href="/jianzhan/2.html">网站建设</a> <a href="/jianzhan/3.html">网站设计</a> <a href="/jianzhan/4.html">网站制作</a> <a href="/jianzhan/5.html">小程序</a> </dt> </div> <div class="top_left_list fl"> <dd><a href="/contact/">联系我们</a></dd> <dt> <a href="/contact/#lxwm">公司地址</a> <a href="/contact/#rczp">人才招聘</a> </dt> </div> </div> <div class="content_top_right addressR fr"> <div class="top_right_title addressf_title"> <a href="javascript:;" class="on">成都</a> <a href="javascript:;">重庆</a> </div> <div class="top_right_content addressf"> <div class="right_content_li on"> <div class="right_content_list clear"> <dd class="fl iconfont"></dd> <dt class="fl">电话：028-86922220</dt> </div> <div class="right_content_list clear"> <dd class="fl iconfont"></dd> <dt class="fl">地址：成都市太升南路288号锦天国际A幢1002号</dt> </div> </div> <div class="right_content_li"> <div class="right_content_list clear"> <dd class="fl iconfont"></dd> <dt class="fl">电话：028-86922220</dt> </div> <div class="right_content_list clear"> <dd class="fl iconfont"></dd> <dt class="fl">地址：重庆市南岸区弹子石腾龙大道58号2栋21-6</dt> </div> </div> </div> </div> </div> </div> <div class="footer_content_copyright clear">版权所有：成都创新互联科技有限公司重庆分公司 <a href="http://beian.miit.gov.cn/" rel="nofollow" target="_blank">渝ICP备2021005571号-4</a> </div> </div>  <div class="FloatingWindow clear"> <a href="tencent://message/?uin=1683211881&Site=&Menu=yes" class="FloatingWindow_list fr"> <div class="FloatingWindow_list_title"> <dd class="iconfont"></dd> <dt><span>在线</span>咨询</dt> </div> </a> <a href="javascript:;" class="FloatingWindow_list fr"> <div class="FloatingWindow_list_title"> <dd class="iconfont"></dd> <dt>服务热线</dt> </div> <div class="FloatingWindow_list_down fadeInRight animated">服务热线：028-86922220</div> </a> <a href="javascript:;" class="FloatingWindow_list fr STop"> <div class="FloatingWindow_list_title"> <dd class="iconfont"></dd> <dt>TOP</dt> </div> </a> </div> <script src="/Public/Home/js/jquery-1.8.3.min.js"></script> <script src="/Public/Home/js/comm.js"></script> <script src="/Public/Home/js/wow.js"></script> <script src="/Public/Home/js/common.js"></script> </body> </html> <script> $(".con img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); </script>

重庆分公司，新征程启航

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

图片样式应用

清除浮动的应用

下拉菜单的应用

按钮组的应用

按钮式下拉菜单的应用