1.navbar-导航条

  1.navbar-fixed-top,让导航条固定显示在页面上部(注意:固定的导航条会遮住代码,解决方案,给body设置padding-top的值【大于或等于】为我们导航条的实际高度,如我们nav的height为50px,我们设置body {padding-top:50px;},这样就可以避免导航条遮住我们的内容部分)

  2.包含一个.container 或 container-fluid容器,导航条居中或者自适应显示

  3.导航条默认.navbar-default是白底显示,如果想要显示黑底背景,给nav添加.navbar-inverse

2.dropdown-(下拉菜单)

3.carousel-滚动图片广告(轮播图)组件

4.Grid System-(栅格系统)图文列表--多栏布局简介

5.tabs-标签页

  注:标签页是一个经常使用的内容,在网页上可以放置较多的内容,又可以 节省空间

6.modal-(模态框)-弹出框

  注:模态框是一个经常使用的组件,一般用于弹出信息、确认信息和表单等内容。

7.打开标签页

  $("#tablist a[href='点击的菜单项']").tab("show");

以上7种就是我们在构建网页中用的比较多的几种类型组件,多看文档多写文档,才能提高更快。

bootstrap开发响应式网页的常用的一些 类的说明的更多相关文章

  1. 使用bootstrap建立响应式网页——头部导航栏

    1.要建立响应式网站的布局,这个时候bootstrap的高级就能体现出来了. 2.先来了解一下bootstrap提供了哪些响应式工具供我们使用: (1)屏幕宽度尺寸的概念: <768px     ...

  2. 使用bootstrap建立响应式网页——通栏轮播图(carousel)

    1.bootstrap提供了js插件——轮播图 我们还是照旧,直接拿过来用,需要改的地方再说. 2.修改 小屏幕看小图,大屏图看大图:这个可以利用自定义属性(data-XXX)data-img-lg( ...

  3. 7 个 Bootstrap 在线编辑器用于快速开发响应式网站

    Bootstrap 已经使响应式网站开发变得简单很多. 但是如果你不必手动写全部代码,事情会如何呢? 如果你可以自由地选择你想要使用的Bootstrap 组件.并可以把它们拖拽到画布中,事情会如何呢? ...

  4. bootstrap响应式网页设计的9条基本原则!

    bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...

  5. 学习笔记1--响应式网页+Bootstrap起步+全局CSS样式

    一.学习之前要了解一些背景知识: 在2g时代,3g时代,4g时代,早期的网页浏览设备,功能机,智能机.(本人最喜欢的透明肌,和古典黑莓机) 1.什么是响应式网页? Responsive Web Pag ...

  6. 使用Bootstrap 3开发响应式网站实践04,使用Panels展示内容

    在Bootstrap页面中,通常用Panels来展示主要功能的内容.该部分Html为: <div class="row" id="featureHeading&qu ...

  7. BootStrap学习之先导篇——响应式网页

    Bootstrap学习之前,要知道响应式网页的原理. 1.什么是响应式网页? 一个页面,可以根据浏览设备的不同,以及特性的不同,而自动改变布局.大小等.使得在不同的设备上上都可以呈现优秀的界面. 优点 ...

  8. 使用Bootstrap 3开发响应式网站实践07,页脚

    页脚部分比较简单,把一个12列的Grid切分. <footer> <div class="container"> <div class="r ...

  9. 使用Bootstrap 3开发响应式网站实践06,使用ListGroup、Thumbnails展示内容

    □ ListGroup展示内容 当希望把同类型的内容以列表.区块展示的时候,ListGroup是不错的选择. <div class="col-sm-6"> <h3 ...

随机推荐

  1. Spark学习之路(七)—— 基于ZooKeeper搭建Spark高可用集群

    一.集群规划 这里搭建一个3节点的Spark集群,其中三台主机上均部署Worker服务.同时为了保证高可用,除了在hadoop001上部署主Master服务外,还在hadoop002和hadoop00 ...

  2. MySQL优化(一)

    MySQL数据库优化一之引索详解 对于网站优化最注重的就是数据库的优化,而在数据库优化中首先考虑到的应该是数据库索引是否建立于是否建立的正确. 1.对于刚刚接触数据库的程序员,对于引索不是很理解.下面 ...

  3. maven的私服私包镜像地址配置settings.xml

    新建一个setting节点——镜像标签  <mirror> 添加你的mirror_id,name,url是该镜像的信息,一般都没有什么问题. mirrorOf是被镜像的服务器的id,可以是 ...

  4. Fiddler如何过滤无用的链接

    场景:现在是移动端的天下,测试过程中,抓包工具肯定必不可少,如何使用这里就不赘述,这里给大家讲述下如何过滤那些没有的链接,js ,png等无用的信息 工具:fiddler-use Filters功能: ...

  5. Python中的函数及函数参数的使用

    函数:一个工具,随调随用 降级代码冗余 增加代码的复用性,提高开发效率,为了不成为cv战士 提高程序扩展性 函数有两个阶段:定义阶段,调用阶段. 定义时:只检查函数体内代码语法,不执行函数体内代码. ...

  6. Python编程菜鸟成长记--A1--01--编程语言介绍

    目录 1.重点知识 2.什么是编程?为什么要编程? 3.有哪些编程语言? 3.1.机器语言 3.2.汇编语言 3.3.高级语言 3.3.1.编译型语言 3.3.2.解释型语言 3.4.小结 4.主流编 ...

  7. JDK源码阅读(三):ArraryList源码解析

    今天来看一下ArrayList的源码 目录 介绍 继承结构 属性 构造方法 add方法 remove方法 修改方法 获取元素 size()方法 isEmpty方法 clear方法 循环数组 1.介绍 ...

  8. 站在巨人的肩膀上看Servlet——原来如此(更适合初学者认识Servlet)

    前言: 有段时间没更新博客了,这段时间因为要准备考试,考完试后又忙了一阵别的事,一直没能静下心来写博客.大学考试真是越来越恶心了,各种心酸,那酸爽,够味.不过还好,马上就要大三了,听大三学长学姐说大三 ...

  9. Minimum Spanning Tree

    前言 说到最小生成树(Minimum Spanning Tree),首先要对以下的图论概念有所了解. 图 图(Graph)是表示物件与物件之间的关系的数学对象,是图论的基本研究对象.图的定义方式有两种 ...

  10. 嵊州D2T1 “我只是来打个电话”

    嵊州D2T1 “我只是来打个电话” 精神病院有一个这样的测试. 给出一个正整数集合,集合中的数各不相同,然后要求病人回答: 其中有多少个数,恰好等于集合中另外两个(不同的)数之和? 回答正确的人,即可 ...