首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Bootstrap学习笔记之css组件(3)

Posted in Javascript onJune 07, 2016

今天我们来看看css组件效果以及其中比较重要的类，这些类都不难，关键要熟练掌握，搭配使用，灵活运用。关于前两篇中，css样式和布局的文章，大家可以在之前的文章中阅读。

 一、导航组件

       自己做了个导航，目前只有一级菜单，下一篇文章中，将给出二级菜单，涉及到js的插件，所以这里不在描述。

<!DOCTYPE html> 
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>二级菜单</title>
<style>
 .sideBar-menu{margin:20px auto;width: 180px;}
 /*重写鼠标滑过的样式*/
.nav-pills li a:hover 
{
 background-color: #337ab7;
 color: #fff;
}
</style>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<!-- bootstrap制作导航菜单 -->
<div class="sideBar-menu ">
 <ul class="nav nav-pills nav-stacked">
 <li role="presentation" class="active"><a href="#"><span class=" glyphicon glyphicon-th-large">  </span>首页</a></li>
 <li role="presentation" class=""><a href="#"><span class=" glyphicon glyphicon-user">  </span>关于我</a></li>
 <li role="presentation" class=""><a href="#"><span class=" glyphicon glyphicon-camera">  </span>那些年</a></li> 
 <li role="presentation" class=""><a href="#"><span class=" glyphicon glyphicon-pencil">  </span>碎碎念</a></li>
 <li role="presentation" class=""><a href="#"><span class=" glyphicon glyphicon-book">  </span>留言板</a></li>
 <li role="presentation" class=""><a href="#"><span class=" glyphicon glyphicon-heart">  </span>情感语</a></li>   
 </ul>
</div>
</body>
</html>

效果如下：

Bootstrap学习笔记之css组件(3)

导航类需要注意以下几点：

     1：导航组件依赖于nav类。（即使用其它类时，都必须写上这个类）

     2：确保导航组件的可访问性（添加role属性）

     3：涉及到的类包括nav-tabs ,nav-pills(使导航呈现胶囊状)，nav-stacked(使水平导航变为竖直导航)，nav-justified(实现导航均等宽度排列)

     4：对于disabled类，添加在导航页中的链接时（包括标签页和导航页），只是使其表面上被禁用（颜色变灰，鼠标形状改变），实际功能依然还存在。

     5：带下拉菜单的导航使用。

我们来看下列子：可自行贴码测试，不再截图。

<!-- 导航依赖于nav类nav-tabs类依赖nav类 -->
 <ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li> ---注意加上role属性
  <li role="presentation" class=""><a href="#">Profile</a></li>
  <li role="presentation" class=""><a href="#">Messages</a></li>
  </ul>
<!--胶囊式标签页 竖直排列nav-stacked-->
 <ul class="nav nav-pills nav-stacked">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation" class=""><a href="#">Profile</a></li>
  <li role="presentation" class=""><a href="#">Messages</a></li>
  </ul> 
<!--两端对齐导航nav-justified可实现导航均列对齐--> 
  <ul class="nav nav-tabs nav-justified">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation" class=""><a href="#">Profile</a></li>
  <li role="presentation" class=""><a href="#">Messages</a></li>
  </ul> <br><br>

再来看下带下拉菜单的导航情况：

<ul class="nav nav-pills">
   <li role="presentation" class="dropdown">
   <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" 
    aria-expanded="false">
    Dropdown<span class="caret"></span>
   </a>
   <ul class="dropdown-menu">
     <li><a href="#">Action</a></li>
     <li><a href="#">Action 111</a></li>
     <li><a href="#">Action 222</a></li>
     <li><a href="#">Action 333</a></li>
   </ul>
   </li> 
  <li role="presentation" class="divider"></li> --divider表示添加分隔线，一般都是给空的li或者span进行使用
  <li role="presentation" class=""><a href="#">Profile</a></li>
  <li role="presentation" class=""><a href="#">Messages</a></li>
  
</ul>

其实对于使用下拉菜单类dropdown，基本格式都是像上面这样，或者你把链接a变为button等之类，灵活运用即可。

二、导航条组件

注意点：

     1：导航条即把组件全部横向排列放置，包裹组件，类似于横向导航的形式

     2：确保可访问性。使用<nav>标签或者<div  role="navigation">

     3：涉及到导航条的类包括：navbar-inverse（实现背景颜色为黑色和文字白色效果）,navbar-fixed-top|navbar-fixed-bottom(固定导航条在顶部和底部)

navbar-left|navbar-right(通常给最后一个元素加navbar-right),navbar-text,navbar-link(设置连接颜色),navbar-btn(对于不包含在form表单里的按钮，可

使用此类，达到垂直居中的效果)，navbar-form(达到垂直对齐效果)，navber-brand(设置品牌图标)，navbar-collapse(折叠)

     我们来看下navbar-collapse折叠的效果，代码如下：

