初学Bootstrap

动态 0 289

摘要:

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

    百科介绍:Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。 [1]  Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 [2]  国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。

    Bootstrap是优秀的前端框架,我学了一个星期了,Bootstrap非常适合做响应式布局,不用你辛辛苦苦的考虑布局问题,也不用手机端还有电脑端分开写了,这从开发上着实省时省力下面这个案例就是实现了顶部导航,还有底部导航。

    代码如下:

   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式导航条</title>
	<meta http-equiv="X-UA-Compatible"  content="IE=edge"/>
	<meta name="viewport" content="width=device-width,initial-scale=1"/>
	<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<script src="bootstrap/js/jquery-2.1.1.min.js"></script>
	<!--[if lt IE 9]>
			 <script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"/>                
			 <script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"/>                
			 <script src=""/>                
	<![endif]-->
    <style>
        body{ 
			position:relative;
			margin-bottom: 60px;
		}
		.navbar-nav li{
			margin-left:30px;
		}
		html {
			position: relative;
			min-height: 100%;
		}
		
    </style>
</head>
<body>
	<nav class="nav navbar-inverse navbar-fixed-top">
	 <div class="container">
        <div class="navbar-header">
            <!--在移动端的时候导航条折叠起来,三横的样式出现,点击该样式可以显示或隐藏导航条上的内容-->
            <button class="navbar-toggle" data-toggle="collapse" data-target="#menu">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">logo</a>
        </div>
        <div id="menu" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li ><a href="#">one</a></li>
                <li><a href="#">two</a></li>
                <!--下拉菜单功能的实现-->
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    three<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">first</a></li>
                    <li><a href="#">second</a></li>
                </ul>
                </li>
				
            </ul>
        </div>
	 </div>
	</nav>
	<footer class="nav navbar-inverse navbar-fixed-bottom">
      <div class="container">
		<div class="row">
			<div class="col-sm-3">
				<a href="#">寻找了解</a>
			</div>
			<div class="col-sm-3">
				<a href="#">寻找了解</a>
			</div>
			<div class="col-sm-3">
				<a href="#">寻找了解</a>
			</div>
		</div>
	  </div>
    </footer>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>


    好了以后还有跟多时间学习,现在也只是了解一下怎么用了,其内部机制并没有去了解。

   

   

回帖
  • 消灭零回复
您没有登录请点击登录