首先把模板代码上上来:

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

图片样式

.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 可以清除浮动。

让内容块网页居中：

 
清除浮动的应用
   

    

     

      

       

       文字1
       
      
     
     

      

       

       文字2
      
     
     

      

       

       文字3
      
     
     

      

       

       文字4
      
     
    
   

CSS组件

下拉菜单

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

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

.dropdown-menu：给

指定下拉菜单的样式。

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

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

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

.disabled：禁用的菜单项。       

 
下拉菜单的应用
   

    
     Java课 
     
    
    

     

      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;，然后定义一个高度就好。

输入框组

.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> <!-- /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> <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://chengdu.cdxwcx.cn/article/ihsicc.html">http://chengdu.cdxwcx.cn/article/ihsicc.html</a> </div> </div> </div> <!--左边end--> <!--右边begin--> <div class="news_r"> <div class="news_t"><h2 class="h2">其他资讯</h2></div> <div class="news_ul3"> <ul> <li> <a href="/article/sjjpid.html"> <h3 class="h3">武汉抖音代运营怎么找公司</h3> </a> </li><li> <a href="/article/sjjpeg.html"> <h3 class="h3">代运营是什么意思,代运营公司有哪些优势和介绍内容</h3> </a> </li><li> <a href="/article/sjjpjd.html"> <h3 class="h3">安庆头条短视频运营</h3> </a> </li><li> <a href="/article/sjjpje.html"> <h3 class="h3">短视频代运营团队选哪个</h3> </a> </li><li> <a href="/article/sjjpjc.html"> <h3 class="h3">短视频公司的运营岗位怎么样,新媒体短视频运营行业怎么样</h3> </a> </li> </ul> </div> </div> <!--右边end--> <div class="c_l"></div> </div> </div> <!--正文end--> <!--尾部begin--> <!--尾部begin--> <footer> <div class="f_bg"> <div class="wrap"> <div class="links"> <h2 class="h2">甜橘子解决方案<a href="/solution/" title="更多" class="more">更多+</a></h2> <ul> <li><a href="/solution/xiaochengxu.html" title="小程序定制解决方案">小程序定制解决方案</a></li> <li><a href="/solution/qiyewz.html" title="企业网站建设解决方案">企业网站建设解决方案</a></li> <li><a href="/solution/menhuwz.html" title="行业门户网站建设解决方案">行业门户网站建设解决方案</a></li> <li><a href="/solution/yingxiaowz.html" title="营销型网站建设解决方案">营销型网站建设解决方案</a></li> <li><a href="/solution/waimaowz.html" title="外贸网站建设解决方案">外贸网站建设解决方案</a></li> <li><a href="/solution/pingpaiwz.html" title="品牌形象网站建设解决方案">品牌形象网站建设解决方案</a></li> <li><a href="/solution/dianziwz.html" title="数码、电子产品网站建设解决方案">数码、电子产品网站建设解决方案</a></li> <li><a href="/solution/jituanwz.html" title="集团、上市企业网站建设解决方案">集团、上市企业网站建设解决方案</a></li> <li><a href="/solution/dichanwz.html" title="房地产、地产项目网站建设解决方案">房地产、地产项目网站建设解决方案</a></li> <li><a href="/solution/zhubaowz.html" title="珠宝高端奢侈品网站建设解决方案">珠宝高端奢侈品网站建设解决方案</a></li> </ul> </div> <div class="links w2"> <h2 class="h2">我们的实力<a href="/about/" title="更多" class="more">更多+</a></h2> <ul> <li>10年专业互联网服务经验</li> <li>成都高端建站设计团队</li> <li>资深行业分析策划</li> <li>B2C营销型网站建设者</li> <li>前沿视觉设计、研发能力</li> <li>前端代码深度符合SEO优化</li> <li>成都市高新技术企业证书</li> <li>具有完备的项目管理</li> <li>完善的售后服务体系</li> <li>深厚的网络运营经验</li> <li>时刻新技术研发能力</li> <li>16个网站系统软件著作权</li> </ul> </div> <div class="f_div2_r"> <h2 class="h2">关于甜橘子<a href="/about/" title="更多" class="more">更多+</a></h2> 甜橘子网站设计，为客户量身定制各类网站建设业务，包括企业型、电子商务型、行业门户型、品牌建立型等各类网站，实战经验丰富，成功案例众多。以客户利益为出发点，甜橘子网站制作为客户规划、定制符合企业需求、带有营销价值的建站方案，提供从网站前期定位分析策划到网站界面设计... </div> <div class="c_l"></div> </div> <div class="wrap"> <div class="f_div3"> <span class="l">成都网站制作案例©2020 甜橘子设计 版权所有 | <a href="http://chengdu.cdxwcx.cn" target="_blank">甜橘子网站设计</a><a href="http://chengdu.cdxwcx.cn" target="_blank">chengdu.cdxwcx.cn</a></span> <span class="r"><a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">蜀ICP备11025516号</a></span> </div> </div> </div> </footer> <!--尾部end--> <script language="javascript" src="/Public/Home/js/foot.js"></script> <!--尾部end--> <!--侧边栏begin--> <div class="side"> <ul> <li id="qqonline_xbceo"><a href="tencent://message/?uin=631063699&Site=&Menu=yes"><i class="bgs1"></i>QQ咨询</a></li> <li class="shangqiao"><a href="tencent://message/?uin=532337155&Site=&Menu=yes" title="在线咨询"> <div><i class="bgs2"></i>在线咨询</div> </a></li> <li class="sideewm"><i class="bgs3"></i>官方微信 <div class="ewBox"></div> </li> <li class="sideetel"><i class="bgs4"></i>联系电话 <div class="telBox"> <dd class="bgs1"><span>座机</span><a href="tel:028-86922220" target="_blank">028-86922220</a></dd> <dd class="bgs2"><span>手机</span><a href="tel:13518219792" target="_blank">13518219792</a></dd> </div> </li> <li class="sidetop" onClick="goTop()" id="sidetop"><i class="bgs6"></i>返回顶部</li> </ul> </div> <script type="text/javascript"> $('.sideewm').hover(function(){ $('.ewBox').stop().fadeIn(); },function(){ $('.ewBox').stop().fadeOut(); }); $('.sideetel').hover(function(){ $('.telBox').stop().fadeIn(); },function(){ $('.telBox').stop().fadeOut(); }); $(".con_id 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> <!-- WPA start --> <!-- WPA end --> <!--侧边栏end--> </body> </html>