将 Angular Material 与 Twitter Bootstrap 相结合,不会发生冲突

2024-05-10

我想将 Twitter Bootstrap 与 Angular 材料结合起来。我发现引导材料设计https://github.com/FezVrasta/bootstrap-material-design https://github.com/FezVrasta/bootstrap-material-design

角形材料使用以下声明;

<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-animate/angular-animate.min.js"></script>
<script src="../bower_components/angular-aria/angular-aria.min.js"></script>
<script src="../bower_components/angular-material/angular-material.min.js"></script>

对于引导材料,文档中的声明如下所示;

  <!-- Material Design fonts -->
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">

  <!-- Bootstrap -->
  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  <!-- Bootstrap Material Design -->
  <link rel="stylesheet" type="text/css" href="dist/css/bootstrap-material-design.css">
  <link rel="stylesheet" type="text/css" href="dist/css/ripples.min.css">

如果我包含所有链接会发生冲突吗?我对如何结合角度材料和引导程序感到非常困惑。


最好不要混合使用 Bootstrap 和 Angular Material,因为 Bootstrap 的网格系统(从版本 3~ 开始)基于 CSS 显示表,而 Angular Material 使用显示 Flex。所以正如本中所建议的answer https://stackoverflow.com/a/29326397/2333214您可能会遇到 CSS 冲突,并且您的应用程序大小将会增加。

如果您需要更好的浏览器支持并且您正在使用 Bootstrap,我已经写过角度引导材料 https://github.com/tilwinjoy/angular-bootstrap-material这是 AngularJS 版本Bootstrap 材质设计主题 http://fezvrasta.github.io/bootstrap-material-design/。它消除了对 jQuery 和 bootstrap 的 JavaScript 的依赖,并支持使用表单验证ng-messages.

