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. ChannelPipeline----贯穿io事件处理的大动脉

    ChannelPipeline贯穿io事件处理的大动脉 上一篇,我们分析了NioEventLoop及其相关类的主干逻辑代码,我们知道netty采用线程封闭的方式来避免多线程之间的资源竞争,最大限度地减 ...

  2. Rails.cache相关知识

    可能里面的一些知识已经不被大家使用了,但是作为学习,我想和大家分享一下个人关于Rails.cache的浅显的认识,望大家指教. 1.Rails.cache是什么 它是Rails中的缓存,拥有所有缓存的 ...

  3. Solr配置文件 schema.xml

    1 添加自己的分词器(mmseg4j) 意思是textCommplex 这个类型,用的是 com.chenlb.mmseg4j.solr.MMSegTokenizerFactory 这个分词器,词库是 ...

  4. Effective Java - 静态方法与构造器

    目录 用静态工厂方法替代构造器? 静态工厂有名称 静态工厂不必重新创建一个对象 静态工厂可以返回任何子类型对象 静态工厂返回的类可以动态变化 静态工厂返回的类可以不存在 静态工厂方法的缺点 静态工厂方 ...

  5. [转]iis部署php项目

    阅读目录 1.启动iis服务器 2.打开iis 3.创建网站 4.php设置 ①添加默认文档 ②处理程序映射 1.安装urlrewrite 2.使用URL重写 今天跟着学习了如何在IIS下部署php项 ...

  6. URL的命名和反向解析

    1. 分组 url(r'^del_publisher/(\d+)', views.del_publisher), 匹配到参数,按照位置参数的方式传递给视图函数 视图函数需要定义形参接收变量 2. 命名 ...

  7. 让Redis突破内存大小的限制

    Redis虽然可以实现持久化存储,也是基于数据内存模型的基础之上,单机内存大小限制着Redis存储的数据量,有没有一种替代方案呢?本文介绍一款笔者使用的采用New BSD License 许可协议的软 ...

  8. [USACO09OCT]Invasion of the Milkweed】乳草的侵占-C++

    Farmer John一直努力让他的草地充满鲜美多汁的而又健康的牧草.可惜天不从人愿,他在植物大战人类中败下阵来.邪恶的乳草已经在他的农场的西北部份占领了一片立足之地. 草地像往常一样,被分割成一个高 ...

  9. while 循环,运算符,字符串的格式化

    1.while 关键字 (死循环) while 条件: 循环体 条件:只要条件是 Ture就可以循环. while 空格 条件 冒号 缩进 循环体 while else while 空格 条件 冒号 ...

  10. Excel催化剂开源第8波-VSTO开发之异步调用方法

    在VSTO开发过程中,因其和普通的Winform开发有点差别,具体细节笔者也说不清楚,大概是VSTO的插件是寄生在Excel中,不属于独立的进程之类的,其异步方法调用时,未能如Winform那样直接用 ...