当前位置：首页 > 资讯 > 技术文档

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

时间：2021-10-10 17:53 编辑：来源：阅读：
扫一扫，手机访问

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

首先把模板代码上上来:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
  <!--判断IE9 用来支持HTML5 
  html5shiv.min.js-没有那个元素，就创建那个元素
  respond.min.js支持响应式布局的
  -->
  <!--[if lt IE 9]> 
  <script src="js/html5shiv.min.js"></script>
  <script src="js/respond.min.js"></script>
  <![endif]-->
  <title>BootStrap基础入门</title>
 </head>
 <body style="background-color: #CCCCCC;">
  <div class="container" style="background-color: #FFFFFF;">
  </div>
  <script type="text/javascript" src="js/jquery.slim.min.js"></script>
  <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
 </body>
</html>

[b]图片样式[/b] .img-responsive：直接为图片添加该样式，可以实现响应式图片。 .center-block：图片居中样式，而不能使用text-center样式。图片形状样式：.img-rounded(圆角图片)、.img-circle(圆形图片)、.img-thumbnail(边框圆角)

<h2 class="page-header">图片样式应用</h2>
   <div>
    <img class="img-responsive img-thumbnail center-block" src="img/011.jpg" />
    <p>文字文字文字文字文字文字文字文字文字文字文字文字</p>
   </div>

[img]http://files.jb51.net/file_images/article/201701/201701201019421.png[/img] [b]辅助类样式[/b] 文本颜色类：.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 可以清除浮动。让内容块网页居中：

 <h2 class="page-header">清除浮动的应用</h2>
   <div class="clearfix" style="border: 1px solid red;width: 340px;">
    <ul class="list-unstyled">
     <li class="pull-left" style="padding: 10px;">
      <div class="text-center">
       <a href=""><img src="img/001.png" /></a><br />
       <a href="">文字1</a>
       <span class="caret"></span>
      </div>
     </li>
     <li class="pull-left" style="padding: 10px;">
      <div class="text-center">
       <a href=""><img src="img/002.png" /></a><br />
       <a href="">文字2</a>
      </div>
     </li>
     <li class="pull-left" style="padding: 10px;">
      <div class="text-center">
       <a href=""><img src="img/003.png" /></a><br />
       <a href="">文字3</a>
      </div>
     </li>
     <li class="pull-left" style="padding: 10px;">
      <div class="text-center">
       <a href=""><img src="img/004.png" /></a><br />
       <a href="">文字4</a>
      </div>
     </li>
    </ul>
   </div>

[img]http://files.jb51.net/file_images/article/201701/201701201019422.png[/img] [b]CSS组件[/b] 下拉菜单 .dropdown将下拉菜单触发器和下拉菜单包含在其中(下拉菜单父元素)。 data-toggle属性：下拉菜单触发器。取值为“dropdown”。 .dropdown-menu：给<ul>指定下拉菜单的样式。 .dropup：向上弹出的下拉菜单(下拉菜单父元素)。下拉菜单对齐方式[code]：.dropdown-menu-left和.dropdown-menu-right[/code] .divider：为下拉菜单添加分隔线，用于将多个链接分组。 .disabled：禁用的菜单项。

 <h2 class="page-header">下拉菜单的应用</h2>
   <div class="dropdown">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
     Java课 
     <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
     <li>
      <a href="">HTML</a>
     </li>
     <li>
      <a href="">CSS</a>
     </li>
     <li>
      <a href="">Java</a>
     </li>
     <li class="divider"></li>
     <li>
      <a href="">Maven</a>
     </li>
     <li>
      <a href="">MySQL</a>
     </li>
     <li>
      <a href="">Spring</a>
     </li>
    </ul>
   </div>

[img]http://files.jb51.net/file_images/article/201701/201701201019423.png[/img] [b]按钮组[/b] .btn-group：按钮组(可以实现将一组按钮放在同一行)。 .btn-toolbar：按钮组工具栏(将多个按钮组放在其中)。按钮组的尺寸：.btn-group-lg、.btn-group-sm、.btn-group-xs .btn-group-vertical：垂直排列的按钮组。

<h2 class="page-header">按钮组的应用</h2>
   <div class="btn-toolbar">
    <div class="btn-group btn-group-lg ">
     <button type="button" class="btn btn-default">按钮一</button>
     <button type="button" class="btn btn-default">按钮二</button>
     <button type="button" class="btn btn-default">按钮三</button>
     <button type="button" class="btn btn-default">按钮四</button>
     <button type="button" class="btn btn-default">按钮五</button>
    </div>
    <div class="btn-group">
     <button type="button" class="btn btn-danger">按钮一</button>
     <button type="button" class="btn btn-danger">按钮二</button>
    </div>
    <div class="btn-group btn-group-sm">
     <button type="button" class="btn btn-primary">按钮一</button>
     <button type="button" class="btn btn-primary">按钮二</button>
    </div>
    <div class="btn-group btn-group-xs btn-group-vertical">
     <button type="button" class="btn btn-success">按钮一</button>
     <button type="button" class="btn btn-success">按钮二</button>
     <button type="button" class="btn btn-success">按钮三</button>
    </div>
   </div>

