将 Twitter Bootstrap 与 Wordpress 一起使用

2024-03-21

如何将 Wordpress 与 Twitter Bootstrap 一起使用?我知道如何设置 Wordpress 页面,并且已经使用过 Bootstrap,但现在我想第一次一起使用这两个。

对于我的 WordPress 项目,我通常只安装 WordPress 并从头开始创建一个新主题。对于我的 Bootstrap 项目,我总是使用 Initializr 来构建模板。

现在使用 Google 我发现了各种“Bootstrap 主题”和插件,我需要其中之一吗?我想用我自己的颜色等自定义引导程序外观,使用 LESS,这就是我问的原因。我只是很难理解这两者将如何协同工作,而且我还没有找到任何好的资源。


有几种方法可以解决这个问题,但这就是我一直在做的......

  1. 复制您最喜欢的起点主题
  2. 下载完整的引导程序存储库(更少和所有内容)并将其弹出到您的主题文件夹中。
  3. 在 bootstrap 文件夹中创建一个名为“css”的文件夹,并将其设置为输出编译后的“bootstrap.css”文件的位置。
  4. 然后在主题根目录中,打开“styles.css”,更改主题名称等,就像创建新主题一样,删除所有样式并仅添加一行代码@import url("bootstrap/css/bootstrap.css");
  5. 您现在应该可以从“wp-admin”的“外观”菜单中选择这个新主题。
  6. 显然,它看起来会很可怕,但是一旦您将一些主题类/ID 添加到“layout.less”中。然后运行“variables.less”来添加您将要到达的基本主题。
  7. 除此之外,您必须仔细检查每个模板文件并考虑所有类/ID,有时编辑主题以更好地利用现有的引导类,但有时您需要将自己的自定义类添加到引导程序。

这是相当耗时的,但一旦完成,显然可以重复使用它来加速未来的项目。

顺便说一句,我也一直在使用相同的原理构建一个主题,但基于http://stuffandnonsense.co.uk/projects/320andup/ http://stuffandnonsense.co.uk/projects/320andup/都是伟大的项目。我建议看看哪个最适合您。

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

