那就目录结构

页面环境代码：

 <!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. login-Linux必学的60个命令

    1.作用 login的作用是登录系统,它的使用权限是所有用户. 2.格式 login [name][-p ][-h 主机名称] 3.主要参数 -p:通知login保持现在的环境参数. -h:用来向远程 ...

  2. 企业网盘居然支持高速局域网文件传输工具（速度可达20M）

    高速局域网文件传输工具Mobox,局域网内文件共享是公司内非常必须的功能,原本文件共享可以通过:1)windows目录共享目录来实现文件交互:2)通过U盘拷贝给对方:3)通过QQ发送给对方:4)通过邮 ...

  3. Django问题2

    接触django是从上个月开始,学习python时间也不长,但我经常在社区看看别人发表的文章,早上看到一篇不错的博客,却一直不能访 问,最终从bing的缓存里找到,因为害怕丢失和忘掉,所以顺便翻译过来 ...

  4. [JZOJ4769]【GDOI2017模拟9.9】graph

    题目 描述 题目大意很明确了,所以不说-- 思考历程 一看见这题,咦,这就是传说中的动态图吗? 普通的动态图是维护连通性,这题是维护它是否是二分图,换言之就是维护它是否有奇环. 好像很复杂的样子. 想 ...

  5. 【JZOJ3379】查询

    description 对于一个整数序列,查询区间第k大数可以在O(logN)的时间内轻松完成.现在我们对这个问题进行推广. 考虑带重复数的集合(multiset).定义在该类集合上的并操作" ...

  6. C++模拟实现Objective-C协议和代理模式

    Objective-C的协议和代理是运用最多的特性之一,可以说在苹果系列开发中无处不在.事实上很多人都不知道其背后的原理.事实上简单点说,这就是设计模式中的代理模式的经典运用.代理模式简单点说就是为其 ...

  7. sed应用 升级场景配置文件更新 指定行追加

    function addLine() { confFile=configuration.xml isExist=`cat ${confFile} | grep "<listen_ena ...

  8. mybatis-输入输出映射-动态sql-关联查询-mybatis与spring-逆向工程

    1.1. 输入映射和输出映射 Mapper.xml映射文件中定义了操作数据库的sql,每个sql是一个statement,映射文件是mybatis的核心. 1.1.1. 环境准备 1. 复制昨天的工程 ...

  9. FPFH+ICP点云配准

    A, UniformSampling降噪 B, ISS计算关键点, FPFH特征 在FeatureCloud::setInputCloud中读入点云,并调用processInput进行处理: proc ...

  10. RTNETLINK answers: File exists错误解决方法

    >一.写在前面: 因为是我刚学习linux好多问题需要解决,bolg仅作为记录自己的在技术这条道路上的点点滴滴. 二.事件起因: 最近因为女友的原因消沉的好长时间,在马哥那里的课程的结束到现在已 ...