-
反色导航条 navbar-inverse查看全部
-
响应式导航条、保证在窄屏时需要折叠的内容必须包裹在带一个div内，并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。<div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->（下面是固定写法） <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button> <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 --> <a href="##" class="navbar-brand">慕课网</a> </div> <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 --> <div class="collapse navbar-collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="##">网站首页</a></li> <li><a href="##">系列教程</a></li> </ul> </div> </div>查看全部
-
固定导航条只需要在最外层容器上添加navbar-fixed-top或者navbar-fixed-bottom 解决bug从运行效果中大家不难发现，页面主内容顶部和底部都被固定导航条给遮住了。为了避免固定导航条遮盖内容，我们需要在body上做一些处理： body { padding-top: 70px;/*有顶部固定导航条时设置*/ padding-bottom: 70px;/*有底部固定导航条时设置*/ } 第二种解决这个bug方法： 其实除了这种解决方案之外，我们还有其他的解决方法，把固定导航条都放在页面内容前面： <div class="navbar navbar-default navbar-fixed-top" role="navigation"> … </div> <div class="navbar navbar-default navbar-fixed-bottom" role="navigation"> … </div> <div class="content">我是内容</div> 在文件中添加下列样式代码： .navbar-fixed-top ~ .content { padding-top: 70px; } .navbar-fixed-bottom ~ .content { padding-bottom: 70px; }查看全部
-
navbar-brand navbar-nav 下面可以配合navbar-btn,navbar-text（可以将文本左对齐））,navbar-link来使用查看全部
-
带搜索框的导航条在 navbar容器里面放置navbar-form,,navbar-left是左对齐，navbar-right是右对齐 表单： <div class="form-group"> <input type="text" class="form-control" placeholder="请输入关键词" /> </div>查看全部
-
一级导航条用navbar navbar-deffault 标题用nav-header 里面的文字用nav-brand 二级导航条用 nav navbar-nav 下拉菜单：dropdown <li class="dropdown"> <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="##">CSS3</a></li> <li><a href="##">JavaScript</a></li> <li class="disabled"><a href="##">PHP</a></li> </ul> </li>查看全部
-
导航条navbar 有背景色 和导航用法一样查看全部
-
,,.,,,,,,查看全部
-
002222查看全部
-
2-8文本对齐风格 .text-left：左对齐 .text-center：居中对齐 .text-right：右对齐 .text-justify：两端对齐查看全部
-
在Bootstrap中他也考虑了这种排版效果，使用了<small>标签来制作副标题。这个副标题具有其自己的一些独特样式： 1、行高都是1，而且font-weight设置了normal变成了常规效果（不加粗），同时颜色被设置为灰色（#999）。 2、由于<small>内的文本字体在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%； 详细代码请参阅bootstrap.css文件中第407行~第443行。 <h1>Bootstrap标题一<small>我是副标题</small></h1>查看全部
-
Bootstrap标题样式进行了以下显著的优化重置： 1、重新设置了margin-top和margin-bottom的值， h1~h3重置后的值都是20px；h4~h6重置后的值都是10px。 2、所有标题的行高都是1.1（也就是font-size的1.1倍）,而且文本颜色和字体都继承父元素的颜色和字体。 3、固定不同级别标题字体大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。查看全部
-
Bootstrap全局样式： 不追求归零，更注重重置可能产生问题的样式，body,form,margin等，保留和坚持部分浏览器的基础样式， 1、移除body的margin声明 2、设置body的背景色白色 3、设置基本字体，字号，行高 4、设置全局链接颜色，当链接处于hover状态才显示下划线查看全部
-
bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">/script> 同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码： <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js">/script>查看全部
-
初始化移动浏览显示查看全部
举报
0/150
提交
取消