Question

我无法为我的网站设置样式...例如<pre>标签。

我什么都不做。我试图设计whois结果的样式，我尝试将它包装在div中，并设计样式，仅设置预标签样式，设计所有内容。我似乎无法让它发挥作用。我希望我错过了一些愚蠢的东西。您可以从CSS中看到我尝试过多种组合（尝试将它们全部删除，只有前置）

导航栏：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="javascript.js"></script>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>CWCS Domain Checker Tool</title>
</head>
<body>
<!--- This Keeps the navbar from staying right near top -->
<div class="header">
</div>

<!---- Nav bar, Using bootstrap ----->
<nav class="navbar navbar">
  <div class="container-fluid">
    <div class="navbar-header">
       <div class="nav-bar-logo">
      <a href="index.php" class="navbar-left"><img src="images/cwcs-logo.png"></a>
        </div>
      </div>
    <div class="nav-list-container">
       <ul class="nav navbar-nav">
      <li><a href="domaindiagnostics.php">Domain Diagnostics</a></li>
      <li><a id="sd" href="#">Server Diagnostics</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Second Line Tools
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a id="dc" href="#">Daily Checklist</a></li>
          <li><a id="bt" href="#">Backup Tracker</a></li>
          <li><a id="tl" href="#">Task List</a></li>
        </ul>
      </li>
    </ul>
    </div>
  </div>
</nav>
<!------- End of nav bar ---->

主页 -

<?php
## Includes nav bar
include('navbar.php');
include('phpfiles/domainclass.php');

if (isset($_GET['userInput'])) 
{
    $domainName = $_GET['userInput'];
}

?>

<!---- The input form ---->
<form class="form">
<div class="domainquery">
  <div class="input-group">
      <input id="domainName" name="userInput" class="form-control input-md" type="text" placeholder="example.com" value="<?php if (isset($domainName)) echo $domainName ?>" autocomplete="off" autofocus>
        <div class="input-group-btn">
          <button type="submit" class="btn btn-primary btn-md">Query Domain</button>
        </div>
  </div>
</div>
</form>
<!---- End of input form --->

<!---- start of content --->
<div class ="container-fluid">

<!----- Check of the variable has been set before showing --->
  <?php 
    ##checks if the variable name $domainName is set, before loading everything below
    if (isset($domainName)): 
  ?>
  <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">

  <h3>DNS Records </h3>
          <div class="dnscontain">
                  <script>
                      // Loads the return vaue of the call into the "dnscontain" div.
                      $(".dnscontain").load("ajaxhandler.php", 
                      {  // ajax call to pass variable to ajax handler, which then decides what to do with it        
                               d: "<?php echo $domainName ?>",
                               q: 'dns'
                      });
                    </script> 

          </div>

  <h3>SSL Result</h3>


  <h3>NMAP Result</h3>
          <div class="nmapcontain">
                    <script>
                      // Loads the return vaue of the call into the "dnscontain" div.
                      $(".nmapcontain").load("ajaxhandler.php", 
                      {  // ajax call to pass variable to ajax handler, which then decides what to do with it        
                               d: "<?php echo $domainName ?>",
                               q: 'nmap'
                      });
                    </script> 
          </div>
  <h3>PING Result</h3>
                  <div class="pingcontain">
                    <script>
                      // Loads the return vaue of the call into the "dnscontain" div.
                      $(".pingcontain").load("ajaxhandler.php", 
                      {  // ajax call to pass variable to ajax handler, which then decides what to do with it        
                               d: "<?php echo $domainName ?>",
                               q: 'ping'
                      });
                    </script> 
                  </div>
<!--- Closing div tag for left column -->        
</div>

<!--- starting right column -->
  <div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
        <h3>WHOIS Result</h3>
          <div class="whoiscontain">
                    <script>
                            // Loads the return vaue of the call into the "whoiscontain" div.
                           $(".whoiscontain").load("ajaxhandler.php", 
                            {  // ajax call to pass variable to ajax handler, which then decides what to do with it      
                               d: "<?php echo $domainName ?>",
                               q: 'whois'
                            });
                    </script> 
          <!--Whoiscontain div end -->          
          </div>
 <!--- right column div end -->         
  </div>

<!--- closing div tag for 1st row --->
</div>
 </div> 
<!---- ends the check on if the variable is set -->          
<?php
###End the "IF" check 
endif 
?>

<!---- Closing div tag for container-fluid --->
</div> 


</body>
</html>

Ajax返回页面 -

<?php
include 'domainclass.php';

$result = domain::getWhois($domainName);
?>

<pre class="whois">  <?php echo $result ?> </pre>;

样式表

.header
{
  margin:1%;
}


.domainquery
{
    margin-bottom:3%;
    padding:40px 50px;
}

.nav-bar-logo
{
  margin-right:20px;
  padding-right:20px;
}

.table
{
  font-size:5px;
}
pre .whois
{
white-space:pre-wrap;
background-color:black;
color:white;
word-wrap: break-word;
}

