如何在 WordPress 主题中使用 BootStrap?

     2023-03-05     159

关键词:

【中文标题】如何在 WordPress 主题中使用 BootStrap?【英文标题】:How to use BootStrap inside a WordPress theme? 【发布时间】:2014-02-07 21:46:57 【问题描述】:

我是 WordPress 和 BootStrap CSS 框架的新手,我有以下疑问:

我已经安装了这个集成了 BootStrap 框架的主题,我想以它为起点:http://bootstrapwp.rachelbaker.me/

我已更改主页的背景颜色,将 background-color 属性更改为我的主题中名为 bootstrapwp.css 的文件中的正文字段,使用 FireBug插件

好吧...我的疑问是:

1) 为什么这个 CSS 文件被命名为 bootstrapwp.css 而不是在下载的 BootStrap 3 框架中的 bootstrap.css?为什么这个文件与下载的 bootstrap.css 文件略有不同?

2) 在 BootStra 中更改样式的更好方法是什么?我可以直接在我的 bootstrapwp.css 中更改它,还是在覆盖此行为的另一个文件中进行更改?

Tnx

安德烈亚

【问题讨论】:

【参考方案1】:

您可以试试 Impulse Press。这是最完整的 Wordpress Bootstrap 3 入门主题 看看演示impulsepress.twoimpulse.com 有了这个,您可以在 bootstrap-theme.css 中更改您的 css 样式并且不要触摸 bootstrap.css ,所以当我们有更新时它不会破坏您的网站样式

Vincent Polisi 是对的,您还可以制作儿童主题并让 Impulse Press 始终更新

【讨论】:

【参考方案2】:

安德烈亚:

您的问题有很多答案,但我会努力为您简化。

首先,开发人员试图做的是在 Wordpress CMS 中获取 Bootstrap 功能。它们是两种完全不同的动物。 Bootstrap 由必须手动编码的各个页面组成。 Wordpress 是一个内容管理系统 (CMS),您可以在其中应用样式、主题、侧边栏、模板或小部件,并将其显示在站点范围内的每个页面上。

因此,开发人员正在使用 bootstrapwp.css 文件来处理整个 Bootstrap 主题 Wordpress 网站的 CSS。请记住,这不是 Bootstrap 站点。这是一个以 Bootstrap 为主题的 Wordpress 网站,旨在将 Bootstrap 的功能和设计融入 Wordpress Codex 的范围内。

如果您运行的是 Wordpress 网站,更改样式的最佳方法始终是在子主题提供的 CSS 文件中。

【讨论】:

好的,让我们看看我是否理解您的意思:我知道 BootStrap 是具有相关 CSS 设置的组件的集合(例如菜单组件)。我知道我可以简单地在一个简单的 HTML 页面中应用 BootStrap 菜单组件(作为导航栏),但这在 WordPress 中可能非常复杂,因为在 CMS 中菜单具有特定的逻辑(这只是一个示例,正确如果我错了我)。那么回到我之前的帖子:你的意思是主题的开发者已经在WP主题中采取并集成了一些BootStrap行为(一些组件和相关的CSS)? 还有:当您说“更改样式的最佳方法总是在子主题提供的 CSS 文件中”时,您到底是什么意思? Tnx

如何以编程方式在主题中使用 Wordpress Gutenberg 块?

】如何以编程方式在主题中使用WordpressGutenberg块?【英文标题】:HowtouseaWordpressGutenbergblockprogrammaticallyintothetheme?【发布时间】:2020-07-1501:52:59【问题描述】:我正在开发一个100%基于Gutenberg块的wordpress主题。有些页面是直接在编... 查看详情

如何使用“主题我的登录”插件在 wordpress 登录表单中自动填写字段?

】如何使用“主题我的登录”插件在wordpress登录表单中自动填写字段?【英文标题】:howtomakeautofillfieldinwordpressloginformusing"thememylogin"plugin?【发布时间】:2013-10-0711:11:21【问题描述】:我在wordpress中使用插件“主题我的登... 查看详情

如何在 WOffice 主题 wordpress 主题中获取活动用户数据库表

】如何在WOffice主题wordpress主题中获取活动用户数据库表【英文标题】:HowtogetactiveuserdatabasetableinWOfficethemewordpresstheme【发布时间】:2018-03-2007:31:15【问题描述】:我正在为我的网站使用woffice主题的WordPress。我正在为上述网站开... 查看详情

如何在 xampp 中安装下载的 wordpress 主题

】如何在xampp中安装下载的wordpress主题【英文标题】:howtoinstalldownloadedwordpressthemeinxampp【发布时间】:2012-08-2113:15:38【问题描述】:我正在尝试安装从thiswebsite下载的主题。我正在使用XAMPP,但我不确定如何使用XAMPP安装这个下载... 查看详情

如何在 wordpress 主题中覆盖以前的样式?