您可以通过 Bower 安装bower install abm.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将 Angular Material 与 Twitter Bootstrap 相结合,不会发生冲突 的相关文章

  • Access / Word 2010 VBA 邮件合并尝试打开 [文件夹名称].mdb 而不是 ACCDB 源

    我们正在尝试从 Access 中自动执行邮件合并过程 单击按钮后 VBA 将运行指定当前数据库 accdb 作为数据源并运行 SQL 具体代码如下 Set up Word Dim objWord As Object Set objWord
  • 在 GWT 中,在任何主机页标记上添加事件处理程序

    我想为任何标签添加 MouseOver 事件处理程序 举个例子 我想为旧版 HTML 页面中的每个锚点页面添加事件处理程序 继GWT指南 http code google com webtoolkit doc 1 6 DevGuideUse
  • 没有 OAuth 的 Spring Security JWT

    最近我开始学习如何使用oauth 2 0 jwt配置spring boot 我有一个问题 是否可以使用spring boot security jwt避免oauth 2 0 是的 可以使用JWT无需使用标准化的功能OAuth 2 0 flo
  • 迭代 pandas 数据框的最快方法?

    如何运行数据框并仅返回满足特定条件的行 必须在之前的行和列上测试此条件 例如 1 2 3 4 1 1 1999 4 2 4 5 1 2 1999 5 2 3 3 1 3 1999 5 2 3 8 1 4 1999 6 4 2 6 1 5 1
  • 如何为 Windows toast 注册协议?

    如何注册 Windows toast 协议 样本中来自https blogs msdn microsoft com tiles and toasts 2015 07 02 adaptive and interactive toast not
  • 闪亮井板宽度

    library shiny library shinydashboard ui lt dashboardPage dashboardHeader dashboardSidebar dashboardBody wellPanel tags d
  • 使用 crypt() 加密

    我目前正在做一个非常安全的登录系统 但我是 crypt 函数的新手 需要一些快速帮助 我在注册过程中使用 crypt 加密密码字符串并将其保存到数据库中 但是 我如何在登录过程中解密密钥 或者我应该怎么做 或者是否可以对提交的密码字符串进行
  • 带重定向标准流的 C# + telnet 进程立即退出

    我正在尝试用 C 做一个 脚本化 telnet 项目 有点类似于Tcl期望 http expect nist gov 我需要为其启动 telnet 进程并重定向 和处理 其 stdin stdout 流 问题是 生成的 telnet 进程在
  • Scrapy Spider不存储状态(持久状态)

    您好 有一个基本的蜘蛛 可以运行以获取给定域上的所有链接 我想确保它保持其状态 以便它可以从离开的位置恢复 我已按照给定的网址进行操作http doc scrapy org en latest topics jobs html http d
  • Typescript 函数接口重载

    我有以下代码 interface MySecondInterface a type A interface MyInterface val1 string val2 string MySecondInterface a
  • 带显示块的SPAN

    和默认有什么区别 div 元素和默认值 span 元素与display block HTML 元素的有效性和语义存在差异 否则它们是相同的 div and span两者都被定义为通用容器 在 HTML 方面没有更深层次的含义 一个默认为块显
  • 使用 Crypto++ 获取 ECDSA 签名

    我必须使用 Crypto 在变量中获取 ECDSA 签名 我在启动 SignMessage 后尝试获取它 但签名为空 我怎样才能得到它 你看过 Crypto wiki 吗 上面有很多东西椭圆曲线数字签名算法 http www cryptop
  • 自定义 Visual Studio 2008 中的位置栏

    有人成功定制了 VS 2008 的 Places Bar 吗 我从 VS 2005 进行的自定义设置并没有转移到 2008 显然 并且无论我如何处理注册表 我都无法使我的自定义位置出现在 打开 对话框中 我已经阅读并应用了相关的MS KB文
  • 是否可以在 C# 中强制接口实现为虚拟?

    我今天遇到了一个问题 试图重写尚未声明为虚拟的接口方法的实现 在这种情况下 我无法更改接口或基本实现 而必须尝试其他方法 但我想知道是否有一种方法可以强制类使用虚拟方法实现接口 Example interface IBuilder
  • 匿名结构体作为返回类型

    下面的代码编译得很好VC 19 00 23506 http rextester com GMUP11493 标志 Wall WX Za 与VC 19 10 25109 0 标志 Wall WX Za permissive 这可以在以下位置检
  • Android:如何检测手机设置中的语言已更改

    我如何检测我的手机语言是否已更改 例如 Facebook 应用程序将向我们宣布 please wait we preparing your language i used myString Locale getDefault getDisp
  • 保存符号方程以供以后使用?

    From here http www mathworks com help releases R2011a toolbox symbolic brvfu8o 1 html brvfxem 1 我正在尝试求解这样的符号方程组 syms x y
  • 当ScrollView滚动到底部时加载更多数据

    我有一个带有动态加载内容的滚动视图 有时可能会有很多内容 所以我想在用户滚动到底部时加载更多内容 我搜索了合适的方法 发现了两种 onScrollChanged and getScrollY 但我不知道如何将它用于我的目的 请给我一些建议
  • 如果产品重量超过1000克,如何以公斤为单位显示

    在 Storefront 主题中 我使用下面的代码将格式化重量从 1000g 更改为 1kg add action woocommerce after shop loop item title show weight 10 function
  • CUDA 中指令重放的其他原因

    这是我从 nvprof CUDA 5 5 获得的输出 Invocations Metric Name Metric Description Min Max Avg Device Tesla K40c 0 Kernel MyKernel do