.whoiscontain
{
white-space:pre-wrap;
background-color:black;
width:100%;
color:white;
word-wrap: break-word;
}

pre
{
white-space:pre-wrap;
background-color:black;
color:white;
word-wrap: break-word;

}

请求页面的HTML输出（忽略样式表位于引导程序样式表之上，正在尝试。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="javascript.js"></script>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>CWCS Domain Checker Tool</title>
</head>
<body>
<!--- This Keeps the navbar from staying right near top -->
<div class="header">
</div>

<!---- Nav bar, Using bootstrap ----->
<nav class="navbar navbar">
  <div class="container-fluid">
    <div class="navbar-header">
       <div class="nav-bar-logo">
      <a href="index.php" class="navbar-left"><img src="images/cwcs-logo.png"></a>
        </div>
      </div>
    <div class="nav-list-container">
       <ul class="nav navbar-nav">
      <li><a href="domaindiagnostics.php">Domain Diagnostics</a></li>
      <li><a id="sd" href="#">Server Diagnostics</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Second Line Tools
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a id="dc" href="#">Daily Checklist</a></li>
          <li><a id="bt" href="#">Backup Tracker</a></li>
          <li><a id="tl" href="#">Task List</a></li>
        </ul>
      </li>
    </ul>
    </div>
  </div>
</nav>
<!------- End of nav bar ---->

<!---- The input form ---->
<form class="form">
<div class="domainquery">
  <div class="input-group">
      <input id="domainName" name="userInput" class="form-control input-md" type="text" placeholder="example.com" value="lomcn.org" autocomplete="off" autofocus>
        <div class="input-group-btn">
          <button type="submit" class="btn btn-primary btn-md">Query Domain</button>
        </div>
  </div>
</div>
</form>
<!---- End of input form --->

<!---- start of content --->
<div class ="container-fluid">

<!----- Check of the variable has been set before showing --->
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">

  <h3>DNS Records </h3>
          <div class="dnscontain">
                  <script>
                      // Loads the return vaue of the call into the "dnscontain" div.
                      $(".dnscontain").load("ajaxhandler.php", 
                      {  // ajax call to pass variable to ajax handler, which then decides what to do with it        
                               d: "lomcn.org",
                               q: 'dns'
                      });
                    </script> 

          </div>

  <h3>SSL Result</h3>


  <h3>NMAP Result</h3>
          <div class="nmapcontain">
                    <script>
                      // Loads the return vaue of the call into the "dnscontain" div.
                      $(".nmapcontain").load("ajaxhandler.php", 
                      {  // ajax call to pass variable to ajax handler, which then decides what to do with it        
                               d: "lomcn.org",
                               q: 'nmap'
                      });
                    </script> 
          </div>
  <h3>PING Result</h3>
                  <div class="pingcontain">
                    <script>
                      // Loads the return vaue of the call into the "dnscontain" div.
                      $(".pingcontain").load("ajaxhandler.php", 
                      {  // ajax call to pass variable to ajax handler, which then decides what to do with it        
                               d: "lomcn.org",
                               q: 'ping'
                      });
                    </script> 
                  </div>

    <h3>Tracert Result</h3>
                  <div class="tracecontain">
                    <script>
                      // Loads the return vaue of the call into the "dnscontain" div.
                      $(".tracecontain").load("ajaxhandler.php", 
                      {  // ajax call to pass variable to ajax handler, which then decides what to do with it        
                               d: "lomcn.org",
                               q: 'trace'
                      });
                    </script> 
                  </div>
<!--- Closing div tag for left column -->        
</div>

<!--- starting right column -->
  <div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
        <h3>WHOIS Result</h3>
          <div class="whoiscontain">
                    <script>
                            // Loads the return vaue of the call into the "whoiscontain" div.
                           $(".whoiscontain").load("ajaxhandler.php", 
                            {  // ajax call to pass variable to ajax handler, which then decides what to do with it      
                               d: "lomcn.org",
                               q: 'whois'
                            });
                    </script> 
          <!--Whoiscontain div end -->          
          </div>
 <!--- right column div end -->         
  </div>

<!--- closing div tag for 1st row --->
</div>
 </div> 
<!---- ends the check on if the variable is set -->          

<!---- Closing div tag for container-fluid --->
</div> 


</body>
</html>

Answer 1

来设计引导程序，你可以骑自行车样式或制作自己的新款式。

他们建议不要直接编辑bootstrap .CSS，因此对bootstrap的更新不会改变你的设计。

将你自己的样式表调用放在bootstrap调用之下是正确的，所以你的样式表会覆盖。

即使您的风格过度骑行，您也可能无法超越具有！important标签的引导规则。您可以使用样式表中的引导类和ID来制作新规则，使用您自己的！重要的是在必要时强制执行它们，或者为您的样式添加其他类：

a bit of code

    was `<div class="col-md-12">`

    make `<div class="col-md-12 myCol">`

然后在样式表上为

制定规则

.myCol { 这些风格应该坚持下去 }

Cant style Bootstrap和普通元素

1 个答案: