为什么我的CSS不与引导工作？ [英] why my css is not working with bootstrap ?

查看：118 发布时间：2016/5/12 19:47:15 html css angularjs twitter-bootstrap

本文介绍了为什么我的CSS不与引导工作？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

试图在我的项目上运行的引导，但它不工作没有出现风格本地主机我已经添加cdnjs链接到我的索引文件上。想安装导航栏上的开始，但项目似乎越来越很多错误的文件。

headers.html

 ＆LT;导航类=导航栏导航栏默认角色=导航＆GT;
  ＆LT; DIV CLASS =集装箱液＆GT;
    ＆LT;！ - 布兰德和切换分组得到更好的移动显示 - ＆GT;
    ＆LT; DIV CLASS =导航栏头＆GT;
      ＆LT;按钮式=按钮级=导航栏拨动崩溃数据切换=崩溃数据目标=＃BS-例如，导航栏崩溃-1＆GT;
        ＆LT;跨度类=SR-只有＆GT;拨动导航＆LT; / SPAN＆GT;
        ＆LT;跨度类=图标栏＆GT;＆LT; / SPAN＆GT;
        ＆LT;跨度类=图标栏＆GT;＆LT; / SPAN＆GT;
        ＆LT;跨度类=图标栏＆GT;＆LT; / SPAN＆GT;
      ＆LT; /按钮＆GT;
      ＆LT;一类=导航栏品牌的href =＃＆GT;品牌与LT; / A＆GT;
    ＆LT; / DIV＆GT;    ＆LT;！ - 收集导航链接，表格和其他内容的切换 - ＆GT;
    ＆LT; DIV CLASS =导航栏崩崩ID =BS-例如，导航栏崩溃-1＆GT;
      ＆LT; UL类=NAV导航栏，导航＆GT;
        ＆LT;李班=主动＆GT;＆LT; A HREF =＃＆GT;链接＆LT;跨度类=SR-只有＆GT;（电流）LT; / SPAN＆GT;＆LT; / A＆GT;＆LT; /李＆GT ;
        ＆LT;立GT;＆LT; A HREF =＃＆GT;链接＆LT; / A＆GT;＆LT; /李＆GT;
        ＆LT;李班=下拉菜单＆GT;
          ＆LT; A HREF =＃类=下拉菜单，切换数据切换=下拉菜单角色=按钮咏叹调展开=false的＆GT;下拉＆LT;跨度类=插入符号＆GT;＆LT; /跨度＆GT;＆下; / A＆GT;
          ＆LT; UL类=下拉菜单中选择角色=菜单＆GT;
            ＆LT;立GT;＆LT; A HREF =＃＆GT;动作＆LT; / A＆GT;＆LT; /李＆GT;
            ＆LT;立GT;＆LT; A HREF =＃＆GT;另一个动作＆LT; / A＆GT;＆LT; /李＆GT;
            ＆LT;立GT;＆LT; A HREF =＃＆GT;别的东西此处＆lt; / A＆GT;＆LT; /李＆GT;
            ＆LT;李班=分水岭＆GT;＆LT; /李＆GT;
            ＆LT;立GT;＆LT; A HREF =＃＆GT;分离链接＆LT; / A＆GT;＆LT; /李＆GT;
            ＆LT;李班=分水岭＆GT;＆LT; /李＆GT;
            ＆LT;立GT;＆LT; A HREF =＃ - 酮多个分离环节和LT; / A＆GT;＆LT; /李＆GT;
          ＆LT; / UL＆GT;
        ＆LT; /李＆GT;
      ＆LT; / UL＆GT;
      ＆LT;窗体类=导航栏，导航栏的形式遗角色=搜索＆GT;
        ＆LT; DIV CLASS =表单组＆GT;
          ＆LT;输入类型=文本级=表格控占位=搜索＆GT;
        ＆LT; / DIV＆GT;
        ＆LT;按钮式=提交级=BTN BTN-默认＆GT;提交＆LT; /按钮＆GT;
      ＆LT; /表及GT;
      ＆LT; UL类=NAV导航栏，导航栏导航右＆GT;
        ＆LT;立GT;＆LT; A HREF =＃＆GT;链接＆LT; / A＆GT;＆LT; /李＆GT;
        ＆LT;李班=下拉菜单＆GT;
          ＆LT; A HREF =＃类=下拉菜单，切换数据切换=下拉菜单角色=按钮咏叹调展开=false的＆GT;下拉＆LT;跨度类=插入符号＆GT;＆LT; /跨度＆GT;＆下; / A＆GT;
          ＆LT; UL类=下拉菜单中选择角色=菜单＆GT;
            ＆LT;立GT;＆LT; A HREF =＃＆GT;动作＆LT; / A＆GT;＆LT; /李＆GT;
            ＆LT;立GT;＆LT; A HREF =＃＆GT;另一个动作＆LT; / A＆GT;＆LT; /李＆GT;
            ＆LT;立GT;＆LT; A HREF =＃＆GT;别的东西此处＆lt; / A＆GT;＆LT; /李＆GT;
            ＆LT;李班=分水岭＆GT;＆LT; /李＆GT;
            ＆LT;立GT;＆LT; A HREF =＃＆GT;分离链接＆LT; / A＆GT;＆LT; /李＆GT;
          ＆LT; / UL＆GT;
        ＆LT; /李＆GT;
      ＆LT; / UL＆GT;
    ＆LT; / DIV＆GT;＆LT;！ -  /.navbar-collapse  - ＆GT;
  ＆LT; / DIV＆GT;＆LT;！ -  /.container-fluid  - ＆GT;
