-
打开相应的标签页代码： 1,$('#myTab a[href="#profile"]').tab("show") 2$('#myTab a:first').tab("show") 3,$('#myTab a:last').tab('show') 4,$('#myTab li:eq(1) a').tab('show')查看全部
-
菜单定位的理解： （1）首先在导航栏中的导航标签要通过锚点关联到某个具体的tab对应的id,然后通过调用tab的方法进行定位打开； 例如： （a）设置tab内容页的id="tab-hanshi"； <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="tab-hanshi"> ....... </div> </div> （b）设置tab页标题连接的锚点指定到对应的tab上。<a href="#tab-hanshi"....这也是tab默认打开内容页的设置； <ul class="nav nav-tabs" role="tablist" id="tab-list"> <li role="presentation" class="active"> <a href="#tab_hanshi" aria-controls="tab-hanshi" role="tab" data-toggle="tab">风格1</a> </li> </ul> （c）导航菜单设置锚点和tab页的标题连接保持一致，统一指向tab页的id <ul class="dropdown-menu"> <li><a href="#tab_hanshi">风格1</a></li> </ul> （d）编写js脚本内容，调用tab("show")方法； $("#bs-example-navbar-collapse-1 .dropdown-menu a").click(function(){ var $href = $(this).attr("href"); $("#tab-list a[href='"+$href+"']").tab("show"); });查看全部
-
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，无论弹出框在哪里显示，一般将弹出框的代码放在body元素中，然后对按钮进行设置data-toggle="model" data-target="#id" 弹出框代码包含在body中，防止弹出框被其他的元素的遮挡或者其他元素的影响而弹不出； 弹出框代码可操作部分为标题，内容，按钮，为按钮添加data-dismiss=“modal”则可使该按钮被点击时关闭弹出框。 要想点击某一按钮使弹出框弹出，只需为该按钮添加data-toggle="modal" data-target=“#为弹出框设置的id名” 弹出框： <div class="modal" id="about"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button> <h4>关于</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">了解了</button> </div> </div> </div> </div> 导航中关于的相关设置： <li><a href="#" data-toggle="modal" data-target="#about">关于</a></li>查看全部
-
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，无论弹出框在哪里显示，一般将弹出框的代码放在body元素中，然后对按钮进行设置data-toggle="model" data-target="#id" <div class="modal" id="about"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button> <h4>关于</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">了解了</button> </div> </div> </div> </div> 导航中关于的相关设置： <li><a href="#" data-toggle="modal" data-target="#about">关于</a></li>查看全部
-
三栏简介：栅格系统的应用 <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来与上下产生间距。查看全部
-
标签页：可以放置很多的内容，又可以节省页面空间。其基本结构：标签页放在栅格的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）的宽度。 使用什么样的类前缀，此例子应该使用 .col-md-* 给p添加样式，加边框和padding查看全部
-
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%;} 还可另外设置间距，文字大小等。查看全部
-
1，导航条是在应用或网站中作为导航页头的响应式基础组件。它在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。响应式导航条在移动设备上默认折叠。 2，通过添加 .navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。两个类都会通过 CSS 设置特定方向的浮动样式。 3，添加 .navbar-fixed-bottom 类可以让导航条固定在底部 4，添加 .navbar-static-top 类可创建一个与页面等宽度的导航条，随页面向下滚动而消失 5，通过添加 .navbar-inverse 类可以改变导航条的外观。 6，Bootstrap中<li class="divider"></li>可以在下拉菜单中添加分割线。 7，在 Bootstrap中，任何下拉菜单中均可通过添加标题来标明一组动作，添加方式为：<li class="dropdown-header">标题名称</li>。查看全部
-
1：明确需求 2：收集素材 3：动手实现 4：测试调优 5：发布使用 6：后期扩展 下载bootstrap框架，js之后还需要新增下载几个文件： 1、html5shiv.js 解决ie对html5的支持 2、jquery-1.11.1.min.js 3、respond.min.js 解决ie8对css3媒体查询的支持 4、jquery-1.11.1.min.map 将HTML文档保存在bootstrap-dist中，与框架内容在同一文件夹中方便引用。 可直接拷贝bootstrap官网中的标准基本代码，将语言改为中文zh-CN，修改引用bootstrap的路径，因为已经下载到本地了，与本地路径保持一致查看全部
-
库引用地址: bootstrap框架: //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css jquery库: http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js bootstrap.min.js：http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js查看全部
-
<meta name="viewport" content="width=device-width, initial-scale=1"> 1.width指令使用device-width标记可以指示视区宽度应为设备的屏幕宽度。 2.ViewPort <meta>标记用于指定用户是否可以缩放Web页面。 3.initial-scale指令用于设置Web页面的初始缩放比例。 4."指定用户是否可以缩放视区，即缩放Web页面的视图。"是user-scalable指令 ,值为yes时允许用户进行缩放，值为no时不允许缩放。查看全部
-
html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。查看全部
-
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。查看全部
-
基于Bootstrap实现下图所示效果的页面，一个标签页，查看全部
举报
0/150
提交
取消