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. 高并发 Nginx+Lua OpenResty系列(2)——Nginx Lua API

    Nginx Lua API 和一般的Web Server类似,我们需要接收请求.处理并输出响应.而对于请求我们需要获取如请求参数.请求头.Body体等信息:而对于处理就是调用相应的Lua代码即可:输出 ...

  2. 求你了,再问你Java内存模型的时候别再给我讲堆栈方法区了…

    GitHub 4.1k Star 的Java工程师成神之路 ,不来了解一下吗? GitHub 4.1k Star 的Java工程师成神之路 ,真的不来了解一下吗? GitHub 4.1k Star 的 ...

  3. java小数保留位数四舍五入

    方法一:四舍五入 double f = 111231.5585; BigDecimal b = new BigDecimal(f); double f1 = b.setScale(2, Roundin ...

  4. spring 5.x 系列第4篇 —— spring AOP (代码配置方式)

    文章目录 一.说明 1.1 项目结构说明 1.2 依赖说明 二.spring aop 2.1 创建待切入接口及其实现类 2.2 创建自定义切面类 2.3 配置切面 2.4 测试切面 2.5 切面执行顺 ...

  5. CLR 垃圾回收算法

    c#相较于c,c++而言,在内存管理上为程序员提供了极大的方便,解放了程序员与内存地址打交道,提高了程序员的工作效率.比如c中分配的malloc堆空间没有释放导致的内存泄露,数组越界导致的踩内存错误, ...

  6. PATB 1032 挖掘机技术哪家强(20)

    #include <cstdio> #include <vector> using namespace std; const int N = 100001; vector &l ...

  7. 戴尔R720安装ESXI系统

    1.U盘安装系统,使用UltraISO制作启动盘 参考地址:https://jingyan.baidu.com/article/5225f26b0bb45fe6fa0908bc.html 2.插上U盘 ...

  8. HDU 4055:Number String(DP计数)

    http://acm.hdu.edu.cn/showproblem.php?pid=4055 题意:给一个仅包含‘I','D','?'的字符串,’I'表示前面的数字比后面的数字要小(Increase升 ...

  9. WebGL2系列之多采样渲染缓冲对象

    在很久很久以前,盘古开辟了天地,他的头顶着天,脚踩着地,最后他挂了.他的毛发变成了森林,他的血液变成了河流,他的肌肉变成了大地......卡! 哦,不对,在很久很久以前,你属于我,我拥有你.你还有没有 ...

  10. Spring Boot + Elasticsearch实现大批量数据集下中文的精确匹配-案例剖析

    缘由 数据存储在MYSQ库中,数据基本维持不变,但数据量又较大(几千万)放在MYSQL中查询效率上较慢,寻求一种简单有效的方式提高查询效率,MYSQL并不擅长大规模数据量下的数据查询. 技术方案 考虑 ...