将 Twitter Bootstrap 与 Wordpress 一起使用 的相关文章

  • 如何制作自己的 while 循环,就像 WordPress 循环一样?

    我是新来的 也是 PHP 新手 只是想知道如何制作我自己的灵活循环 就像在 WordPress 中一样 注意我不是在谈论 wordpress 我想在我自己的 PHP 应用程序上实现它 我们回顾一下WP 有一段代码是这样的 while hav
  • Bootstrap 折叠 - 转到打开项目的顶部?

    我正在使用引导折叠功能 但是当我打开一个包含大量内容的元素 然后打开下一个元素时 它会向下跳转并且不会转到打开元素的顶部 我尝试过使用scrollto插件 如下所示 但它不起作用 JS function a accordion toggle
  • 网站地址 URL 更改后,Wordpress 中未显示很棒的字体图标

    对于那些比我更精通编码的人来说 这可能是一个明显的问题 但我在 WordPress 中创建了一个网站 但他们的域名托管在其他地方 他们更改了 A 名称 现在它指向该网站 但字体很棒的图标现在是方框 我怎样才能解决这个问题 有简单的方法吗 非
  • WordPress .htaccess www。不强迫

    我正在尝试强迫www 在我网站的所有页面上 我将 WordPress 安装在我的主站点 blog 上的一个文件夹中 在 blog 文件夹中有一个 htaccess 文件 其中包含以下内容
  • 如何在 Laravel 5.4 中使用 bootstrap 4?

    我在我的 laravel 应用程序上使用 npm 安装了 bootstrap 4 但我认为 bootstrap 3 的工作落后于 bootstrap 4 使用命令 npm install npm install email protecte
  • Bootstrap 4:卡片作为具有相同高度和宽度的网格

    我正在尝试在具有相同高度和宽度的网格中订购卡片 这些卡片将有不同的内容和不同的尺寸 每行也应该有 3 个 每行的高度可以不同 但 行内的高度应该相同 整个网格中每张卡片的宽度应该相同 div class container div clas
  • 如何向 WordPress.com 上托管的 WordPress 博客添加语法突出显示?

    我希望为我的 WordPress 博客提供一个好的语法荧光笔 我有哪些选择 我经常看到它具有颜色鲜艳的语法突出显示和复制到剪贴板的选项 有谁知道这是什么工具吗 在 wordpress com 上 您无法安装插件 因此您必须使用 Wordpr
  • 根据 WooCommerce 中的特定付款方式添加费用

    在 WooCommerce 中 我需要为特定支付网关申请自定义手续费 我这里有这段代码 如何向 WooCommerce Checkout 添加手续费 http www endocreative com add handling fee wo
  • jQuery 更改为隐藏字段后触发重力表单中的表单更新

    简而言之 是否有 JavaScript 函数或挂钩来触发重力形式的更新 以便执行条件逻辑 原问题 我正在使用重力形式 并且创建了一个 变化时 事件 gform 1 find gfield date dropdown month select
  • Bootstrap Glyphicons 在 IE10 或 FF 中不显示

    我无法在 IE10 或 FF 中显示引导字形图标 我正在使用最新的 bootstrap 3 代码 并以标准方式包含字形 span class glyphicon glyphicon edit span 它们在 Chrome 中工作正常 但在
  • Woocommerce for Wordpress:如何修改订单号/id?

    我已在我的网上商店中实施了 WooCommerce 并连接了 CorvusPay 网关以进行在线支付 现在我们遇到的问题是 Corvus 要求我的订单号包含字符 大写和小写 以及数字 我已经看到并尝试了许多关于如何在 Wordpress 中
  • 如何更改 twitter-bootstrap 中文本区域的列数?

    如果我更改 rows 的值 它就会起作用 但无论我用 cols gt 设置什么值 它都会保持默认的 cols 列宽不会改变 我查看了 html 源代码 它反映了更改 我想知道 bootstrap 的 CSS 可能是嫌疑人 HTML 最终的
  • 带有右侧固定侧边栏的 Bootstrap 响应式网格

    我想创建一个带有类似引导程序的模板 它尊重网格的响应系统 在图中 导航栏和右侧 包含两个按钮 是粘性的 始终显示在视图上 我的问题是右侧 因为在引导网格系统中 右侧块将被视为单行 而主要内容包含多行 我怎样才能做到这一点 围绕整个 Boot
  • YouTube 数据 api 未按 viewCount 排序

    我正在尝试按 viewCount 从高到低排序 YouTube 频道视频 但结果并不是按最大观看次数排序 以下是我正在使用的 API https www googleapis com youtube v3 search key api ke
  • Woocommerce 中的欧洲 GDPR 附加结帐验证复选框

    您好 我一直在尝试向我的 Woocommerce 结帐页面添加一个额外的条件复选框 该复选框与条款和条件相同 但包含有关新 GDPR 数据保护 的信息以及指向我的隐私政策的链接 他们必须在方框中打勾才能结帐 我一直在使用从此处找到的各种代码
  • Woocommerce 获取产品

    我使用以下代码从我的 WordPress 网站中的 WooCommerce 获取产品类别列表
  • 如何翻转 Twitter Bootstrap 的工具提示

    我正在使用 Twitter 的 Bootstrap 来实现工具提示 目前 工具提示显示在链接上方 我希望工具提示出现在链接下方 我该怎么做呢 我正在触发工具提示 它明确指出 底部 但它不想为我工作 tooltip tooltip place
  • 任何插件安装失败 - 无法复制文件错误

    每次我安装一个新的 WordPress 插件时 它都会说无法复制文件和文件地址 有谁知道为什么会这样 我遇到了同样的问题 但就我而言 我是使用 FTP 进行更新 我通过将主机名设置为 localhost 而不是使用 IP 来修复此问题 这是
  • angular.js ui + bootstrap typeahead + 异步调用

    我将 typeahead 与 angular js 指令一起使用 但填充自动完成的函数进行了异步调用 我无法返回它来填充自动完成 有没有办法让它与这个异步调用一起工作 我可以假设您正在使用 Bootstrap 2 x 的 typeahead
  • Twitter 的 Bootstrap 是否像 Skeleton 一样适合移动设备?

    骨架经过缩放以适应移动浏览器 遵循以下原则响应式网页设计 http www abookapart com products responsive web design Bootstrap 提供同样的功能吗 还没有 http groups g

