-
。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的查看全部
-
点击下拉菜单内容可对应打开下方标签页对应内容:bootstrap提供了如何打开标签页的API方法 下拉菜单内的id名要与标签页的#id名对应; tabshow方法 http://img1.sycdn.imooc.com//554e17180001b72a12000530-120-68.jpg查看全部
-
1.底部版权:包含在栅格container中 <footer> <p class="pull-right"><a href="#top"></a></p>(href=“#top”是与顶部对应回到顶部,class=“pull-right”是让一段文字或者词到右边,这是bootstrapclass库中的一个功能) </footer>排版时要留天留地(即到页面顶部与底部均有一些距离)body{padding-top: ;padding-bottom:;} 2.弹出框:由bootstrap提供的(模态框)Modal,弹出框是浮动于页面之上的,一般来说当弹出框出现时,页面其他部分是不可操作的 弹出框头部标题,中间内容,底部按钮; http://img1.sycdn.imooc.com//554e10910001a8ea12000530-120-68.jpg 弹出框代码包含在body中,防止弹出框被其他的元素的遮挡或者其他元素的影响而弹不出; 弹出框代码可操作部分为标题,内容,按钮,为按钮添加data-dismiss=“modal”则可使该按钮被点击时关闭弹出框 要想点击某一按钮使弹出框弹出,只需为该按钮添加data-toggle="modal" data-target=“#为弹出框设置的id名”查看全部
-
标签页:可以放置很多的内容,又可以节省页面空间。其基本结构:标签页放在栅格的container内用横线将标签页与栅格分开 标签<ul class="nav nav-tabs" role="tablist"> <li><a hre="#下方的id" role="tab" data-toggle="tab"></a></li> ... </ul> 那么点击标签打开相应内容设置如下: 标签内容 <div class="tab-content"> <div class="tab-pane" id="">...</div>(此处的id与上面标签的a href=“”对应) ... </div> 标签内容的排版也可以用栅格,使其错落有致,可自己为标题,文字设置颜色,字体大小; .container .row是指container类下的row类 http://img1.sycdn.imooc.com//554d7c660001a78412000530-120-68.jpg查看全部
-
•使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。 <div class="col-md-数字 col-md-offset-要偏移多少的数字"> 一个row表示放在一行的栅格。 使用栅格可以很方便的排版布局。查看全部
-
我这写的什么鬼,贴出来让大家笑话笑话,当反面教材,原谅我没认真看题看课查看全部
-
三栏简介:栅格系统的应用 <div class="container/container-fluid">contain为固定宽度,container-fluid为100%宽度; <div class="row"> <div class="col-md-4"></div>(要让col-md-的数值加起来总共为12,这样就可以一行放置了)col-md-数字为栅格类,可以创建一个基本的栅格系统,在手机和平板设备上一开始是堆叠在一起的,在桌面(>970px)屏幕设备上变为水平排列。 <div class="col-md-4"></div> <div class="col-md-4"></div> </div> </div> 栅格的居中可为container的div设置id为text-align:center; 栅格与carousel的距离可在.carousel中设置margin-bottom实现。 加横线:可将<hr/>放在container中,并为其设置margin来与上下产生间距。查看全部
-
bootstrap上找模板,修改,查看全部
-
滚动图片广告:滚动广告Carousel的 1.Carousel是一个用于轮播内容的组件(bootstrap对于组件的实现是用data属性来实现的) Carousel基本结构如下图:<ol></ol>对应轮播图下面的小点点;ol下面的div对应轮播组件内容,而组件内容中的div可通过p、h来,设置图片文字,<a class="btn 其他按钮类名">来设置有超链接的按钮,如:下载;div下面的两个<a>对应轮播的用于鼠标切换的左右按钮 ol中的data-slid-to=“0”表示index(即缩影)为从0开始,这里<li>的个数及li中data-slid-to=“”的编号与下面轮播内容的个数相对应 http://img1.sycdn.imooc.com//554cb5c00001a08012000530-120-68.jpg 限制轮播内容的height:只需在style下设置.carousel{height: ; blackground-color:#000;(没有图片的部分显示为黑色) } .carousel .item{height: ; background-color:#000;} .carousel img{ width:100%;} 还可另外设置间距,文字大小等。查看全部
-
如下:查看全部
-
在任何下拉菜单中均可通过添加标题来标明一组动作,添加方式为:<li class="dropdown-header">标题名称</li>。查看全部
-
应该是通过添加 .navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。两个类都会通过 CSS 设置特定方向的浮动样式。查看全部
-
导航条是在应用或网站中作为导航页头的响应式基础组件。它在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式。响应式导航条在移动设备上默认折叠。查看全部
-
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">(可以实现当导航栏折叠为下拉图标时,点击图标会出现ul中包含的代码内容,当屏幕宽度足够时缩略代码及这里代码不起作用) <ul class="nav navbar-nav">(当未缩略时为导航项目,各个按钮) <li class="active"><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> </div> 导航条依赖JavaScript,响应式导航条依赖折叠(collapse)插件 下拉菜单实现将<li class="">clsaa设置为dropdown即可,下拉按钮通过<a>的那行代码,分割线的实现是<li class=“divider”>实现的 http://img1.sycdn.imooc.com//554ca3c90001a52f12000530-120-68.jpg查看全部
-
导航条在移动端是折叠的,其的基本结构: 用<nav class=“” role=“”>标签声明,class=“navbar navbar-default”,navbar代表这是一个导航条,会应用导航条的样式,navbar-default代表这是一个默认的导航条样式(为白色),role=“navigation”代表这是一个导航条;为nav添加navbar-fixed-top可以使导航条固定在顶部,固定的导航条会遮住页面上其他内容,除非给body元素设置padding,导航条的默认宽度是50px,可设置:body{padding-top:70px;},添加navbar-inverse可使导航条变为黑色 内容包裹在<div class="container-fluid">中,class=“container”也可以,它代表居中的固定大小的导航条,而fluid代表导航条自适应浏览器大小的 <div class="navbar-header">代表导航条头部其中包含一段代码使在屏幕宽度小于一定值时导航条的按钮会折叠为一个下拉图标,代码: <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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>查看全部
举报
0/150
提交
取消