Android studio响应式导航栏,使用bootstrap建立响应式网页——头部导航栏

1、要建立响应式网站的布局，这个时候bootstrap的高级就能体现出来了。

2、先来了解一下bootstrap提供了哪些响应式工具供我们使用：

(1)屏幕宽度尺寸的概念：

<768px                         xs  超小屏幕(手机)

768px>=   <992px        sm  小屏幕(平板)

992px>=    <1200px      md  中等屏幕(桌面)

>=1200px                      lg  大屏幕(桌面)

(2)通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容

隐藏的时候和面没有带*号，显示的时候带一个*号。这是因为，显示分为block、inline-block和inline三种情况。隐藏就是none，所以不带*号。

3、头部通栏——topbar

(1)字体图标

声明：　　@font-face{

font-family:"这个名字是你这些字体图标的代号";

src: url(../font/MiFie-Web-Font.eot) format('embedded-opentype'), url(../font/MiFie-Web-Font.svg) format('svg'), url(../font/MiFie-Web-Font.ttf) format('truetype'), url(../font/MiFie-Web-Font.woff) format('woff');

//src:url() format();  如上所示

}

使用：      [class^="icon-"],[class*=" icon-"] {//字体图标类名一般用   icon-   开头

font-family: "与声明的名字保持一致才可以使用";

}

特定的类就要用特定的字符：.icon-mobile::before {

content: "\e908";//字体图标的编码

font-size: 13px;//设置字体图标的大小

}

(2)栅格系统

这个是bootstrap提前给你写好的分列系统。咱们只需要拿过来用就好了。

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

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

bootstrap建立响应式网站——tab选项卡

1.bootstrap给我们提供了标签页 细细看了一下bootstrap的标签页源码,对tab选项卡有了更深的理解.其实说来也简单,以前自己写js和css时没有意识到整体的划分.就是分为两部分:一部分 ...

bootstrap开发响应式网页的常用的一些 类的说明

1.navbar-导航条 1.navbar-fixed-top,让导航条固定显示在页面上部(注意:固定的导航条会遮住代码,解决方案,给body设置padding-top的值[大于或等于]为我们导航条的 ...

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

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

Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单

代码:

导航