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. AcWing 164. 可达性统计

    给定一张N个点M条边的有向无环图,分别统计从每个点出发能够到达的点的数量. 输入格式 第一行两个整数N,M,接下来M行每行两个整数x,y,表示从x到y的一条有向边. 输出格式 输出共N行,表示每个点能 ...

  2. 本地线程-ThreadLocal

    线程本地存储是一个自动化机制,可以为使用相同变量的每个不同的线程都创建不同的存储.简单来说,就是对于某个变量,针对不同的线程存储不同的值. 实例: import java.util.Random; i ...

  3. CLR 垃圾回收算法

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

  4. Python连载20-偏函数&zip函数&enumerate函数

    一. 偏函数 二. #先举个例子 #把字符串转换为十进制数字 int(') #help(int),int函数中有一个参数base代表把它转换某个进制的数字 #把八进制的字符串转换为十进制 eight ...

  5. 从0x00到0xFF的含义

    对于二进制来说,8位二进制我们称之为一个字节,二进制的表达范围值是从0b00000000-0b11111111,而我们程序中用十六进制表示的时候就是从0x00到0xFF,这里教大家一个二进制转换十进制 ...

  6. Azkaban 3.73.1 集群搭建(Multiple Executor)

    一.简介 Azkaban是LinkedIn开源的任务调度框架,采用java编写 Azkaban功能和特点: 任务的依赖处理 任务监控,失败告警 任务流的可视化 任务权限管理 Azkaban具有轻量可插 ...

  7. Docker-Compose搭建单体SkyWalking

    SkyWalking简介 SkyWalking是一款高效的分布式链路追踪框架,对于处理分布式的调用链路的问题定位上有很大帮助 有以下特点: 性能好 针对单实例5000tps的应用,在全量采集的情况下, ...

  8. 02(e)多元无约束优化问题- 梯度的两种求解方法以及有约束转化为无约束问题

    2.1 求解梯度的两种方法 以$f(x,y)={{x}^{2}}+{{y}^{3}}$为例,很容易得到: $\nabla f=\left[ \begin{aligned}& \frac{\pa ...

  9. spark 源码分析之十六 -- Spark内存存储剖析

    上篇spark 源码分析之十五 -- Spark内存管理剖析 讲解了Spark的内存管理机制,主要是MemoryManager的内容.跟Spark的内存管理机制最密切相关的就是内存存储,本篇文章主要介 ...

  10. 【Netty】Netty简介及服务器客户端简单开发流程

    什么是Netty Netty是一个基于Java NIO的编写客服端服务器的框架,是一个异步事件框架. 官网https://netty.io/ 为什么选择Netty 由于JAVA NIO编写服务器的过程 ...