随机推荐

  • 从 Firebase 通知恢复应用程序不起作用(Xamarin Forms)

    我正在努力整合Firebase 推送通知到我的应用程序 请找到我的火力基地Firebase消息服务 class 如果应用程序打开并运行 则一切正常 但是 如果应用程序未打开 如果我切换到其他应用程序 我的应用程序未关闭 我收到通知 但当我点
  • 帮助在 Rails 中构建模型

    class Profile has many projects through gt teamss has many teams foreign key gt member id has many own projects class na
  • Jenkins:动态作业创建引发“管道 CPS 方法不匹配”错误

    我正在尝试从应并行运行的管道作业之一创建多个动态作业 我希望我的詹金斯管道脚本根据用户输入下载并安装我的软件二进制文件 以下是我的示例阶段 第 1 阶段 将下载构建版本 第 2 阶段 获取参数并安装软件的 云 部分 第 3 阶段 将接受用户
  • Mongoose populate() 返回空数组

    所以我已经花了大约4个小时 阅读了几次文档 但仍然无法找出我的问题 我正在尝试对我的模型执行一个简单的 populate 我有一个用户模型和商店模型 用户有一个 favoriteStores 数组 其中包含商店的 id 我正在寻找的是这个数
  • SQL查询where参数为null不为null

    我正在尝试执行 SQL 查询并根据参数是否为空或否动态构建 where 条件 我有这样的事情 SELECT tblOrder ProdOrder tblOrder Customer FROM tblOrder CASE WHEN Order
  • 找不到模块“内部/错误”离子

    我正在尝试创建新的离子项目 然后它显示以下错误 我已经删除了nodejs npm ionic并再次重新安装 但再次出现相同的错误 Terminal https i stack imgur com vLP7J png Error Error
  • 使用 Ajax 加载用户控件

    我试图找到使用 Ajax 加载用户控件的最佳实践 我的第一种方法是简单地使用 UpdatePanel 并在 ajax 回发上使用 LoadControl 弹出它 但这会在同一 UpdatePanel 中重新呈现其他加载的用户控件 另外 我无
  • cassandra 节点限制

    我正在寻找 cassandra 是否有节点硬件规格的限制 例如如果存在任何此类限制 每个节点的最大存储可能是多少 我打算使用几个节点 每个节点具有 48TB 存储 2TB X 24 硬盘驱动器 7200rpm 并配有一些良好的双 Xeon
  • SMTP 验证错误“发送邮件失败”

    如果满足某些条件 我将尝试从我的 ASP NET 网页发送电子邮件 这是我的代码 SmtpClient smtpClient new SmtpClient NetworkCredential basicCredential new Netw
  • 如何找到 Homebrew 的可安装软件包列表?

    最近我安装了Brew https brew sh 如何检索要安装的可用brew 软件包的列表 brew help将显示可用命令的列表 brew list将显示已安装软件包的列表 您还可以附加公式 例如brew list postgres会告
  • 当请求为 POST 时,在 Apigee HTTPTargetConnection 上调用 GET

    我需要调用使用 GET 的旧版 API 我的 API 代理使用 POST 我尝试使用AssignMessage
  • 将一个字符串更改为另一个字符串的简单突变数量?

    我相信你们都听说过 文字游戏 在这种游戏中 您试图通过一次更改一个字母来将一个单词更改为另一个单词 并且只浏览有效的英语单词 我正在尝试实现一个 A 算法来解决它 只是为了充实我对 A 的理解 并且需要的东西之一是最小距离启发式 也就是说
  • Angular 单元测试 Jasmine Spy 错误

    以下控制器收到类型错误 未定义 不是函数 正在评估sessionService getCurrentPlace 我有一个模拟服务 该方法正在被监视 模拟服务上的另一种方法工作正常 我试过了 AndReturns 关于间谍以及 AndCall
  • 在 MATLAB 中为结构体数组的字段赋值

    我想替换结构体数组中字段的值 例如 我想在以下结构中将所有 1 替换为 3 a 1 b 1 a 2 b 2 a 3 b 1 a a b 1 b 3 This doesn t work and spits out Insufficient o
  • 是否有一个“空”printf 代码不打印任何内容,用于跳过参数?

    如果我想要一个程序有多种文本输出格式 我可以这样做 const char fmtDefault u x s 2f each n const char fmtMultiLine Qty 3u nItem s nPrice per item 2
  • Kartik Select2 - 以编程方式更改多个

    我有一个 yii2 activeform 其中表单的功能可以根据表单中的其他内容进行更改 所以 我有一个俱乐部字段 在某些情况下可以是多个 但在其他情况下不能是多个
  • 零/符号扩展是无操作的,为什么要为每种大小类型提供指令呢?

    对于 x86 和 x64 编译器生成类似的零 符号扩展 MOVSX 和 MOVZX 扩展本身并不是免费的 但允许处理器执行无序魔法加速 但在 RISC V 上 因此 无符号和有符号 32 位整数之间的转换是无操作 从有符号 32 位整数到有
  • Keras 在激活函数之前检索节点的值

    想象一个完全连接的神经网络 其最后两层具有以下结构 Dense units 612 activation softplus Dense units 1 activation sigmoid 网络的输出值为 1 但我想知道 sigmoidal
  • Android 2.1 的操作栏

    是否有适用于 Android Level 7 的操作栏或其他我可以用作操作栏的东西 我需要构建一个使用 Android 2 1 操作栏的应用程序 JohanNilsson 实际上创建了一个ActionBar图书馆可在GitHub 直接链接
  • 将 Twitter Bootstrap 与 Wordpress 一起使用

    如何将 Wordpress 与 Twitter Bootstrap 一起使用 我知道如何设置 Wordpress 页面 并且已经使用过 Bootstrap 但现在我想第一次一起使用这两个 对于我的 WordPress 项目 我通常只安装 W