本篇文章主要介绍了"bootstrap学习总结-css组件三"，主要涉及到Bootstrap方面的内容，对于HTMLjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下：
今天我们来看看css组件效果以及其中比较重要的类，这些类都不难，关键要熟练掌握，搭配使用，灵活运用。关于前两篇中，css样式和布局的文章，大家可以在首页进...
今天我们来看看css组件效果以及其中比较重要的类，这些类都不难，关键要熟练掌握，搭配使用，灵活运用。关于前两篇中，css样式和布局的文章，大家可以在首页进行阅读。http://www.cnblogs.com/jtjds/
一：导航组件
自己做了个导航，目前只有一级菜单，下一篇文章中，将给出二级菜单，涉及到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"><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><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>效果如下：
