那就目录结构

页面环境代码：

 <!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. LeetCode 21. 合并两个有序链表(Python)

    题目: 将两个有序链表合并为一个新的有序链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的. 示例: 输入:1->2->4, 1->3->4 输出:1->1-&g ...

  2. C++ Builder 2007中应用数据库SQLite(转载)

    第一次使用SQLite数据库,而且BCB2007也不熟,这两者的结合那就更让我难受了.今天只是简单的在BCB中调用SQLite,就花了我一下午时间,这也足见本人知识的浅薄,另一方面也说明我对这二者确实 ...

  3. python学习笔记4.2_正则表达式

    常用正则表达式:http://tool.chinaz.com/regex/ 1.正则表达式:提供了一种在文本中灵活查找或匹配字符串模式的方法.单个表达式通常被称为regex. 2.python的re模 ...

  4. sqlmap：wins系统+python3上安装

    python2和python3互不兼容,SqlMap是基于python2的,所以SqlMap不支持python3,这里使用virtualenvwrapper切换python版本: 一.sqlmap的安 ...

  5. <每日一题>题目13：列表的简单问题

    ''' 分析: python赋值是通过指针来进行的. 很显然第一.三.四次调用都指向同一个列表,并未完成清空, 第二次调用只是指向了另一个列表,也未完成清空,很显然结果是累计的 结果: [0, 1] ...

  6. css 超出两行省略号,超出一行省略号

    参考:https://www.cnblogs.com/yangguojin/p/10301981.html 超出一行省略: p{ white-space:nowrap; overflow:hidden ...

  7. VIsualSVN server 安装及旧仓库导入

    安装参考: 1,  http://www.cnblogs.com/xiaobaihome/archive/2012/03/20/2407610.html SVN服务器搭建和使用(一) Subversi ...

  8. 对话框处理Enter,Esc键相应问题

    在类视图里面选择你要实现的类,右键属性,在属性里面找到函数PreTranslateMessage,然后添加PreranslateMessage的消息函数,在PreTranslateMessage的消息 ...

  9. API 练习 第一篇

    练习API   CreateSemaphoreCreateEvent ReleaseSemapWaitForSingleObject  CloseHandleInitializeCriticalSec ...

  10. Spring整合JUnit单元测试

    必须先有JUnit的环境(已经导入了Junit4的开发环境) 1.导入jar包 2.在测试类上添加注解 @RunWith(SpringJUnit4ClassRunner.class) @Context ...