suchen

Heim  >  Artikel  >  Web-Frontend  >  So verwenden Sie Bootstrap-Web-Framework_Javascript-Kenntnisse

So verwenden Sie Bootstrap-Web-Framework_Javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 09:00:113603Durchsuche

In diesem Artikel wird eine einfache Methode zur Verwendung des Web-Framework-Bootstraps als Referenz beschrieben. Der spezifische Inhalt lautet wie folgt:

Sie können Bootstrap direkt auf Baidu durchsuchen, um die chinesische Bootstrap-Website zu finden, und dann ist es am besten, den Quellcode herunterzuladen.

Nachdem der Download abgeschlossen ist, kopieren Sie dist/css/bootstrap.min.css in das Stammverzeichnis des Projekts.

Die spezifische Einführung und Verwendung des Moduls wird auf der chinesischen Website beschrieben. Hier ist ein einfaches Beispiel erstellt: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>使用bootStrap进行响应式布局</title>
  <link href="bootstrap.min.css" type="text/css" rel="stylesheet">
</head>
<body>

<!--导航条-->
<!--class中"navbar navbar-default是默认的颜色,而navbar-fixed-top是取消导航栏的圆角效果,role可以不要"-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

  <!--添加<div class="container"></div>是为了让界面有居中的效果-->
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">ProjectName</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Email">
        </div>
        <div class="form-group">
          <input type="password" class="form-control" placeholder="Password">
        </div>
        <button type="submit" class="btn btn-success" onclick="signin()">Sign in</button>
        <script>
          <!--这里是登录按钮的方法实现,可以根据需要自定义-->
          function signin(){

            alert("点击了登录");
          }

        </script>
      </form>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<!--巨幕-->

<div class="jumbotron">
  <div class="container">
    <h1>Hello, world!</h1>
    <p>这里是测试文 这里是测试文 这里是测试文 这里是测试文 这里是测试文 这里是测试文 这里是测试文 </p>

    <!-- btn-primary是对按钮外观样式的调整 btn-lg是对按钮样式的设定 btn-lg代表按钮的大小类型 其中 &raque是尖角号">>"-->
    <p><a class="btn btn-primary btn-lg" href="http://www.baidu.com" role="button">更多内容 &raquo;</a></p>

  </div>
</div>
<div class="container">

  <div class="row">
    <div class="col-md-4">
      <h2>Heading1</h2>
      <p>这里是测试文 这里是测试文 这里是测试文 这里是测试文 这里是测试文 这里是测试文 这里是测试文</p>
      <p><a class="btn btn-group-vertical btn-lg" role="btton">View details &raquo;</a></p>
    </div>
    <div class="col-md-4">
      <h2>Heading2</h2>
      <p>这里是测试文 这里是测试文 这里是测试文 这里是测试文 这里是测试文 这里是测试文 这里是测试文</p>
      <p><a class="btn btn-group-vertical btn-lg" role="button" href="http://www.baidu.com">跳转到百度 &raquo;</a></p>
    </div>
    <div class="col-md-4">
      <h2>Heading3</h2>
      <p>这里是测试文 这里是测试文 这里是测试文 这里是测试文 这里是测试文 这里是测试文 这里是测试文</p>
      <p><a class="btn btn-group-vertical btn-lg" role="button">View details &raquo;</a></p>
    </div>
  </div>
  <hr/>
  <foot>
    <!--"&copy;"是 &copy; 符号-->
    <p>&copy;company2014</p>
  </foot>
</div>
</body>
</html>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Verwendung von Bootstrap Fileinput-Datei-Upload-Komponenten_Javascript-FähigkeitenNächster Artikel：Detaillierte Erläuterung der Verwendung von Bootstrap Fileinput-Datei-Upload-Komponenten_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen