javascript - bootstrap 会干扰其他 JavaScript 吗？就像设置 cookie(); 一样？

标签 javascript css forms twitter-bootstrap cookies

我让这个工作得很好，然后我去给它应用了 bootstrap。现在不是了。

这是我的一个小博客元素的管理页面，我在这里从头开始学习 PHP。这最初是来自 phptoys 的 microNews。我做了很多更改，是的，代码可以更整洁。 (我正在考虑制作一个“功能”页面，但那是以后的事情)

<?php

if (isset($_COOKIE['submitdate'])) {
$submitDate=$_COOKIE['submitdate'];
}
else {
$submitDate= date('Y-m-d');

}




if (isset($_COOKIE['newstitle'])) {
$newsTitle=$_COOKIE['newstitle'];
} else {
$newsTitle="News Title";

 }


 //Set no caching
 header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
 header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); 
 header("Cache-Control: no-store, no-cache, must-revalidate"); 
 header("Cache-Control: post-check=0, pre-check=0", false);
 header("Pragma: no-cache");




 //create or edit file, protect this page from invalid users

 if (!isset($_POST['submit'])) {
 require_once('protector.php'); 

  ?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"       "DTD/xhtml1-transitional.dtd">              
 <html>
 <head>
 //bootstrap stuff

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head      content must come *after* these tags -->  <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">


     <title>Basic Boring Blog</title>
    <link href="style/bootstrap.css" rel="stylesheet" type="text/css" />
     <script language="javascript" type="text/javascript" src="js/tiny_mce.js">                </script>
        <script language="javascript" type="text/javascript">
       tinyMCE.init({
      mode : "textareas",
      theme : "advanced",
      theme_advanced_buttons3 : "",
      theme_advanced_toolbar_location : "top",
      theme_advanced_toolbar_align : "left",

    });
</script>



 <script language='javascript' type='text/javascript'>

 //delete that damn cookie

 function click_agree()
 {
 document.cookie = 'newstitle = $newsTitle  ; expires =  2 Aug 1970 20:47:11 UTC;  path=/';
 document.cookie = 'submitdate = $submitDate ; expires = 2 Aug 1970 20:47:11 UTC;  path=/';


 }
 </script> 



 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">   </script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">  </script>
<![endif]-->
</head>

<body >

//testing to see what the code knows

//since bootstrap additions, this only outputs "News Title"

<?php echo $newsTitle;?>


</br>

// this outputs nothing

<?php echo $_COOKIE['newstitle'];?>




 <?php 
  $filename = $submitDate.$newsTitle;
  ?>

   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
   <script    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">    </script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
   <script src="js/bootstrap.min.js"></script>



  <div id="main2">
  <?php include 'nav.php';
  ?></div>





 <div id="main">





<?php

 //look into the specific file and see what the heck is there


$newsData = file("news/news/".$filename.".txt");


   $newsTitle  = $newsData[0];
     $submitDate = $newsData[1];    
     unset ($newsData['0']);
     unset ($newsData['1']);

     $newsContent = "";
     foreach ($newsData as $value) {
           $newsContent .= $value;
     }




      ?>
     <div class="container-fluid">
     <div class="well">
     <div class="center-block">
     <div class="form-group">
    <form action='<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>'   method='post' >
    <label>News Title</label>
    <br/>
    <input type='text' name='title' size='40' value="<?php echo $newsTitle;?>"/> 
     <br/>
     <br/>
     <label>Write your thoughts here</label>
    <br/>
    <textarea  name='newstext' rows='15' cols='67'  /><?php echo   $newsContent;?></textarea><br/>
    <div class="pull-right"><input type='submit' name='submit' value='Save' onClick='click_agree()' /></div>


 <br/>
  <br/>
   <br/>

 </form> </div></div>



 </div></div>
  </div></div>
<?php include 'footer.php';
 ?> 
 </body>   

 <?php } else {



  //make sure that variables are declared and then post this thing already

  $newsTitle   = isset($_POST['title']) ? $_POST['title'] : 'Untitled';
  if (isset($_COOKIE['submitdate'])) {
   $submitDate=$_COOKIE['submitdate'];
   } else {
   $submitDate= date('Y-m-d');
   $newsContent = isset($_POST['newstext']) ? $_POST['newstext'] : 'No content';

  $filename = $submitDate.$newsTitle;
  $f = fopen('news/news/'.$filename.".txt","w+"); 

 //the page that will be made
  $written ="

  <html>
  <head>
  <meta charset='utf-8'>
   <meta http-equiv='X-UA-Compatible' content='IE=edge'>
   <meta name='viewport' content='width=device-width, initial-scale=1'>
    <!-- The above 3 meta tags *must* come first in the head; any other head     content must come *after* these tags -->
   <link href='style/bootstrap.css' rel='stylesheet' type='text/css' />
   <meta name='viewport' content='width=device-width, initial-scale=1'>
        <title>Basic Boring Blog</title>
        <link href='http://pluckzilla.byethost32.com/microblog/microNews/style/bootstrap.css'   rel='stylesheet' type='text/css' />


      <script language='javascript' type='text/javascript'>
      function click_agree()
 {
document.cookie = 'newstitle = $newsTitle; expires = 2 Aug 2017 20:47:11 UTC;  path=/';
 document.cookie = 'submitdate = $submitDate; expires = 2 Aug 2017 20:47:11 UTC;  path=/';

 window.location.href =    'http://www.pluckzilla.com/microblog/microNews/admin.php';
  }
</script> 






  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src='https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js'>  </script>
  <script src='https://oss.maxcdn.com/respond/1.4.2/respond.min.js'></script>
 <![endif]-->


 </head>

 <body >



   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script   src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'>    </script>
   <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src='js/bootstrap.min.js'></script>


 <div id=\"main2\">

 <?php include 'nav.php';
 ?> 
  </div>






 <div>
 <div id='main' class='pull-right'>

 <span='title'><h1>$newsTitle</h1></span>
 <span='date'>$submitDate</span>
  <span><p>$newsContent</p></span>

  <button name='edit' onClick='click_agree()'><span class='glyphicon glyphicon-edit' aria-hidden='true'></span></button></div>

我有这个管理页面创建的新页面使用 JavaScript () 加载 2 个 cookie，然后重定向回管理页面。然后，cookie 将用于使用 php 调用上述创建的页面，并将其加载到表单上以进行编辑。最后，表单按钮将删除 cookie。

基本上，我启用了管理页面来编辑页面，而不仅仅是创建它们。

然后我添加了 bootstrap，因为它太棒了。现在我的管理页面不起作用。

我一定是做错了什么，但我查看了代码，除了 Bootstrap 位之外，一切看起来都和以前一样。我删除了一些 Bootstrap ，主要是从表单中删除，因为它是这个工作的关键，但它仍然不起作用。

...最重要的是，我的“实时”服务器上的管理页面代码必须与上面的表格略有不同!作品!只是!美好的!在我的本地主机上。(基于 Windows 7，wamp)。我复制了在服务器上运行的代码，并在添加 Bootstrap 位时小心不要更改它。我无法在本地测试它，唉，我没有成功。

最佳答案

简单的答案是

No, CSS does not interfere with JavaScript.

JavaScript 本质上能够更改页面中的内容，包括 CSS，有时可能会使 CSS 看起来好像不起作用，而实际上它确实起作用了。 (除非你有语法错误，否则 CSS 始终有效并且是完全可以预测的。如果它不适用于某个元素，则意味着它被另一个 CSS 规则或你不知道的内联样式覆盖)。一个非常简单的方法来检查你的元素是否工作(或不)加载 Bootstrap 的 CSS 是在页面的 head 标签中添加这一行(首先在你的本地机器上尝试)并删除所有其他 Bootstrap 引用:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

但是，Bootstrap 也带有 JavaScript。这可能会干扰您页面中的其他 JavaScript，尽管除非您在页面的不同插件/小部件中使用不同版本的 Bootstrap，否则通常不会。从我在上面发布的代码中看到的，您正在使用 Bootstrap 中的 CSS 和 Javascript。所以我想你的问题应该重新表述。

您能否详细解释一下在您的远程服务器上究竟有什么问题而在您的本地机器上没有问题？这可能与 JavaScript 无关。可能与两台机器的Apache或php服务差异有关。

关于javascript - bootstrap 会干扰其他 JavaScript 吗？就像设置 cookie(); 一样？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30879982/

上一篇：javascript - 未捕获范围错误 : Maximum call stack size exceeded 故障排除

下一篇：javascript - Angular 如何在 $routeProvider 中捕获特定的 url

相关文章：

javascript - Sequelize - 两个 ID 上的双连接表

javascript - 如何动态创建 ngInclude 指令？

jquery - 垂直对齐 <span> 或 <div>

javascript - node.js 中奇怪的 JSON.parse() 错误

html - 父 div 对于子 div 来说太小了

css - 图片 URL 未显示在我的主页中

python - flask 同一页面上的多个表单

html - 名称为 ='' 的无效表单控件不可聚焦。没有任何必需或隐藏的输入

php - 需要一些帮助来添加一些验证码联系表

javascript - 如何在 Javascript 代码中使用 REST API 从 QnAMaker 获取问题和答案

©2024 IT工具网  联系我们