随机推荐

  • 无法在 css 中使用 .ani 光标?

    我自定义了网站的光标 但是CSS光标 url 仅适用于 gif png 或 cur 我想使用 ani 文件 但它只能在 IE 中使用 cursor url img mcursor cur auto IE 使用 Windows API 支持
  • 如何动态且安全地设置XUL密钥?

    我正在尝试为我的引导附加组件动态创建一个关键元素 目前 我创建了一个keyset元素并将其附加到document getElementById mainKeyset parentNode with appendChild 然后创建key元素
  • 更改二维数组元素的值会更改整个列

    当我打印我的arrvalue 我得到了 2D 数组的正确值 但是当我退出 while 循环时 我的值都是错误的 我不确定我做错了什么 num runs n 4 x np linspace 1 1 n y np linspace 1 1 n
  • 从 Eclipse IDE 在 Tomcat8 中部署 Maven 项目

  • Python错误代码:IndexError:索引错误列表索引超出范围

    我正在尝试用 Python 编写一个模拟赛马的函数 虽然没有获胜者 但它会清除屏幕 显示马匹列表 所有马匹的索引都从零开始 然后 在我标记的行上 代码变得混乱 我发现索引错误列表超出范围 我正在尝试随机选择一匹马 随机选择一个索引号 并将该
  • 哪里可以下载 JSTL jar [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 有谁知道 因为我尝试过的所有地方似乎都超时了 您可以下载JSTL 1 1here http archiv
  • ruby 中的 unshift + file.join

    unshift File join File dirname FILE vendor addressable 2 1 0 lib addressable uri 上面的代码是否访问具有以下路径的文件 vendor addressable 2
  • 有没有办法从函数内单击导航链接?

    基本上 我正在延迟导航 单击链接后 onClick 处理程序通过检查条件并调用另一个函数来阻止导航 如果满足特定条件 则仅该页面导航到另一个页面 那么我如何从该函数中触发 Navlink 单击 我能够通过使用解决这个问题event prev
  • 表单请求中的 Laravel 数组验证

    我无法验证 Form Request 类中包含数组元素的字段 规则方法 public function rules return state gt required state 0 gt required state gt required
  • 如何在reactjs中重新加载组件(页面的一部分)?

    我当时正在做反应项目 当我们单击重新加载按钮时 我试图重新加载组件 我实现了 onClick 函数 如下所示 但它正在重新加载整个窗口 我只想重新加载该类组件 而不是整个窗口 谁能帮我解决这个问题吗 refreshPage window l
  • 我可以限制kafka-node消费者的消费吗?

    这看起来像我的 kafka 节点消费者 var kafka require kafka node var consumer new Consumer client 在某些情况下 获取的消息数量超出了我的处理能力 有没有办法限制它 例如每秒接
  • 解决 Three.js / webGL 中的 gl_PointSize 限制

    我正在使用 Three js 创建交互式数据可视化 此可视化涉及渲染 68000 个节点 其中每个不同的节点具有不同的大小和颜色 最初我尝试通过渲染网格来实现此目的 但事实证明这非常昂贵 我当前的尝试是使用 Three js 粒子系统 每个
  • Node.js 中的 http.request 是否有默认超时?

    在 Node js 中有一个服务器的默认超时 对于传入的 HTTP 请求 120000 毫秒 2 分钟 请参阅HTTP s server timeout文档 http nodejs org api http html http server
  • 在 pandas 中,如何对日期时间列进行 groupby weekday() ?

    我想过滤掉周末数据 只查看工作日的数据 周一 0 周五 4 我是 pandas 的新手 在 pandas 中实现此目的的最佳方法是什么 import datetime from pandas import data read csv dat
  • 如何在 PHP 中对数组和数据进行排序?

    这个问题旨在作为有关 PHP 中数组排序问题的参考 人们很容易认为您的特定案例是独特的并且值得提出新问题 但大多数实际上只是此页面上的解决方案之一的微小变化 如果您的问题因与此问题重复而被关闭 请仅在您能解释为什么它与以下所有问题显着不同的
  • Pandas 时间序列数据索引从字符串到浮点[重复]

    这个问题在这里已经有答案了 有人知道如何将字符串输出转换为浮点数吗 我正在尝试创建单独的数据框 Month and day of the week 基于时间戳索引 这df index strftime输出一个字符串 但我需要一个float基
  • 在 JerseyTest 中访问 Spring beans

    我试图弄清楚如何从 JerseyTest 的子类访问 Spring bean 扩展 JerseyTest 我已经设法在测试中加载 Spring 上下文 但我还没有弄清楚如何访问 spring 上下文 我的设置如下所示 public abst
  • 只读模式下不允许写操作(FlushMode.MANUAL)

    我对Spring真的很陌生 我正在使用 JSF Hibernate Spring 开发一个简单的 JEE 应用程序 我在尝试更新 DAO 上的值时遇到一些问题 我确信问题与 Spring 配置 xml 文件有关 但我无法找出是什么 这是我的
  • fprintf 调试断言失败

    我有一个程序 如果我手动启动它 它可以正确运行 但是 如果我尝试添加注册表项以在启动过程中自动启动它 则会收到以下错误 Debug assertion failed str null fprintf c line 55 我尝试在发生任何事情
  • 将 Angular Material 与 Twitter Bootstrap 相结合,不会发生冲突

    我想将 Twitter Bootstrap 与 Angular 材料结合起来 我发现引导材料设计https github com FezVrasta bootstrap material design https github com Fe