】如何在wordpress主题中覆盖以前的样式?【英文标题】:Howcanioverridepreviousstylinginawordpresstheme?【发布时间】:2018-01-1212:41:34【问题描述】:好的,这就是我要使用的样式.suggestion-taxonomies-product-visibilityspandisplay:inline-block;float:left;p... 查看详情

如何在wordpress主题中使用fontawesome

...寸的屏幕,省掉了做很多图片的麻烦。如果你想在自己的WordPress主题中使用FontAwesome,下面介绍了方法。安装插件FontAwesomeIcons我的博客有很多代码,但今天我要把插件放在前面,不希望大家觉得在WordPress中使用插件就一定会降低... 查看详情

在 Wordpress 主题中(使用 get_search_form()),如何将占位符文本添加到搜索框?

】在Wordpress主题中(使用get_search_form()),如何将占位符文本添加到搜索框?【英文标题】:InaWordpresstheme(usingget_search_form()),howcanIaddplaceholdertexttothesearchbox?【发布时间】:2013-11-2103:04:46【问题描述】:我正在尝试创建一个主题,... 查看详情

转载:如何在wordpress主题中添加设置页面

将自己设计的题发布或是销售是一件很棒的事情,但并不是每一个主题使用者都有很熟练的HTML/CSS技巧。但是如果在主题中整合一个设置选项页面,就可以使那些完全不懂代码的用户能够很容易地根据他们的喜好来修改主题。下... 查看详情

如何在wordpress中链接外部css? [关闭]

】如何在wordpress中链接外部css?[关闭]【英文标题】:Howtolinkexternalcssinwordpress?[closed]【发布时间】:2015-01-1816:08:45【问题描述】:我使用的主题仅支持一个主标题菜单。我正在尝试使用另一个使用外部css来制作另一个。如何在wor... 查看详情

如何在wordpress主题中注册html页面的Css

】如何在wordpress主题中注册html页面的Css【英文标题】:HowtoregisterCssofhtmlpageinwordpresstheme【发布时间】:2016-12-1503:08:17【问题描述】:我是wordpress开发的新手。我试图将响应式html页面转换为wordpress主题,但html页面的CSS在wordpress主... 查看详情

在 Rails 应用程序中使用 Wordpress 主题?

】在Rails应用程序中使用Wordpress主题?【英文标题】:TouseWordpressthemesinRailsapps?【发布时间】:2011-02-1402:11:25【问题描述】:Wordpress主题很漂亮!是否有在rails应用程序中使用Wordpress主题的指南?更好的是,是否有可以使用Wordpress... 查看详情

如何在 Wordpress 插件中使用 ReactJS

】如何在Wordpress插件中使用ReactJS【英文标题】:HowToUseReactJSinWordpressPlugin【发布时间】:2016-02-1610:08:44【问题描述】:我在Wordpress插件中使用ReactJs时遇到问题。我正在使用ReactJs开发一个Wordpress插件。谷歌搜索仅在Wordpress主题中... 查看详情

如何在wordpress主题中添加设置页面

...径为:wp-contentthemesOptionPagefunctions.php。  我们不需要让wordpress手动加载它,在执行时wordpress会自动加载。  2、建立设置选项页  首先第一步需要在后台建立一个空白页面供我们使用。我们通过add_aaction来实现这一步。Action... 查看详情

使用 MAMP 时如何将图像添加到 wordpress 主题?

】使用MAMP时如何将图像添加到wordpress主题?【英文标题】:HowtoaddimagestoawordpressthemewhenworkingonMAMP?【发布时间】:2012-02-1121:38:44【问题描述】:我是MAMP的新手,我正在开发自己设计的主题。但是我似乎无法让图像渲染。我正在使... 查看详情

教你如何安装wordpress主题的方法

相比于其他CMS,WordPress最大的特色就是它可以让你更换主题,无需代码就能定制网站外观,那么如何为你的站点安装WordPress主题呢,在本文中我们来分享几个常用方法 通过WordPress后台安装主题WordPress使用非常方便,很重要一... 查看详情

如何在wordpress的菜单中添加页面

】如何在wordpress的菜单中添加页面【英文标题】:Howtoaddpageinmenuinwordpress【发布时间】:2014-03-0108:23:07【问题描述】:我是第一次使用WordPress,我想编辑导航。我想添加一些页面,因为我的主题中唯一的列表是“主页和示例页面... 查看详情

如何在 Zerif Lite Wordpress 主题中添加响应式滑块

】如何在ZerifLiteWordpress主题中添加响应式滑块【英文标题】:HowtoaddResponsiveSliderinZerifLiteWordpressTheme【发布时间】:2017-08-1720:53:59【问题描述】:我使用NivoSlider插件在big_title部分添加了滑块。滑块工作正常,但在分辨率降低时没... 查看详情

在 Wordpress 中开发移动主题

】在Wordpress中开发移动主题【英文标题】:DevelopMobileThemeinWordpress【发布时间】:2012-10-2300:54:56【问题描述】:我制作了一个网站的wordpress主题。我使用StarkerTheme进行wordpress主题开发。现在我想让我的网站移动友好。是否有任何... 查看详情