bootstrap开发响应式网页的常用的一些 类的说明
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开发响应式网页的常用的一些 类的说明的更多相关文章
- 使用bootstrap建立响应式网页——头部导航栏
1.要建立响应式网站的布局,这个时候bootstrap的高级就能体现出来了. 2.先来了解一下bootstrap提供了哪些响应式工具供我们使用: (1)屏幕宽度尺寸的概念: <768px ...
- 使用bootstrap建立响应式网页——通栏轮播图(carousel)
1.bootstrap提供了js插件——轮播图 我们还是照旧,直接拿过来用,需要改的地方再说. 2.修改 小屏幕看小图,大屏图看大图:这个可以利用自定义属性(data-XXX)data-img-lg( ...
- 7 个 Bootstrap 在线编辑器用于快速开发响应式网站
Bootstrap 已经使响应式网站开发变得简单很多. 但是如果你不必手动写全部代码,事情会如何呢? 如果你可以自由地选择你想要使用的Bootstrap 组件.并可以把它们拖拽到画布中,事情会如何呢? ...
- bootstrap响应式网页设计的9条基本原则!
bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...
- 学习笔记1--响应式网页+Bootstrap起步+全局CSS样式
一.学习之前要了解一些背景知识: 在2g时代,3g时代,4g时代,早期的网页浏览设备,功能机,智能机.(本人最喜欢的透明肌,和古典黑莓机) 1.什么是响应式网页? Responsive Web Pag ...
- 使用Bootstrap 3开发响应式网站实践04,使用Panels展示内容
在Bootstrap页面中,通常用Panels来展示主要功能的内容.该部分Html为: <div class="row" id="featureHeading&qu ...
- BootStrap学习之先导篇——响应式网页
Bootstrap学习之前,要知道响应式网页的原理. 1.什么是响应式网页? 一个页面,可以根据浏览设备的不同,以及特性的不同,而自动改变布局.大小等.使得在不同的设备上上都可以呈现优秀的界面. 优点 ...
- 使用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 ...
随机推荐
- 程序员修仙之路--优雅快速的统计千万级别uv(留言送书)
菜菜,咱们网站现在有多少PV和UV了? Y总,咱们没有统计pv和uv的系统,预估大约有一千万uv吧 写一个统计uv和pv的系统吧 网上有现成的,直接接入一个不行吗? 别人的不太放心,毕竟自己写的,自己 ...
- LR编写Socket脚本方法1(XML/16进制报文data.ws格式)
本文主要讲述了Socket协议脚本的基础知识和编写方法,让大家能够在短时间内快速掌握简单的Socket协议脚本的编写方法.1.socket协议介绍Socket协议有万能协议之称,很多系统底层都是用的s ...
- Salesforce LWC学习(二) helloWorld程序在VSCode中的实现
上一篇我们简单的描述了一下Salesforce DX的配置以及CLI的简单功能使用,此篇主要简单描述一下LWC如何实现helloWorld以及LWC开发时应该注意的一些规范. 做国内项目的同学直观的感 ...
- PHP中var_dump、&&和GLOBALS的爱恨纠缠
var_dump函数:用来打印显示一个变量的内容与结构: &&:定义一个可变变量.php中,在定义变量时,需要在前面加上一个“&”符号,当加上两个“&&”符号时 ...
- Smobiler控件的使用:ListView的数据绑定及实现多选
环境 SmobilerDesigner 4.7 Visual Studio 2010以上 正文 listview绑定数据 打开Visual Studio ,新建一个SmobilerApplicatio ...
- 我竟然不再抗拒 Java 的类加载机制了
很长一段时间里,我对 Java 的类加载机制都非常的抗拒,因为我觉得太难理解了.但为了成为一名优秀的 Java 工程师,我决定硬着头皮研究一下. 01.字节码 在聊 Java 类加载机制之前,需要先了 ...
- 如何查看jsplumb.js的API文档(YUIdoc的基本使用)
目录 一.问题描述 二. 处理方法 三. YUIdoc工具介绍 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端> ...
- 关于ArrayList的扩容机制
关于ArrayList的扩容机制 ArrayList作为List接口常用的一个实现类,其底层数据接口由数组实现,可以保证O(1) 复杂度的随机查找, 在增删效率上不如LinkedList,但是在查询效 ...
- MySQL sys Schema 简单介绍-2
之前在<MySQL sys Schema 简单介绍-1>中简单的介绍了,sys Schema库中的表.那么这些表都可以查询些什么信息呢?接下来本文将做下介绍. 1. 表的情况 1.1 统计 ...
- 嵊州D2T1 “我只是来打个电话”
嵊州D2T1 “我只是来打个电话” 精神病院有一个这样的测试. 给出一个正整数集合,集合中的数各不相同,然后要求病人回答: 其中有多少个数,恰好等于集合中另外两个(不同的)数之和? 回答正确的人,即可 ...