Question

我是Twitter Bootstrap的新手。我正在网页上工作。我使用Bootstrap CDN时工作正常。当我删除Bootstrap CDN并尝试使用Twitter Bootstrap插件时，似乎无法访问Bootstrap插件。网页变为空白页面，只显示单词。

我在这里有两个问题：

如何检查我是否已成功安装Twitter Bootstrap插件。 Here是我安装它时所遵循的链接。我还按照网页上提供的documentation中的说明进行操作。
如何检查Twitter Bootstrap插件是否已成功加载？

以下是我的示例中的HTML代码。 当我删除元名称的注释=＆＃34; layout＆＃34;

＆＃13;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Comment Home</title>
		<!--meta name="layout" content="main"/-->
		<!--meta name="viewport" content="width=device-width, initial-scale=1"-->	
	</head>

  <body>
    <div class="container">
      <div class="header clearfix">
        <nav>
          <ul class="nav nav-pills pull-right">
            <li role="presentation" class="active"><a href="#">Home</a></li>
            <li role="presentation"><a href="#">About</a></li>
            <li role="presentation"><a href="#">Contact</a></li>
          </ul>
        </nav>
        <h3 class="text-muted">Online Library System</h3>
      </div>

      <div class="jumbotron">
        <h1>Kowledge is everything!</h1>
        <p class="lead">For the new member please sign up today to get the privilledge.</p>
        <p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
      </div>

      <div class="row marketing">
        <div class="col-lg-6">
          <h4>Top book</h4>
          <div class="col-lg-6">
          	<table class="table">
          		<tr>
          			<td>
          				<g:img dir="images" file="index.jpeg" width="110" height="140px"/>
          			</td>
          			<td>
          				<g:img dir="images" file="index2.jpeg" width="110" height="140px"/>
          			</td>
          			<td>
          				<g:img dir="images" file="index3.jpeg" width="110" height="140px"/>
          			</td>
          		</tr>
          	</table>
          	
          	
          	
          </div>
          <div class="col-lg-6">
          </div>          
        </div>

        <div class="col-lg-6">
          <h4>Regulation & Rules</h4>
          <p>Penalty charges will be required upon any overdue. </p>
          <p><i> *Charges will be diffence based on the book access level.</i></p>
          <hr>
          <h4>Operating Day</h4>
          <p>Monday - Sunday : 8:00AM to 10:00PM</p>
          <hr>

          <h4>Address</h4>
          <p>Perpustakaan Negara Malaysia (Ibu Pejabat)</p>
  		  <p>232, Jalan Tun Razak,</p>
  		  <p>50572 Kuala Lumpur, Malaysia.</p>
  	
        </div>
      </div>

      <footer class="footer">
        <p>&copy; 2015 Company, Inc.</p>
      </footer>

    </div> <!-- /container -->


    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  </body>
</html>

＆＃13;

这是我的main.gsp

＆＃13;

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"><!--<![endif]-->
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title><g:layoutTitle default="Grails"/></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="shortcut icon" href="${assetPath(src: 'favicon.ico')}" type="image/x-icon">
		<link rel="apple-touch-icon" href="${assetPath(src: 'apple-touch-icon.png')}">
		<link rel="apple-touch-icon" sizes="114x114" href="${assetPath(src: 'apple-touch-icon-retina.png')}">
  		<asset:stylesheet src="application.css"/>		
		<asset:javascript src="application.js"/>		    	
		<g:layoutHead/>
	</head>
	<body>
		<div id="grailsLogo" role="banner"><a href="http://grails.org"><asset:image src="grails_logo.png" alt="Grails"/></a></div>
		<g:layoutBody/>
		
		<div class="footer" role="contentinfo"></div>
		<div id="spinner" class="spinner" style="display:none;"><g:message code="spinner.alt" default="Loading&hellip;"/></div>

	</body>
</html>

＆＃13;

如何检查Twitter Bootstrap插件是否成功加载？

0 个答案: