那就目录结构

页面环境代码：

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <!--默认编码-->

     <meta charset="utf-8">

     <!--如果是ie，那么就会调用ie最新的标准进行页面的解析和渲染-->

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <!--移动端的viewport设置-->

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

     <title>标题</title>

     <!-- Bootstrap 他的核心文件，如果想使用框架里面的组件必须引入这个文件-->

     <link href="./lib/bootstrap/css/bootstrap.css" rel="stylesheet">

     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries

     :IE8以及一下不支持html5及媒体查询，引入下面的html5shiv.min.js文件可以让其兼容同时由于它不支持响应式，所以引入下面的respond.min.js让其能支持响应式-->

     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

     <!--[if lt IE 9]>

     <script src="./lib/html5shiv/html5shiv.min.js"></script>

     <script src="./lib/respond/respond.js"></script>

     <![endif]-->

 </head>

 <body>

 <h1>你好，世界！</h1>

 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

 <!--引入jq文件-->

 <script src="./lib/jquery/jquery.min.js"></script>

 <!-- Include all compiled plugins (below), or include individual files as needed -->

 <!--bootstrap核心的js文件，一定要引入-->

 <script src="./lib/bootstrap/js/bootstrap.min.js"></script>

 </body>

 </html>

测试：

添加一个响应式的导航条

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <!--默认编码-->

     <meta charset="utf-8">

     <!--如果是ie，那么就会调用ie最新的标准进行页面的解析和渲染-->

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <!--移动端的viewport设置-->

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

     <title>标题</title>

     <!-- Bootstrap 他的核心文件，如果想使用框架里面的组件必须引入这个文件-->

     <link href="./lib/bootstrap/css/bootstrap.css" rel="stylesheet">

     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries

     :IE8以及一下不支持html5及媒体查询，引入下面的html5shiv.min.js文件可以让其兼容同时由于它不支持响应式，所以引入下面的respond.min.js让其能支持响应式-->

     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

     <!--[if lt IE 9]>

     <script src="./lib/html5shiv/html5shiv.min.js"></script>

     <script src="./lib/respond/respond.js"></script>

     <![endif]-->

 </head>

 <body>

 <nav class="navbar navbar-default">

     <div class="container-fluid">

         <!-- Brand and toggle get grouped for better mobile display -->

         <div class="navbar-header">

             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

                 <span class="sr-only">Toggle navigation</span>

                 <span class="icon-bar"></span>

                 <span class="icon-bar"></span>

                 <span class="icon-bar"></span>

             </button>

             <a class="navbar-brand" href="#">Brand</a>

         </div>

         <!-- Collect the nav links, forms, and other content for toggling -->

         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

             <ul class="nav navbar-nav">

                 <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>

                 <li><a href="#">Link</a></li>

                 <li class="dropdown">

                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

                     <ul class="dropdown-menu">

                         <li><a href="#">Action</a></li>

                         <li><a href="#">Another action</a></li>

                         <li><a href="#">Something else here</a></li>

                         <li role="separator" class="divider"></li>

                         <li><a href="#">Separated link</a></li>

                         <li role="separator" class="divider"></li>

                         <li><a href="#">One more separated link</a></li>

                     </ul>

                 </li>

             </ul>

             <form class="navbar-form navbar-left">

                 <div class="form-group">

                     <input type="text" class="form-control" placeholder="Search">

                 </div>

                 <button type="submit" class="btn btn-default">Submit</button>

             </form>

             <ul class="nav navbar-nav navbar-right">

                 <li><a href="#">Link</a></li>

                 <li class="dropdown">

                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

                     <ul class="dropdown-menu">

                         <li><a href="#">Action</a></li>

                         <li><a href="#">Another action</a></li>

                         <li><a href="#">Something else here</a></li>

                         <li role="separator" class="divider"></li>

                         <li><a href="#">Separated link</a></li>

                     </ul>

                 </li>

             </ul>

         </div><!-- /.navbar-collapse -->

     </div><!-- /.container-fluid -->

 </nav>

 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

 <!--引入jq文件-->

 <script src="./lib/jquery/jquery.min.js"></script>

 <!-- Include all compiled plugins (below), or include individual files as needed -->

 <!--bootstrap核心的js文件，一定要引入-->

 <script src="./lib/bootstrap/js/bootstrap.min.js"></script>

 </body>

 </html>

那就ok拉

bootstrap--响应式框架页面环境配置的更多相关文章

  1. bootstrap响应式前端页面

    技术:HTML+CSS+JS+bootstrap   概述 这套代码响应式前端页面基本写完了,适合初学前端的同学,里面主要运用了HTML+CSS布局和动画,js逻辑较少,页面都是静态,未接入接口.响应 ...

  2. jq+bootstrap响应式系统管理页面

    用bootstrap搭建的一个系统管理页面基于经典的HTML+Css 弊端:代码量太大,用vue组件化开发的思想更加便捷且方便!不过如果是做纯展示的系统页面,只需要一些简单的数据交互,用jq配合boo ...

  3. .NET Core的响应式框架,基于Ace Admin框架菜单导航,Bootstrap布局,fontAwesome图标,内嵌Iframe用EasyUI做数据绑定,动态配置列表,动态配置表单

    netnrf 响应式框架 用于快速开发的响应式框架 演示:https://rf2.netnr.com v3.x 前端采用 jQuery + Bootstrap + EasyUI + AceAdmin ...

  4. 使用bootstrap做一个响应式的页面

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 一个响应式框架——agera

    Google在上周开源了一个响应式框架——agera,相信它会慢慢地被广大程序员所熟知.我个人对这样的技术是很感兴趣的,在这之前也研究过RxJava,所以在得知Google开源了这样的框架之后第一时间 ...

  6. 15个最好的HTML5前端响应式框架(2014)

    文中的多个框架基于SASS创建,SCSS是一种比LESS更简洁的样式表编程语言,它能够编绎成CSS,可复用CSS代码,声明变量,甚至是函数,类Ruby/Python的语法.參见: LESS vs SA ...

  7. 美团客户端响应式框架EasyReact开源啦

    前言 EasyReact 是一款基于响应式编程范式的客户端开发框架,开发者可以使用此框架轻松地解决客户端的异步问题. 目前 EasyReact 已在美团和大众点评客户端的部分业务中进行了实践,并且持续 ...

  8. 关于禁用bootstrap响应式解决方法

    前几天接到一个任务,用bootstrap框架写几个静态页面,由于长时间专注于后台开发,所以,花费了3天时间,才终于写完了页面,其中,来回的修改,把遇到的问题说一下. 用bootstarp做完页面后,组 ...

  9. 模拟Bootstrap响应式网格系统

    Bootstrap响应式(适应于不同的终端设备).Bootstrap栅格系统是利用百分比把视口等分为12个,然后利用媒体查询,设置float属性使之并列显示 一.媒体查询 媒体查询包含一个可选的媒体类 ...

随机推荐

  1. 移植 Busybox

    下载 busybox 从 http://www.busybox.net/downloads/busybox­1.1.3.tar.gz/下载 busybox­1.1.3 到/tmp 目录当中,并解压. ...

  2. vue 简单留言本

    代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  3. Android开发 获取视频中的信息(例如预览图或视频时长) MediaMetadataRetriever媒体元数据检索器

    前言 在Android里获取视频的信息主要依靠MediaMetadataRetriever实现 获取最佳视频预览图 所谓的最佳就是MediaMetadataRetriever自己计算的 /** * 获 ...

  4. Mac OS下使用ll等命令

    1. 进入用户bash_profile文件 vi ~/.bash_profile 2. 添加如下命令 alias ll='ls -l' alias la='ls -A' alias l='ls -CF ...

  5. 简单DP (Preparing for Xtreme 12.0) | STL map使用

    当水题遇上了map大坑 晚上写一个dp,弄了半天样例一直不过,对着队友的代码一行行看,发现跟自己逻辑完全一样啊... 然后就逐行输出比对,发现预处理出了问题,把map插入新值的地方改了下,果然就好了. ...

  6. PAT甲级——A1066 Root of AVL Tree

    An AVL tree is a self-balancing binary search tree. In an AVL tree, the heights of the two child sub ...

  7. vue中使用watch函数，当数据改变时自动引发事件

    本来我的需求是这样的,使用ElementUI的日期选择器,当日期选择器被更改时需要根据新日期来向服务器获取新数据,但是发现这个日期选择器没有change事件,后来终于发现vue有个watch函数就是用 ...

  8. 【牛客挑战赛31D】 雷的打字机

    题目 首先看到这个出现长度至少为\(2\)的回文子串 这就等价于不能出现两个连续且相同的字符 于是我们用概率生成函数来搞 设\(g_i\)表示\(i\)次操作后游戏没有结束的概率,\(f_{i,j}\ ...

  9. 第12章 SQL联接

    第12章 SQL联接 关系数据库的3个支柱:选择.投影和联接. 两种基本的连接同等联接和非同等联接. 源表和目标表有相同的名称的列,就可以在他们之间执行自然联接,而无需指定连接列. 自然join us ...

  10. HBase 数据坐标