[img]http://files.jb51.net/file_images/article/201701/201701201019434.png[/img] [b]按钮式下拉菜单[/b]

<h2 class="page-header">按钮式下拉菜单的应用</h2>
   <div class="btn-group dropup">
    <button type="button" class="btn btn-danger" data-toggle="dropdown">
     按钮 
     <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" style="overflow: auto;height: 100px;">
     <li>
      <a href="">按钮</a>
     </li>
     <li>
      <a href="">按钮</a>
     </li>
     <li>
      <a href="">按钮</a>
     </li>
     <li class="divider"></li>
     <li>
      <a href="">按钮</a>
     </li>
     <li>
      <a href="">按钮</a>
     </li>
     <li>
      <a href="">按钮</a>
     </li>
     <li>
      <a href="">按钮1</a>
     </li>
     <li>
      <a href="">按钮1</a>
     </li>
     <li>
      <a href="">按钮3</a>
     </li>
     <li>
      <a href="">按钮2</a>
     </li>
    </ul>
    <button type="button" class="btn btn-danger">
     按钮 
    </button>
   </div>
   <div class="btn-group dropup">
    <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>

[img]http://files.jb51.net/file_images/article/201701/201701201019435.gif[/img] 在这里呢，如果我们下拉菜单很多，就可以用滚动条来解决！用overflow: auto;，然后定义一个高度就好。 [b]输入框组[/b] .input-group：只能用于文本框<input>，不能用于<select>和<textarea>。 .input-group-addon用于在<input>前后添加额外元素，赋给一个<span>元素即可。注意：将.input-group-addon和<input>元素包在.input-group之中。 .input-group-lg 和 .input-group-sm 可以改变输入框组的尺寸。 .input-group-btn可以作为额外元素的按钮，应该是作为<button>的父元素。

<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>
    <!-- /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>

[img]http://files.jb51.net/file_images/article/201701/201701201019436.png[/img] [b]标签页(选项卡)[/b] .nav是标签页的基类 .nav-tabs是标签页类样式 .active是标签页的状态类(当前样式) .nav-pills胶囊式标签页 .nav-stacked胶囊式标签页堆放排列(垂直排列)

 <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>

[img]http://files.jb51.net/file_images/article/201701/201701201019437.png[/img] [b]路径导航[/b] .breadcrumb：赋给可以实现面包屑效果。 .active赋给当前栏目，当前栏目不加链接。

 <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>

[img]http://files.jb51.net/file_images/article/201701/201701201019438.png[/img] [b]分页[/b] .pagination赋给元素可以实现分页效果 « 上一页 » 下一页 .disabled禁用状态 .active激活状态 .pagination-lg分页大尺寸 .pagination-sm分页小尺寸 .pager可以实现翻页效果。上一页、下一页效果。

 <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>

[img]http://files.jb51.net/file_images/article/201701/201701201019439.png[/img] [b]缩略图[/b] .thumbnail赋给<a>元素，可以实现缩略图样式。 .caption 可以实现缩略图标题及描述

 <h2 class="page-header">缩略图效果</h2>
   <div class="row">
    <div class="col-md-2">
     <a href="" class="thumbnail"><img src="img/001.png" /></a>
     <div class="caption">
      <h4>图片一</h4>
     </div>
    </div>
    <div class="col-md-4">
     <a href="" class="thumbnail"><img src="img/001.png" /></a>
     <div class="caption">
      <h4>图片一</h4>
     </div>
    </div>
    <div class="col-md-6">
     <a href="" class="thumbnail"><img src="img/001.png" /></a>
     <div class="caption">
      <h4>图片一</h4>
     </div>
    </div>
   </div>

[img]http://files.jb51.net/file_images/article/201701/2017012010194310.gif[/img] [b]导航栏[/b] 导航栏有一个不同，他不是写在Container包含层里面了，而是那个div的上面！ .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>元素。

<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>

[img]http://files.jb51.net/file_images/article/201701/2017012010194311.png[/img] 好了，然后直接上完整的源码: 完整的源码链接: [url=https://github.com/chenhaoxiang/BootStrap/tree/master/day3]https://github.com/chenhaoxiang/BootStrap/tree/master/day3[/url] 像学后台的，把这个BootStrap学到这里，然后能灵活应用基本就差不多啦~~~如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持！

全部评论(0)

上一篇：javascript中match函数的用法小结
下一篇：JS实现屏蔽shift，Ctrl，alt等功能键的方法

资讯排行榜
更多>>