关于 BootStrap 框架如何修改 CSS 的问题

各位大侠好,请问 BootStrap 框架怎么修改 CSS 样式?像下拉菜单点击后默认是背景色变成灰色,但网页的导航栏背景也是灰色,而且在导航栏的 class 里加了自己的 css 后,它响应时。。。不会把导航折叠了0.0。想请问各位,这个框架应该怎样修改它的 CSS 样式?

1个回答

给此样式单独定义一个类,不改变原来的。但是要保证新的权重大于旧的

PartyJat
CJ_Finger 非常感谢你的回答!我发现还是自定义组件样式,然后用它的响应式的功能好了。。。
3 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Bootstrap与其他CSS冲突

<div class="post-text" itemprop="text"> <p>In my website i am designing i have a require header file that allows the user to login and logout aswell as being the navbar. This as its own CSS shown in style.css , which is conflicting with the form i have as content on the page styled with bootstrap.</p> <p><a href="https://i.stack.imgur.com/bCr9H.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bCr9H.png" alt="How header should look"></a></p> <p><a href="https://i.stack.imgur.com/9PKFK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9PKFK.png" alt="How header looks with bootstrap conflict"></a></p> <p>I have tried to isolate the bootstrap by using the <code>&lt;div class="bootstrap-iso"&gt;</code> tag and also using <code>!important</code> on the header css. None which i have got to the work.</p> <p>style.css </p> <pre><code>* { margin: 0; padding: 0; text-decoration: none; } button { cursor: pointer; } body { background-color: #F3F3F3; } .wrapper-main { width: 900px; margin: 0 auto; } header { width: calc(100% - 30px); height: 60px; padding: 0 15px; background-color: #FFF; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .nav-header-main { height: 80%; display: flex; flex-direction: row; } .header-logo { width: 48px; padding-right: 20px; } .nav-header-main img { height: 100%; } .nav-header-main ul { height: 100%; } .nav-header-main ul li { list-style: none; float: left; height: 100%; } .nav-header-main ul li a { display: block; height: 100%; padding: 0 10px; border-radius: 6px; line-height: 48px; font-family: arial; font-size: 16px; color: #111; } .header-login { height: 60%; display: flex; flex-direction: row; } .header-login form { height: 100%; } .header-login form input { height: 100%; width: 160px; padding: 0 15px; border: none; border-radius: 4px; background-color: #F6F6F6; float: left !important; margin-left: 8px; font-family: arial; } .header-login form button { height: 100%; padding: 0 10px; border: none; border-radius: 4px; background-color: #333; margin-left: 8px; font-family: arial; font-size: 13px; color: #FFF; text-transform: uppercase; text-align: center; } .header-signup { height: 100%; width: 70px; padding: 0 6px; border: none; border-radius: 4px; margin-left: 8px; font-family: arial; font-size: 13px; line-height: 36px; color: #111; text-transform: uppercase; text-align: center; } main { padding-top: 20px; } .section-default { width: 100%; padding: 20px; border-radius: 6px; background-color: #FFF; } .login-status { text-align: center; font-size: 26px; font-family: arial; color: #111; } h1 { text-align: center; font-size: 26px; font-family: arial; color: #111; } /* signup.php */ .form-signup { margin: 0 auto; padding-top: 20px; width: 200px; } .form-signup input { width: calc(100% - 30px); height: 30px; padding: 0 15px; margin-bottom: 6px; border: 1px solid #CCC; border-radius: 4px; background-color: #F6F6F6; float: left !important;; font-family: arial; } .form-signup button { display: block; height: 40px; padding: 0 10px; margin: 0 auto; border: none; border-radius: 4px; background-color: #333; font-family: arial; font-size: 13px; color: #FFF; text-transform: uppercase; text-align: center; } .signuperror { padding-top: 14px; font-family: arial; font-size: 16px; color: red; text-align: center; } .signupsuccess { padding-top: 14px; font-family: arial; font-size: 16px; color: green; text-align: center; } </code></pre> <p>bookappointment.php </p> <pre><code>&lt;?php include_once 'includes/dbh.inc.php'; require "s_header.php"; ?&gt; &lt;html&gt; &lt;body&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"&gt; &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" type="text/css" href="bookappointment.css"&gt; &lt;div class="subnav" style="margin-top:30px"&gt; &lt;div class="row"&gt; &lt;div class="col-sm-4"&gt; &lt;ul class="nav nav-pills flex-column"&gt; &lt;li class="nav-item"&gt; &lt;a class="nav-link active" href="bookappointment.php"&gt;Book&lt;/a&gt; &lt;/li&gt; &lt;li class="nav-item"&gt; &lt;a class="nav-link" href="viewappointment.php"&gt;View&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="BookingForm" style="margin-top:30px"&gt; &lt;link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"&gt; &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt; &lt;form action="includes/book.php" method="post" class="w3-container w3-card-4 w3-light-grey w3-text-blue w3-margin"&gt; &lt;h2 class="w3-center"&gt;Book Appointment&lt;/h2&gt; &lt;div class="w3-row w3-section"&gt; &lt;div class="w3-col" style="width:50px"&gt;&lt;i class="w3-xxlarge fa fa-user"&gt;&lt;/i&gt;&lt;/div&gt; &lt;div class="w3-rest"&gt; &lt;input class="w3-input w3-border" name="fname" type="text" placeholder="First Name"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="w3-row w3-section"&gt; &lt;div class="w3-col" style="width:50px"&gt;&lt;i class="w3-xxlarge fa fa-user"&gt;&lt;/i&gt;&lt;/div&gt; &lt;div class="w3-rest"&gt; &lt;input class="w3-input w3-border" name="lname" type="text" placeholder="Last Name"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="w3-row w3-section"&gt; &lt;div class="w3-col" style="width:50px"&gt;&lt;i class="w3-xxlarge fa fa-envelope-o"&gt;&lt;/i&gt;&lt;/div&gt; &lt;div class="w3-rest"&gt; &lt;input class="w3-input w3-border" name="email" type="text" placeholder="Email"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="w3-row w3-section"&gt; &lt;div class="w3-col" style="width:50px"&gt;&lt;i class="w3-xxlarge fa fa-phone"&gt;&lt;/i&gt;&lt;/div&gt; &lt;div class="w3-rest"&gt; &lt;input class="w3-input w3-border" name="phone" type="text" placeholder="Phone"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="w3-row w3-section"&gt; &lt;div class="w3-col" style="width:50px"&gt;&lt;i class="w3-xxlarge fa fa-calendar"&gt;&lt;/i&gt;&lt;/div&gt; &lt;div class="w3-rest"&gt; &lt;input type="date" name="date" value="" required&gt;&lt;/input&gt; &lt;/div&gt; &lt;div class="w3-row w3-section"&gt; &lt;div class="w3-col" style="width:50px"&gt;&lt;i class="w3-xxlarge fa fa-clock-o"&gt;&lt;/i&gt;&lt;/div&gt; &lt;div class="w3-rest"&gt; &lt;input type="time" name="time" value="" required&gt;&lt;/input&gt; &lt;/div&gt; &lt;div class="w3-row w3-section"&gt; &lt;div class="w3-col" style="width:50px"&gt;&lt;i class="w3-xxlarge fa fa-pencil"&gt;&lt;/i&gt;&lt;/div&gt; &lt;div class="w3-rest"&gt; &lt;input class="w3-input w3-border" name="message" type="text" placeholder="Message"&gt; &lt;/div&gt; &lt;/div&gt; &lt;p class="w3-center"&gt; &lt;button type ="submit "class="w3-button w3-section w3-blue w3-ripple"&gt; Book &lt;/button&gt; &lt;/p&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> </div>

用eclipse开发web时导入本地bootstrap.css出现问题

``` <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> ``` 上面这句是使用在线方式加载css框架,一切正常。 然后被告知不能用这种方式,要使用本地资源 于是我把bootstrap.min.css文件放到项目根目录下后,尝试了以下N种方法,结果都不能正确加载css文件导致显示出的网页不正常(没有样式): ``` <link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="./bootstrap.min.css"> <link rel="stylesheet" href="<%=request.getContextPath()%>/bootstrap.min.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap.min.css"> ``` 甚至当我使用绝对路径时,也不能加载本地的css文件!: ``` <link rel="stylesheet" href="D:/bootstrap-3.3.5-dist/css/bootstrap.min.css"> ``` 崩溃了!这个问题到底出在哪里?为什么只有用在线加载方式时可以正常显示网页,而使用其他各种办法,甚至是指定绝对路径时,也无法正常加载? 求大神指点一下菜鸟

怎么用bootstrap框架?

怎么把引用bootstrap,将自己做的页面做成响应式。是要用bootstrap里的样式.css文件吗,那自己做的页面的类名是不是得改成bootstrap样式文件里的类名?求大神指教,第一次用bootstrap,不会用。

bootstrap使用修改样式

对于页面宽度大于1200px的网页,container的宽度设置为1170px,我想修改的更大,比如在1920px的宽屏中,设置container的宽度为1900px,要怎么修改

关于Bootstrap中导航栏问题

我使用了bootstrap的响应式导航栏功能,为了使导航栏中每个<li>元素拥有同样的宽度,我设置CSS样式 width:16.6%;在页面未折叠之前,都运行良好。 ![图片说明](https://img-ask.csdn.net/upload/201708/18/1503060999_502542.jpg) 可是折叠之后就成了这样 ![图片说明](https://img-ask.csdn.net/upload/201708/18/1503060468_601164.jpg) 本来“start”(navbar-band)应该单独占一行的,现在和要折叠的内容在同一行了。 我觉得这是由于我设置了<li>元素宽度的问题,但如果我不设置其宽度,每个<li>元素的 宽度就不等,这样在应用a:hover时就显得很难看。请问该怎样解决? html ``` <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Marine Geology Office 201</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="styles/index.css" rel="stylesheet" media="screen" /> </head> <body> <header> <div class="container"> <div class="row"> <div class="col-sm-8 col-xs-12"> <div class="row"> <div class="col-sm-3 col-xs-4"> <a href="http://www.zju.edu.cn/"><img id="logo" src="images/school.gif" class="img-responsive" alt="ZJU" /></a> </div> <div class="col-sm-9 col-xs-8"> <h1 id="title" class="text-left"><b><i>Marine Geology Office 201</i></b></h1> </div> </div> </div> <div class="col-sm-4 col-xs-12"> <form role="form" id="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search..." /> <span class="input-group-btn"> <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button> </span> </div> </form> </div> </div> </div> <div class="container"> <nav class="navbar" role="navigation"> <div class="nav-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand visible-xs" href="#">Start</a> </div> <div class="collapse navbar-collapse" id="navbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Introduction</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Teachers <b class="caret"></b> </a> <ul class="dropdown-menu" role="meun"> <li><a href="#">ChunFeng Li</a></li> <li><a href="#">YingMin Wang</a></li> </ul> </li> <li><a href="#">Students</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav> </div> </header> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html> ``` index.css ``` body{ background-color:#fdfcf8; margin-left:10%; margin-right:10%; margin-top:1em; } #logo{ min-width:4em; padding-left:10%; padding-right:10% } #title{ padding-top:5%; margin-left:-0.5em; } #search{ padding-top:0.3em; } nav{ margin-top:0.5em; background-color:#A52A2A; } #navbar>ul{ width:100%; } #navbar>ul>li{ width:16.5%; min-width:13em; } #navbar>ul>li>a{ color:#FFFFFF; font-size:2em; text-align:center; } #navbar>ul>li>a:visited{ color:#FFFFFF; font-size:2em; text-align:center; font-weight:bold; background-color:#DC143C; } #navbar>ul>li>a:hover{ color:#FFFFFF; font-size:2em; text-align:center; font-weight:bold; background-color:#DC143C; } #navbar>ul>li>a:active{ color:#FFFFFF; font-size:2em; text-align:center; font-weight:bold; background-color:#DC143C; } div.nav-header>button{ background-color:#FFFFFF; } div.nav-header>button>span{ background-color:#A52A2A; } #navbar ul.dropdown-menu{ width:100%; } #navbar ul.dropdown-menu a{ font-size:20px; text-align:center; } div.nav-header a{ color:#FFFFFF; font-weight:bold; font-size:25px; } ```

关于bootstrap引入是否要引入tether

初学bootstrap,用html写了个表格,就简单的标题内容,引入了 bootstrap.min.css、 jquery.min.js和bootstrap.min.js。 打开html浏览器报错 Bootstrap tooltips require Tether。查了下发现要引入tether.min.css和tether.min.js。 引入后重新访问就没问题了,百度了说bootstrap不是必要引入tether,那为什么不引入会报错?两者的关系又是怎样的?

怎么调用bootstrap中的css,js

bootstrap中的css js中有那么多,怎么知道用的时候该调用具体哪个。 还有bootstrap是不是就相当于别人写好的css 然后自己就不用写了 就只省了写css的事。第一次接触bootstrap 请大家帮帮忙

bootstrap自定义样式与原样式优先级问题

<div class="form-group form-inline col-md-10 col-md-offset-1"> <label class="control-label">联系方式</label> <input class="input_of_sign form-control" style="margin-left: 2em; width: 70%;"> </div> ``` 比如上面的一个应用了bootstrap框架的片段,我想调整input大小让它可以用栅格系统控制,就得加一个width:100%的样式,把样式写在html里(style里面)是可以调整,写在外部css里面在调用,就会出现问题,不论在原bootstrap类之前调用还是之后,都有问题; 望解答 是这样的,我想用bootstrap把label和Input放在同一行,就用了form-inline,但用过之后发现input大小被限制了,所以想通过设置width大小然后在用栅格系统来控制大小~发现如上问题

bootstrap怎么改变导航条的宽度?

比如我这个代码 我想让它变宽点 应该怎么改呢 如果直接在css样式表里面设置宽度 改了以后缩小屏幕就不能占据整行了 <!DOCTYPE html> <html> <head> <title></title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <style type="text/css"> //li{width: 100px;text-align: center;} </style> </head> <body> <ul class="nav navbar-nav" style="background: green;"> <li class="active"><a href="">首页</a></li> <li><a href="">博文</a></li> <li><a href="">留言</a></li> </ul> </body> </html>

在 Bootstrap 中更改导航栏颜色

<div class="post-text" itemprop="text"> <p>How would I go about modifying the CSS to change the color of the navbar in Twitter Bootstrap?</p> </div> <p>转载于:https://stackoverflow.com/questions/18529274/change-navbar-color-in-twitter-bootstrap</p>

移动端网页显示异常问题,使用了bootstrap4框架

使用bootstrap框架在写一个网页时,在pc端显示无异常,但是在移动端显示时会出现显示异常。像是元素被压缩了一样。 ![图片说明](https://img-ask.csdn.net/upload/202005/17/1589729495_20568.png) ![图片说明](https://img-ask.csdn.net/upload/202005/17/1589729610_756825.png)

yii框架不使用正确的CSS

<div class="post-text" itemprop="text"> <p>I'm working with yii framework I have installed the yii booster extensions and I work with vagrant. My friend also works on this project, however the problem is that the application doesn't use the correct CSS. Instead, it uses a CSS saved in cache. </p> <p>Here how it is: There is a folder at: <code>www\SVN\wwwroot\public\assets</code> it contains some folders with weird names, one of them contains all the bootstrap CSS and everything belonging to bootstrap. This is wrong because this art is regenerated every-time I regenerate vagrant. The problem is I am using the correct CSS unless I do a (delete cookie cash) sometimes I get the correct CSS sometimes I get the wrong CSS, but all the other people using this they get the wrong CSS, unless I change it for them manually on assests folder, which is totally wrong because every time I update my workstation using svn it should apply the new lay out to other prople as well but it doesn't work.</p> <p>Here is my main config:</p> <pre><code>&lt;?php /** * This is the main Web application configuration. * * Any writable CWebApplication properties can be configured here. * It is constructed the following way: * main.php = return the main settings * unless overwritten by the local main settings if available * unless overwritten by the test settings if available * unless overwritten by the local test settings if available * (mergeArray: latter will overwrite the former, see http://www.yiiframework.com/doc/api/1.1/CMap#mergeArray-detail) * * @author Yii, adapted by Robbert &lt;Paulussen@Momentum-Technologies.nl&gt; * @since release 1.0 (sprint 1) */ // Set up path variables to reflect the directory structure // $WEBHOME/ -- doePath // = wwwroot // $WEBHOME/public/ -- webrootPath // $WEBHOME/private/protected/ -- protectedPath // $WEBHOME/private/runtime/ -- runtimePath $pathToDoeDirectory = realpath(dirname(__FILE__) . '/../../..'); // = wwwroot $privatePath = $pathToDoeDirectory . '/private/'; $protectedPath = $pathToDoeDirectory . '/private/protected/'; $runtimePath = $pathToDoeDirectory . '/private/runtime/'; $publicPath = $pathToDoeDirectory . '/public/'; $webrootPath = $publicPath; $vendorPath = '/vagrant/vendor/'; /** * Namespace MTE */ Yii::setPathOfAlias('MTE', $protectedPath); // used by the themeUrl of widgetFactory settings, in case the DOE is in a subdirectory $baseUrl = (isset($_SERVER['DOCUMENT_ROOT'])) ? str_replace($_SERVER['DOCUMENT_ROOT'], '', realpath('.')) : ''; //define('EOL','&lt;br/&gt;'); //echo '$pathToCcsDirectory = ' . $pathToCcsDirectory . PHP_EOL; //echo '$privatePath = ' . $privatePath . PHP_EOL; //echo '$protectedPath = ' . $protectedPath . PHP_EOL; //echo '$runtimePath = ' . $runtimePath . PHP_EOL; //echo '$publicPath = ' . $publicPath . PHP_EOL; //echo '$webrootPath = ' . $webrootPath . PHP_EOL; /** the following defines path aliases using: Yii::setPathOfAlias('local','path/to/local-folder'); * usage e.g. ... Yii::getPathOfAlias('runtimePath') ... */ Yii::setPathOfAlias('doePath', $pathToDoeDirectory); Yii::setPathOfAlias('privatePath', $privatePath); Yii::setPathOfAlias('publicPath', $publicPath); Yii::setPathOfAlias('protectedPath', $protectedPath); Yii::setPathOfAlias('runtimePath', $runtimePath); Yii::setPathOfAlias('webrootPath', $webrootPath); Yii::setPathOfAlias('vendorPath', $vendorPath); Yii::setPathOfAlias('booster', $vendorPath . 'clevertech/yii-booster/src/'); // a twitter bootstrap library //Yii::setPathOfAlias('booster', $publicPath . 'css/yii-booster/src/'); // a twitter bootstrap library $config_database = require(dirname(__FILE__) . '/database.php'); $config_main = array( 'sourceLanguage' =&gt; 'en', // for i18N 'timeZone' =&gt; 'Europe/Amsterdam', 'basePath' =&gt; $protectedPath, // override the default of Yii 'runtimePath' =&gt; $runtimePath, 'name' =&gt; Yii::t('systemwide', 'DOEN - DOssier opvolg- EN actiesysteem'), //'theme'=&gt;'bootstrap', 'preload' =&gt; array( 'log', 'translate', // for i18N 'booster', //Yii-Booster, a twitter bootstrap library ), 'behaviors' =&gt; array( 'onBeginRequest' =&gt; array( 'class' =&gt; 'application.components.modulesloader',), ), // for i18N // autoloading model and component classes, Note that importing a directory does not import any of its subdirectories! 'import' =&gt; array( 'application.components.*', 'application.models.*', 'application.modules.rights.*', 'application.modules.rights.components.*', 'application.modules.translate.TranslateModule', 'booster.helpers.TbHtml', 'booster.helpers.TbArray', 'booster.behaviors.TbWidget', 'booster.widgets.*' ), 'modules' =&gt; array( 'rights' =&gt; array( 'install' =&gt; false, // Whether to install rights. 'userNameColumn' =&gt; 'login', // Name of the user name column in the database. 'userClass' =&gt; 'RightsModuleUser', // extended User model 'cssFile' =&gt; '/MTE/modules/rights/default.css', // custom css for rights module 'superuserName' =&gt; 'MTeAdmin', // doe_user.login of the user with super user privileges. Default 'Admin' /* more options */ // 'appLayout' =&gt; 'application.views.layouts.main', // Application layout. // 'authenticatedName' =&gt; 'Authenticated', // Name of the authenticated user role. // 'baseUrl' =&gt; '/rights', // Base URL for Rights. Change if module is nested. // 'debug' =&gt; false, // Whether to enable debug mode. // 'displayDescription' =&gt; true, // Whether to use item description instead of name. // 'enableBizRule' =&gt; true, // Whether to enable authorization item business rules. // 'enableBizRuleData' =&gt; false, // Whether to enable data for business rules. // 'flashErrorKey' =&gt; 'RightsError', // Key to use for setting error flash messages. // 'flashSuccessKey' =&gt; 'RightsSuccess', // Key to use for setting success flash messages. // 'layout' =&gt; 'rights.views.layouts.main', // Layout to use for displaying Rights. // 'userIdColumn' =&gt; 'id', // Name of the user id column in the database. ), 'translate', 'components' =&gt; array( //use component to store the cookies 'Cookies' =&gt; array( 'class' =&gt; 'application.components.CookiesHelper' ), // uncomment the following to enable URLs in path-format 'urlManager' =&gt; array( 'urlFormat' =&gt; 'path', 'showScriptName' =&gt; false, 'rules' =&gt; array( '&lt;controller:\w+&gt;/&lt;id:\d+&gt;' =&gt; '&lt;controller&gt;/view', '&lt;controller:\w+&gt;/&lt;action:\w+&gt;/&lt;id:\d+&gt;' =&gt; '&lt;controller&gt;/&lt;action&gt;', '&lt;controller:\w+&gt;/&lt;action:\w+&gt;' =&gt; '&lt;controller&gt;/&lt;action&gt;', ), ), 'errorHandler' =&gt; array( // use 'site/error' action to display errors 'errorAction' =&gt; 'site/error', ), 'log' =&gt; array( 'class' =&gt; 'CLogRouter', 'routes' =&gt; array( array( 'class' =&gt; 'CFileLogRoute', 'levels' =&gt; 'info, warning, error', ), ), ), ), ), // application components 'components' =&gt; array( // this class is used to simplify template actions 'TemplateHelper' =&gt; array( 'class' =&gt; 'application.components.TemplateHelper', ), /* i18N - begin */ 'messages' =&gt; array( 'class' =&gt; 'CDbMessageSource', 'onMissingTranslation' =&gt; array('TranslateModule', 'missingTranslation', ), ), 'translate' =&gt; array( 'class' =&gt; 'translate.components.MPTranslate', 'acceptedLanguages' =&gt; array( 'en' =&gt; 'English', 'nl' =&gt; 'Nederlands', ), ), /* i18N - end */ 'authManager' =&gt; array( 'class' =&gt; 'RDbAuthManager', 'connectionID' =&gt; 'db', 'defaultRoles' =&gt; array('authenticated', 'user'), ), 'user' =&gt; array( 'class' =&gt; 'WebUser', /* enable cookie-based authentication */ 'allowAutoLogin' =&gt; true, /* @see http://www.yiiframework.com/doc/guide/1.1/en/topics.auth */ 'loginUrl' =&gt; array('/site/login'), ), 'booster' =&gt; array( 'class' =&gt; 'booster.components.Bootstrap', 'coreCss' =&gt; true, 'responsiveCss' =&gt; true, 'yiiCss' =&gt; true, 'minify' =&gt; true, ), ), /** application-level parameters that can be accessed * using Yii::app()-&gt;params['paramName'] */ 'params' =&gt; array( // this is used in contact page 'adminEmail' =&gt; 'beheer@momentum-technologies.nl', 'cookie_duration' =&gt; 3600 * 24 * 30, 'composer.callbacks' =&gt; array( // args for Yii command runner 'yiisoft/yii-install' =&gt; array('yiic', 'webapp', dirname(__FILE__) . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . '..'), 'post-update' =&gt; array('yiic', 'migrate'), 'post-install' =&gt; array('yiic', 'migrate'), ), ), ); $mainDbIncluded = CMap::mergeArray($config_database, $config_main); // include and merge local main config if it exists if (file_exists(dirname(__FILE__) . '/main-local.php')) { return CMap::mergeArray($mainDbIncluded, include(dirname(__FILE__) . '/main-local.php')); } // otherwise just load the main config file return $mainDbIncluded; </code></pre> <p>As you can see I have defined my CSS path to be:</p> <pre><code>Yii::setPathOfAlias('booster', $vendorPath . 'clevertech/yii-booster/src/'); // a twitter bootstrap library </code></pre> <p>here is my header.php that goe wrong:</p> <pre><code>&lt;?php $lang = Yii::app()-&gt;getLanguage(); if (empty($lang)) { $lang = 'en'; } ?&gt; &lt;!DOCTYPE html&gt; &lt;html lang="&lt;?php echo $lang; ?&gt;"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;link rel="stylesheet" type="text/css" href="&lt;?php echo Yii::app()-&gt;request-&gt;baseUrl; ?&gt;/css/screen.css" media="screen, projection" /&gt; &lt;link rel="stylesheet" type="text/css" href="&lt;?php echo Yii::app()-&gt;request-&gt;baseUrl; ?&gt;/css/main.css" /&gt; &lt;link rel="stylesheet" type="text/css" href="&lt;?php echo Yii::app()-&gt;request-&gt;baseUrl; ?&gt;/css/widgets/jui.tabs.css" /&gt; &lt;link rel="stylesheet" type="text/css" href="&lt;?php echo Yii::app()-&gt;baseUrl; ?&gt;/css/common.css" /&gt; &lt;?php Yii::app()-&gt;clientScript-&gt;registerCoreScript('jquery'); Yii::app()-&gt;clientScript-&gt;registerScriptFile(Yii::app()-&gt;baseUrl . '/js/common.js'); ?&gt; &lt;title&gt;&lt;?php echo CHtml::encode($this-&gt;pageTitle); ?&gt;&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="&lt;?php echo Yii::app()-&gt;request-&gt;baseUrl; ?&gt;/css/widgets/jui.tabs.css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="header"&gt; &lt;?php $this-&gt;widget('booster.widgets.TbNavbar', array( 'brand' =&gt; '&lt;img src="' . Yii::app()-&gt;request-&gt;baseUrl . '/images/logo_mte.png" alt="" /&gt;' , 'brandUrl' =&gt; '#', 'collapse' =&gt; true, 'type' =&gt; null, 'items' =&gt; array( 'brand' =&gt; Yii::App()-&gt;name , array( 'class' =&gt; 'booster.widgets.TbMenu', 'items' =&gt; array( array('label' =&gt; 'Login', 'url' =&gt; array('/site/login'), 'visible' =&gt; Yii::app()-&gt;user-&gt;isGuest), array('label' =&gt; 'Logout (' . Yii::app()-&gt;user-&gt;name . ')', 'url' =&gt; array('/site/logout'), 'visible' =&gt; !Yii::app()-&gt;user-&gt;isGuest) ), ), ))); ?&gt; &lt;/div&gt; &lt;div id="ajaxLoading"&gt; &lt;!--&lt;img src="../public/images/ajax-loader.gif" alt="Loading..."/&gt;--&gt; &lt;/div&gt; </code></pre> <p>an when I look at my inspect element in chrome this is what I see:</p> <p> </p><p>as you can see it is generated in assets. but I dont want it to be like this how can I fix that?</p> <p>But it doesn't use this one and instead, it uses an incorrect version. Can someone help me out with this? Maybe I am getting this wrong and the problem is from something else. Thanks</p> </div>

bootstrap样式本地导入无效

第一次导入bootstrap的时候可以加载本地样式,采用动态路径后,怎么弄都不行了,再换回本地加载也不行,但是cdn连接方式可以![图片说明](https://img-ask.csdn.net/upload/202002/03/1580706159_769316.png) ![图片说明](https://img-ask.csdn.net/upload/202002/03/1580705950_149887.png) ``` <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <script src="bootstrap-3.3.7-dist/jquery/jquery.min.js"></script> <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </head> <body> <button class="btn btn-success">按钮</button> </body> </html> ```

Symfony 3.3 - 链接到bootstrap.min.css

<div class="post-text" itemprop="text"> <p>After investing quite some time on this problem I still cannot get this to work. In my base.html.twig file I link to the bootstrap.min.css file, located at css/bootstrap.min.css inside the web directory, as follows:</p> <pre><code>{% block stylesheets %} &lt;link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}" /&gt; {% endblock %} </code></pre> <p>I then extend the base.html.twig file in my template files, when I navigate to any of these files I get the following error message:</p> <pre><code>&gt; Request URL:http://example/css/bootstrap.min.css Request Method:GET Status Code:404 Not Found </code></pre> <p>I'm at a loss as to what I'm doing wrong here! Any help would be appreciated.</p> <p>base.html.twig file:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;meta name="description" content=""&gt; &lt;meta name="author" content=""&gt; &lt;link rel="icon" href="../../favicon.ico"&gt; &lt;title&gt;{% block title %}Welcome!{% endblock %}&lt;/title&gt; &lt;!-- Bootstrap core CSS --&gt; {% block stylesheets %} &lt;link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}" /&gt; &lt;link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" /&gt; {% endblock %} &lt;/head&gt; &lt;body&gt; &lt;nav class="navbar navbar-inverse"&gt; &lt;div class="container"&gt; &lt;div class="navbar-header"&gt; &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt; &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;/button&gt; &lt;a class="navbar-brand" href="#"&gt;Todo List&lt;/a&gt; &lt;/div&gt; &lt;div id="navbar" class="collapse navbar-collapse"&gt; &lt;ul class="nav navbar-nav"&gt; &lt;li class="active"&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/todo/create"&gt;Add todo&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!--/.nav-collapse --&gt; &lt;/div&gt; &lt;/nav&gt; &lt;div class="container"&gt; &lt;div class="row"&gt; &lt;div class="col-md-12"&gt; {% block body %}{% endblock %} &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;&lt;!-- /.container --&gt; {% block javascripts %} {% endblock %} &lt;/body&gt; &lt;/html&gt; </code></pre> <p>The index.html.twig file:</p> <pre><code>{% extends 'base.html.twig' %} {% block body %} /INDEX {% endblock %} </code></pre> <p>My server config: </p> <pre><code>&lt;VirtualHost *:80&gt; DocumentRoot "/xampp/htdocs/symfony/todolist/web/app_dev.php" ServerName todolist &lt;/VirtualHost&gt; </code></pre> </div>

求大神帮一下,eclipse 导入bootstrap无效果,该如何导入呢?

![图片说明](https://img-ask.csdn.net/upload/201709/10/1505057883_815368.png) <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bs/css/bootstrap.min.css"> <script type="text/javascript" src="${pageContext.request.contextPath }/bs/js/jquery.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/bs/js/bootstrap.min.js"></script> 看博客这种写法,但是不好使呀 我把bs文件放在了webcontent下面了,jsp文件也是

使用bootstrap框架建立modal对话框,对话框并不能够正常显示

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width;intital-scale=1" > <meta http-equiv="x-ua-compatible" content="IE=edge"> <title></title> <link href="bootstrap.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </div> <script src="jquery-2.1.1.js"></script> <script src="bootstrap.js"></script> </body> </html>

在YII2框架中为css创建绝对URL

<div class="post-text" itemprop="text"> <p>I need to convert the following link into absolute url form. Please help me to change this link.</p> <blockquote> <p>css/bootstrap-datepicker3.css</p> </blockquote> </div>

JavaScript的Bootstrap框架下又一个程序运行没反应,求助

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <form action="#" method="get"> <div class="container" > <div class="row"> <div class="col-xs-3"></div> <div class="col-xs-3 text-right">用户名:</div> <div class="col-xs-3 "> <input type="text" name="user" class="form-control" placeholder="User" id="use"> <span id="sp1"></span> </div> <div class="col-xs-3 "></div> </div> <div class="row"> <div style="height: 10px"></div> </div> <div class="row"> <div class="col-xs-3 "></div> <div class="col-xs-3 text-right">密码:</div> <div class="col-xs-3 "> <input type="password" name="password" class="form-control" id="pwd" placeholder="Password"></div> <div class="col-xs-3 "></div> </div> <div class="row"> <div style="height: 10px"></div> </div> <div class="row"> <div style="height: 10px"></div> </div> <div class="row text-center"> <div class="col-xs-12 "><button type="button" onclick="sub()">注册</button></div> </div> </div>> </form> </body> <script> function checkUse() { var use = document.getElementById("use").value; var regexp = /^\w{2,15}$/; return regexp.test(use); } function checkPwd() { var pwd = document.getElementById("pwd").value; var regexp = /^\d{6}$/; return regexp.test(pwd); } function sub() { var frm = document.getElementById("frm"); if(checkUse()&&checkPwd()){ frm.submit(); }else { } } </script> </html>

jquery以及bootstrap合并使用ajax有什么兼容性问题

框架里使用了jquery\bootstrap\baidutemplate,使用ajax的时候发现很多问题,好像IE8以下的都无法发送ajax请求 页面代码如下,为啥IE8以下ajax发送都发不出去,求大神指教,用了smarty框架,变量没有修改 ``` <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> <!-- Bootstrap --> <link href="/static/css/bootstrap.min.css" rel="stylesheet"> <link href="/static/css/lib.css" rel="stylesheet"> <link href="/static/css/main.css?20150208" rel="stylesheet"> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="/static/js/jquery-1.11.1.min.js"></script> <script src="/static/js/bootstrap.min.js"></script> <script src="/static/js/baiduTemplate.js"></script> </head> <script> $(document).ready(function(){ $.ajax({ type:"GET", url:"{!$api_url!}"+"/areas", dataType:"json", data:{}, success:function(data){ if(data.result ==0){ var i; var html = "" ; for(i=0;i<data.data.length;i++){ html +="<span class='area' id='"+data.data[i].id+"'>"+data.data[i].area+"</span>"; } $('#area-list').html(html); bind_area_click(); }else{ setTimeout(init_area,300); } }, error:function(data){ setTimeout(init_area,300); }, }); }); </script> <body> {!block name=base!} {!/block!} </body> </html> ```

YOLOv3目标检测实战:训练自己的数据集

YOLOv3目标检测实战:训练自己的数据集

150讲轻松搞定Python网络爬虫

150讲轻松搞定Python网络爬虫

实用主义学Python(小白也容易上手的Python实用案例)

实用主义学Python(小白也容易上手的Python实用案例)

我说我不会算法,阿里把我挂了。

不说了,字节跳动也反手把我挂了。

立方体线框模型透视投影 (计算机图形学实验)

计算机图形学实验 立方体线框模型透视投影 的可执行文件,亲测可运行,若需报告可以联系我,期待和各位交流

2019 AI开发者大会

2019 AI开发者大会

组成原理课程设计(实现机器数的真值还原等功能)

实现机器数的真值还原(定点小数)、定点小数的单符号位补码加减运算、定点小数的补码乘法运算和浮点数的加减运算。

C/C++跨平台研发从基础到高阶实战系列套餐

一 专题从基础的C语言核心到c++ 和stl完成基础强化; 二 再到数据结构,设计模式完成专业计算机技能强化; 三 通过跨平台网络编程,linux编程,qt界面编程,mfc编程,windows编程,c++与lua联合编程来完成应用强化 四 最后通过基于ffmpeg的音视频播放器,直播推流,屏幕录像,

MFC一站式终极全套课程包

该套餐共包含从C小白到C++到MFC的全部课程,整套学下来绝对成为一名C++大牛!!!

软件测试2小时入门

软件测试2小时入门

三个项目玩转深度学习(附1G源码)

三个项目玩转深度学习(附1G源码)

计算机图形学-球的光照模型课程设计

计算机图形学-球的光照模型,有代码完美运行,有课程设计书

Linux常用命令大全(非常全!!!)

Linux常用命令大全(非常全!!!) 最近都在和Linux打交道,感觉还不错。我觉得Linux相比windows比较麻烦的就是很多东西都要用命令来控制,当然,这也是很多人喜欢linux的原因,比较短小但却功能强大。我将我了解到的命令列举一下,仅供大家参考: 系统信息 arch 显示机器的处理器架构 uname -m 显示机器的处理器架构 uname -r 显示正在使用的内核版本 d...

因为看了这些书,我大二就拿了华为Offer

四年了,四年,你知道大学这四年我怎么过的么?

深度学习原理+项目实战+算法详解+主流框架(套餐)

深度学习系列课程从深度学习基础知识点开始讲解一步步进入神经网络的世界再到卷积和递归神经网络,详解各大经典网络架构。实战部分选择当下最火爆深度学习框架PyTorch与Tensorflow/Keras,全程实战演示框架核心使用与建模方法。项目实战部分选择计算机视觉与自然语言处理领域经典项目,从零开始详解算法原理,debug模式逐行代码解读。适合准备就业和转行的同学们加入学习! 建议按照下列课程顺序来进行学习 (1)掌握深度学习必备经典网络架构 (2)深度框架实战方法 (3)计算机视觉与自然语言处理项目实战。(按照课程排列顺序即可)

fakeLocation13.5.1.zip

fakeLocation13.5.1 虚拟定位 ios13.5.1的最新驱动下载,iPhone/iPad免越狱虚拟定位工具Location-cleaned驱动已更新

UnityLicence

UnityLicence

Python可以这样学(第一季:Python内功修炼)

Python可以这样学(第一季:Python内功修炼)

Python+OpenCV计算机视觉

Python+OpenCV计算机视觉

土豆浏览器

土豆浏览器可以用来看各种搞笑、电影、电视剧视频

【数据结构与算法综合实验】欢乐连连看(C++ & MFC)案例

这是武汉理工大学计算机学院数据结构与算法综合实验课程的第三次项目:欢乐连连看(C++ & MFC)迭代开发代码。运行环境:VS2017。已经实现功能:开始游戏、消子、判断胜负、提示、重排、计时、帮助。

php+mysql学生成绩管理系统

学生成绩管理系统,分三个模块:学生,教师和管理员。 管理员模块:负责学生、老师信息的增删改;发布课程信息的增删改,以便让学生选课;审核老师提交的学生成绩并且打印成绩存档;按照课号查询每个课号的学生成绩

多功能数字钟.zip

利用数字电子计数知识设计并制作的数字电子钟(含multisim仿真),该数字钟具有显示星期、24小时制时间、闹铃、整点报时、时间校准功能

推荐24个国外黄色网站欣赏

在中国清朝,明黄色的衣服只有皇子才有资格穿,慢慢的黄色在中国就成了高贵的颜色。在人们的色彩印象中,黄色也表现为暂停。所以当你的网页设计采用黄色的时候,会让人们在你的网页前停留。 黄色,就像橙色和红色,黄色也是一个暖色。它有大自然、阳光、春天的涵义,而且通常被认为是一个快乐和有希望的色彩。黄色是所有色相中最能发光的颜色,给人轻快,透明,辉煌,充满希望的色彩印象。 黄色是一个高可见的色...

u-boot-2015.07.tar.bz2

uboot-2015-07最新代码,喜欢的朋友请拿去

一学即懂的计算机视觉(第一季)

一学即懂的计算机视觉(第一季)

学生成绩管理系统(PHP + MYSQL)

做的是数据库课程设计,使用的php + MySQL,本来是黄金搭配也就没啥说的,推荐使用wamp服务器,里面有详细的使用说明,带有界面的啊!呵呵 不行的话,可以给我留言!

Windows版YOLOv4目标检测实战:训练自己的数据集

Windows版YOLOv4目标检测实战:训练自己的数据集

C++语言基础视频教程

C++语言基础视频教程

玩转Python-Python3基础入门

玩转Python-Python3基础入门

相关热词 c# 开发接口 c# 中方法上面的限制 c# java 时间戳 c#单元测试入门 c# 数组转化成文本 c#实体类主外键关系设置 c# 子函数 局部 c#窗口位置设置 c# list 查询 c# 事件 执行顺序
立即提问