How to use bootstrap web framework_javascript skills-JS Tutorial-php.cn

How to use bootstrap web framework_javascript skills

WBOY

Release： 2016-05-16 09:00:11

Original

3621 people have browsed it

this article shares a simple method of using the web framework bootstrap for your reference. the specific content is as follows

you can directly search the bootstrap chinese website on baidu bootstrap, and then it is best to choose to download the source code.

after the download is complete, copy dist/css/bootstrap.min.css to the root directory of the project.

the specific module introduction and use are described on the chinese website. here is a simple example produced:

<!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">更多内容 »</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 »</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">跳转到百度 »</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 »</a></p>
    </div>
  </div>
  <hr/>
  <foot>
    <!--"©"是 © 符号-->
    <p>©company2014</p>
  </foot>
</div>
</body>
</html>

Copy after login

the above is the entire content of this article, i hope it will be helpful to everyone's study.