＆LT; / NAV＆GT;

index.html的

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=UploadAdmin＆GT;
  ＆LT; HEAD＆GT;
      ＆LT;间的charset =UTF-8＆GT;
      ＆LT; META NAME =视口CONTENT =WIDTH =设备宽度，初始规模= 1.0＆GT;
      ＆LT;标题＆GT;上传管理＆LT; /标题＆GT;      ＆LT;链接rel =stylesheet属性HREF =bower_components /剑道/风格/ kendo.common.min.css/＆GT;
      ＆LT;链接rel =stylesheet属性HREF =bower_components /剑道/风格/ kendo.default.min.css/＆GT;
      ＆LT;链接rel =stylesheet属性HREF =bower_components /剑道/风格/ kendo.dataviz.min.css/＆GT;
      ＆LT;链接rel =stylesheet属性HREF =bower_components /剑道/风格/ kendo.dataviz.default.min.css/＆GT;      ＆LT;链接rel =stylesheet属性HREF =http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common-bootstrap.min.css＆GT;
      ＆LT;链接rel =stylesheet属性HREF =http://cdn.kendostatic.com/2014.2.1008/styles/kendo.bootstrap.min.css＆GT;      ＆LT;脚本SRC =bower_components / jQuery的/ jquery.min.js＆GT;＆LT; / SCRIPT＆GT;
      ＆所述; SCRIPT SRC =bower_components /角度/ angular.min.js＆GT;＆下; /脚本＆GT;
      ＆LT;脚本SRC =bower_components /角路由/角route.min.js＆GT;＆LT; / SCRIPT＆GT;
      ＆LT;脚本SRC =bower_components /角资源/角resource.min.js＆GT;＆LT; / SCRIPT＆GT;
      ＆LT;脚本src=\"http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js\"></script>
      ＆LT;脚本SRC =bower_components /剑道/ JS / kendo.all.min.js＆GT;＆LT; / SCRIPT＆GT;
  ＆LT; /头＆GT;  ＆LT;身体GT;
      ＆LT; DIV CLASS =容器NG-控制器=UploadController＆GT;
          ＆LT; DIV NG-包括SRC ='意见/ header.html中'＆GT;＆LT; / DIV＆GT;
          ＆LT; DIV NG-view类=集装箱液＆GT;＆LT; / DIV＆GT;
          ＆LT; DIV NG-包括SRC ='意见/ footer.html'＆GT;＆LT; / DIV＆GT;
      ＆LT; / DIV＆GT;      ＆LT;脚本SRC =脚本/ app.js＆GT;＆LT; / SCRIPT＆GT;
      ＆LT;脚本SRC =脚本/ controllers.js＆GT;＆LT; / SCRIPT＆GT;
  ＆LT; /身体GT;
＆LT; / HTML＆GT;

解决方案

如果你使用的凉亭，尝试加入引导依赖你bower.json文件，例如：

 依赖：{
    角度：〜1.3.3，
    引导：〜3.2.0
  }，

和以下内容添加到您的 index.html的文件（＆LT;链接＆GT; 在头＆LT;脚本＆GT; 在底部你的其他脚本标记）：

 ＆LT;链接HREF =bower_components /引导/距离/ CSS / bootstrap.css的rel =stylesheet属性＆GT;＆LT;脚本SRC =bower_components /引导/距离/ JS / bootstrap.js＆GT;＆LT; / SCRIPT＆GT;

不要忘了亭子安装在你的目录！

trying to run bootstrap on my project but its not working no styles appear on local host i have added cdnjs link to my index files. trying to setup navbar initially on project but seems to be getting alot of errors on files.

headers.html

 <nav class="navbar navbar-default" role="navigation">
  <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">
        <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-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <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-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

index.html

<!DOCTYPE html>
<html ng-app="UploadAdmin">
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Upload Admin</title>

      <link rel="stylesheet" href="bower_components/kendo/styles/kendo.common.min.css"/>
      <link rel="stylesheet" href="bower_components/kendo/styles/kendo.default.min.css"/>
      <link rel="stylesheet" href="bower_components/kendo/styles/kendo.dataviz.min.css"/>
      <link rel="stylesheet" href="bower_components/kendo/styles/kendo.dataviz.default.min.css"/>

      <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common-bootstrap.min.css">
      <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.bootstrap.min.css">

      <script src="bower_components/jquery/jquery.min.js"></script>
      <script src="bower_components/angular/angular.min.js"></script>
      <script src="bower_components/angular-route/angular-route.min.js"></script>
      <script src="bower_components/angular-resource/angular-resource.min.js"></script>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
      <script src="bower_components/kendo/js/kendo.all.min.js"></script>
  </head>

  <body>
      <div class="container" ng-controller="UploadController">
          <div ng-include src="'views/header.html'"></div>
          <div ng-view class="container-fluid"></div>
          <div ng-include src="'views/footer.html'"></div>
      </div>

      <script src="scripts/app.js"></script>
      <script src="scripts/controllers.js"></script>
  </body>
</html>

解决方案

If you're using bower, try adding the bootstrap dependency to your bower.json file as such:

  "dependencies": {
    "angular": "~1.3.3",
    "bootstrap": "~3.2.0"
  },

and add the following to your index.html file (<link> in head and <script> with your other script tags at the bottom):

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

<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>

Don't forget to bower install in your directory!

这篇关于为什么我的CSS不与引导工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

为什么我的CSS不与引导工作？ [英] why my css is not working with bootstrap ?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

为什么我的CSS不与引导工作？ [英] why my css is not working with bootstrap ?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