<!-- 导航条 collapsed表示折叠-->
<nav class="navbar navbar-default">
  <div class="container-fluid">
   <div class="navbar-header"> --导航条头部
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">

    brand
    </a>
   </div>
   
   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> --折叠栏目
    <ul class="nav navbar-nav">
     <li class="active"><a href="#">Link <span class="sr-only">current</span></a></li>
     <li><a href="#">Link</a></li>
     <li class="dropdown">
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" 
      aria-haspopup="true" aria-expanded="false">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 role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">One more separated link</a></li>
     </ul>
     </li>
    </ul>
    <form class="navbar-form navbar-left" role="search">
     <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
     </div>
     <button type="submit" class="btn btn-default">Submit</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" role="button" 
      aria-haspopup="true" aria-expanded="false">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 role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
      </ul>
      </li>
    </ul>
    </div><!-- navbar-collapse 折叠-->
  </div>
</nav>


<!-- button中的三横 -->
<div class="navbar-header">
   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
   data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
   <span class="sr-only">Toggle navigation</span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   </button>
   <a class="navbar-brand" href="#">Brand</a>
</div>

实现效果如下：

Bootstrap学习笔记之css组件(3)

      即当我浏览器屏幕缩小时，原先的组件都将变为跟brand一行的  右边的折叠行（三横线）。点击该三横按钮，则组件将显示出来。

三、分页组件

注意点：

     1：使用类pagination(加pagination-lg类可使其变大)

     2：实现翻页对齐与实现翻页两端对齐（前和后分别位于两端）。

     贴码如下：

<!-- 分页 类-->
<nav>
  <ul class="pagination">
  <li>
   <a href="#" aria-label="Previous">
   <span aria-hidden="true">«</span>
   </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="#" aria-label="next"><span aria-hidden="true">»</span></a></li>
  </ul>
</nav>

如果实现分页变大直接加上<ul  class="pagination  pagination-lg">即可。

实现翻页效果如下：主要用到pager类

<!--翻页-->
<nav>
 <ul class="pager">
  <li class="active"><a href="#">previous</a></li>
  <li><a href="#">next</a></li> 
 </ul>
</nav>
<!--对齐链接分居两端加了previous类和next类-->
<nav>
 <ul class="pager">
  <li class="previous disabled"><a href="#"><span aria-hidden="true">←</span>older</a></li>
  <li class="next"><a href="#">newer<span aria-hidden="true">→</span></a></li>
 </ul>
</nav>

上面两个的效果如下：

Bootstrap学习笔记之css组件(3)

四、徽章

作用：将信息以醒目的数字呈现出来。

<!--徽章 -->
<a href="#">Inbox<span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
 Message<span class="badge">4</span>
</button>

效果如下：

    Bootstrap学习笔记之css组件(3)

添加此类badge类，也可配合导航等一起使用。

 五、缩略图组件

      配合栅格系统和类thumbnail来一起使用。贴码如下：可自行测试 

<!-- 缩略图thumbnail -->
<div class="row">
  <div class="col-xs-6 col-md-4">
   <div class="thumbnail">
     <img src="111.png">
     <div class="caption">
       <h3>Thumbnail label</h3>
       <p><a href="#" class="btn btn-primary " role="button">Button</a></p>
     </div>
   </div>
   </div>
   <!-- 第二个 -->
   <div class="col-xs-6 col-md-4">
   <div class="thumbnail">
     <img src="111.png">
     <div class="caption">
       <h3>Thumbnail label</h3>
       <p><a href="#" class="btn btn-primary " role="button">Button</a></p>
     </div>
   </div>
   </div>
   <!-- 第三个 -->
   <div class="col-xs-6 col-md-4">
   <div class="thumbnail">
     <img src="111.png">
     <div class="caption">
       <h3>Thumbnail label</h3>
       <p><a href="#" class="btn btn-primary " role="button">Button</a></p>
     </div>
   </div>
   </div>
  
  
</div>

六、可关闭的警告框

使用类：alert-dismissible和一个button 贴码如下：

<!-- 为警告框提供关闭按钮 -->
<div class="alert alert-warning alert-dismissible" role="alert">
 <button type="button" class="close" data-dismiss="alert" aria-label="close">
  <span aria-hidden="true">×</span> --添加aria-hidden属性
 </button>
 <strong>warning</strong>better check yourself,you are not looking too good.
</div>
<!-- data-dismiss="alert"为确保在所有设备上的正确行为 -->

关于情景色，可自行替换。不再描述。设置alert-link可设置与当前警告框相符的颜色。

七、进度条

 使用类:progress和实现动画的进度条

<!-- 进度条 -->
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemax="100" aria-valuemin="0" 
  style="width:60%;">
   60%
  </div>
</div>
<!-- 设置最低宽度 -->
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" 
   aria-valuemax="100" style="width:80%;">80%
  </div>
  
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" 
   style="min-width:2em;">2%
 </div>

</div>

实现动画效果的进度条，条纹的进度条使用progress-bar-striped,实现动画效果加 active即可。贴码如下：不再截图

