bootstrap建立响应式网站——tab选项卡
1、bootstrap给我们提供了标签页
细细看了一下bootstrap的标签页源码,对tab选项卡有了更深的理解。其实说来也简单,以前自己写js和css时没有意识到整体的划分。就是分为两部分:一部分是标签页头部,一部分就是标签页展示内容区域。
2、使用bootstrap的自带样式


3、自带样式还是有点难看,需要自己修改一下
bootstrap建立响应式网站——tab选项卡的更多相关文章
- 使用bootstrap建立响应式网页——头部导航栏
1.要建立响应式网站的布局,这个时候bootstrap的高级就能体现出来了. 2.先来了解一下bootstrap提供了哪些响应式工具供我们使用: (1)屏幕宽度尺寸的概念: <768px ...
- Metronic-最优秀的基于Bootstrap的响应式网站模版
在所有我看到过的基于Bootstrap的网站模版中,Metronic是我认为最优秀的,其外观之友好.功能之全面让人惊叹.Metronic 是一个自适应的HTML模版,提供后台管理模版和前端内容网页模版 ...
- 使用bootstrap建立响应式网页——通栏轮播图(carousel)
1.bootstrap提供了js插件——轮播图 我们还是照旧,直接拿过来用,需要改的地方再说. 2.修改 小屏幕看小图,大屏图看大图:这个可以利用自定义属性(data-XXX)data-img-lg( ...
- 使用Bootstrap 3开发响应式网站实践05,使用Tab、Modal、Form展示内容,使用Popover、Tooltip展示提示信息
本篇体验用Tab插件显示内容.Html部分为: <div class="row" id="moreInfo"> <div class=&quo ...
- 使用Bootstrap 3开发响应式网站实践07,页脚
页脚部分比较简单,把一个12列的Grid切分. <footer> <div class="container"> <div class="r ...
- 使用Bootstrap 3开发响应式网站实践06,使用ListGroup、Thumbnails展示内容
□ ListGroup展示内容 当希望把同类型的内容以列表.区块展示的时候,ListGroup是不错的选择. <div class="col-sm-6"> <h3 ...
- 使用Bootstrap 3开发响应式网站实践04,使用Panels展示内容
在Bootstrap页面中,通常用Panels来展示主要功能的内容.该部分Html为: <div class="row" id="featureHeading&qu ...
- 使用Bootstrap 3开发响应式网站实践03,轮播下方的内容排版
通常把一些重要信息.需要重点标注的信息放在轮播的下方显示,这部分区域用到了大字体的标题.副标题以及段落文字等. <div class="row" id="bigCa ...
- 使用Bootstrap 3开发响应式网站实践02,轮播
本篇体验图片轮播.html部分为: <div class="carousel slide" id="myCarousel" > <!--Ind ...
随机推荐
- JSP注释及scriptlet <%局部%><%!全局%><%=输出%>
显示注释: <!--注释内容-->> 隐式注释: 1. // 2./* */ 3. <%-- 注释内容--%> <!-- 这个注释客户端就可以看见 --> & ...
- replication factor
http://www.tuicool.com/articles/RJbIBj 关于Hadoop中replication factor解惑 时间 2014-06-09 08:00:50 ITeye ...
- Puppent 基本使用方法
简单的文件配置 master端 vim /etc/puppet/manifests/site.pp ###########################内容如下 node default{ file ...
- byte数组转16进制 输出到文件
try { File file = new File(Environment.getExternalStorageDirectory(),"shuju2"); if(!file.e ...
- Windows 常用消息及含义
消息范围 说明 0 - WM_USER – 1 系统消息 WM_USER - 0x7FFF 自定义窗口类整数消息 WM_APP - 0xBFFF 应用程序自定义消息 0xC000 - 0xFFFF ...
- 【PHP伪静态】时获取不规则的URL参数
$url = explode('/', '/article/category-5/status-2/page-3'); $params = array(); foreach ($url as $v) ...
- 根据key存不存在查询json
select * from table where value->'key' != 'null';
- iOS拨打电话(三种方法)
iOS拨打电话(三种方法) 查了很多地方的关于iOS程序拨打电话,大都不全,今天我总结了三种方法,各有不同,拿来给大家分享,希望给大家有所帮助 1,这种方法,拨打完电话回不到原来的应用,会停留在通讯 ...
- HDU 5741 Helter Skelter
离线处理+扫描线.题意很容易转化:若干个矩形形成并集,询问一些点是否在并集中? 官方题解不是这样做的....那种做法效率更高,暂时还不会.我这样是4500ms G++过的,C++TLE...... 区 ...
- JavaBean,List,Map转成json格式
public class User { private String username; private String password; public String getUsername() { ...