bootstrap入门

最新推荐文章于 2023-09-20 10:18:16 发布

吃西瓜的刘备

最新推荐文章于 2023-09-20 10:18:16 发布

阅读量361

点赞数

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/qinggezhiweini/article/details/48026591

版权

bootstrap 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

参考网站：http://tianmaying.com/tutorial/bootstrap-navbar
完成我的第一个基于bootstrap的页面，为bootstrap全局css组件练习
1.完成后的代码如下：

<html>
  <head>
      <meta charset="utf-8">
      <title>博客首页</title>
      <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel="stylsheet" href="./homepage.css">
      <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
      <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  </head>
  <body>
      <nav class="navbar navbar-inverse navbar-fixed-top">
          <div class="container">
              <div class="navbar-header">
                  <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar">
                      <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="#">Blog</a>
              </div>
              <div id="navbar" class="navbar-collapse collapse">
                  <ul class="nav navbar-nav">
                      <li><a href="#">我的首页</a></li>
                      <li><a href="#">账号管理</a></li>
                      <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                              账号管理
                              <span class="caret"></span>
                              <ul class="dropdown-menu">
                                  <li class="dropdown-header">管理</li>
                                  <li><a href="#">博客信息</a></li>
                                  <li><a href="#">创建博文</a></li>
                                  <li><a href="#">博客管理</a></li>
                                  <li class="divider"></li>
                                  <li class="dropdown-header">账号</li>
                                  <li><a href="#">博客信息</a></li>
                                  <li><a href="#">退出登录</a></li>
                              </ul>
                          </a>
                      </li>
                  </ul>
                  <form class="navbar-form navbar-right">
                      <div class="form-group">
                          <input type="text" class="form-control" placeholder="关键词">
                      </div>
                      <button type="submit" class="btn btn-default">搜索</button>
                  </form>
              </div>
          </div>
      </nav>
  </body>
</html>

总结：
2.在head里引入http://bootcss.com/ 网站下的bootstrap技术的css文件、jquery和js。
3.一个class属性可以有多个值，各个值由空格隔开。
4.参考“极客学院”，制定bootstrap的学习路径：（1）起步（2）全局CSS样式（3）组件（4）JavaScript插件（5）实例实战（6）进阶。后面要对各个部分进行学习和实验。
5.http://www.bootcss.com/ 这个网站是学习bootstrap的一个很好的中文网站。
6.关于bootstrap里css部分我的感觉是，那么多标签，如何快速记住