<!-- 条纹类使用progress-bar-striped -->
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="100" 
   aria-valuemin="0" aria-valuemax="100" style="width:100%">
   <span class="sr-only">40% complete</span>100%
  </div>
</div>

也可结合情景色，改变进度条条纹的颜色。

八、列表组，输入组组件

     先来看列表组，主要用到list-group类，其次列表项目用list-group-item来写。贴码如下：  

<!-- 列表组 -->
<ul class="list-group">
  <li class="list-group-item"><span class="badge">3</span>1111</li>
  <li class="list-group-item"><span class="badge">5</span>2222</li>
  <li class="list-group-item">3333</li>
  <li class="list-group-item">4444</li>
  <li class="list-group-item">5555</li>
</ul>
<!-- 链接作为列表组 也可添加情景类-->
<div class="list-group">
  <a href="#" class="list-group-item active">2222</a>
  <a href="#" class="list-group-item disabled">33333</a>
  <a href="#" class="list-group-item-success">44444</a>
  <a href="#" class="list-group-item-info">55555</a>
</div>
<!-- 按钮作为列表组，使用div,不能用.btn类 -->
<div class="list-group">
 <button type="button" class="list-group-item list-group-item-warning">1111</button>
 <button type="button" class="list-group-item-danger">2222</button>
 <button type="button" class="list-group-item-success">3333</button>
 <button type="button" class="list-group-item-info">4444</button>
</div>
<!--列表组定制内容 -->
<div class="list-group">
  <a href="#" class="list-group-item active">
   <h4 class="list-group-item-heading">list group item</h4>
   <p class="list-group-item-text">11111</p>
  </a>
  <a href="#" class="list-group-item ">
   <h4 class="list-group-item-heading">list group item</h4>
   <p class="list-group-item-text">22222</p>
  </a>
</div>

来看看输入组，使用input-group类，将组件包裹在一起使用。贴码如下：

<!-- 输入组 -->
<div class="input-group"> --组件均包含在inout-group的里面
  <span class="input-group-btn">
   <button class="btn btn-primary" type="button">Go</button>
  </span>
  <input type="text" class="form-control" aria-label="text">
</div>

九、响应式特性的嵌入内容

     理解一下什么意思，什么叫嵌入内容？如何嵌入呢？又如何响应呢？

     嵌入：即利用<iframe>、<embed>、<video> 和 <object> 等标签引入外部文件内容。相信html5里的新增的属性大家都知道.video,radio等

     响应：根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定视频或 内容 的尺寸，能够在各种设备上缩放。

     如果希望让最终样式与其他属性相匹配，还可以明确地使用一个派生出来的 .embed-responsive-item 类。

    贴码如下：

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

我们来看看embed-responsive-16by9和embed-responsive-4by3分别代表什么意思。

我们来看一下调式控制台：

.embed-responsive-4by3 { ---4代表水平，3代表竖向，即一个缩放比例，即为4:3的比例缩放
 padding-bottom: 75%;
}
..embed-responsive-16by9 {
 padding-bottom: 56.25%;
}

   保持纵横比，width按100%算的话，则为100%  *  3/4=75%，此时通过设置它的padding-botom来设置它的纵横比。当你缩放浏览器时，始

终保持该缩放比例进行缩放。

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Bootstrap学习笔记之css组件(3)

- Author -

向婷风

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 脚本将当地时间转换成其它时区
Mar 19 Javascript
Ajax+Json 级联菜单实现代码
Oct 27 Javascript
使用js获取QueryString的方法小结
Feb 28 Javascript
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
JQuery的Validation插件中Remote验证的中文问题
Jul 26 Javascript
关于jquery的多个选择器的使用示例
Oct 18 Javascript
jquery实现pager控件示例
Apr 09 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 Javascript
angular-ui-sortable实现可拖拽排序列表
Dec 28 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
Angular 4.x 动态创建表单实例
Apr 25 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 12 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 #Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 #Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 #Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 #Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 #Javascript
深入理解JavaScript 函数
Jun 06 #Javascript
Node.js的Web模板引擎ejs的入门使用教程
Jun 06 #Javascript
keeplive_timeout(1) BufferPool(1) 缓存机制(1) zabbix(9) 连接查询(1) 数据合并(1) location(2) http_stub_status_module(1) 复合索引(1) 逻辑函数(1)
You might like
用PHP实现小型站点广告管理
2006/10/09 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
js文件缓存之版本管理详解
2013/07/05 Javascript
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
如何解决hover在ie6中的兼容性问题
2016/12/15 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
[07:47]DOTA2国际邀请赛采访专栏：探访Valve总部
2013/08/08 DOTA
使用python实现strcmp函数功能示例
2014/03/25 Python
wxPython窗口的继承机制实例分析
2014/09/28 Python
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
Django表单提交后实现获取相同name的不同value值
2020/05/14 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
牦牛毛户外探险服装：Kora
2019/02/08 全球购物
英国蛋糕装饰用品一站式商店：Craft Company
2019/03/18 全球购物
大学生毕业的自我评价分享
2014/01/02 职场文书
青春无悔演讲稿
2014/05/08 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书