bootstrap--灵活的web工具

    bootstrap是什么?

    bootstrap是目前最流行的开发框架之一，它是基于HTML、css开发出来的框架，并且提供了很多的css和javascript的效果，非常便于网页设计开发人员上手。

    bootstrap的优势？

    1、包含丰富的css和jquery插件

    2、拥有非常丰富的预定义式样式表

    3、灵活（个人认为这是它最大的特点）

    为什么说bootstrap灵活呢？

    因为它可以实时调整页面布局，即响应式布局，无论制作的网站是被显示在电脑上、ipad上或者android平板上、或者手机上网页都会最适合的方式去展示。因为bootstrap为不同的屏幕尺寸分别定义了四种情况，小屏手机设备、小屏平板设备、中等屏幕电脑、大屏幕桌面在bootstrap的样式中，前缀分别是xs，sm，md，lg在不同的插件或者自定义样式表中应用设置可以灵活的组合出合适的页面。

    如何使用？

        1、登录bootstrap中文网站

        2、下载bootstrap3文档，如下图：

            

        3、将解压后的文件，直接添加到项目。

        4、引用相关文件，制作页面

    DMEO

        首先，预览一下我们要制作的效果

       

        1、引用相关文件

        

<strong><span style="font-size:18px;">    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no" />
    <link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="../../Scripts/jquery-1.7.1.min.js"></script>
    <script src="../../bootstrap/js/bootstrap.min.js"></script>
</span></strong>

        注意：这里的第一句话非常重要，如果没有这句话将不能自动适应小屏设备。还就就是注意2/3/4句话的顺序。

        2、实现代码

        

<strong><span style="font-size:18px;"><div class="container-fluid">
	<div class="row-fluid">
		<div class="span12">
			<div class="navbar">
				<div class="navbar-inner">
					<div class="container-fluid">
						 <a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a> <a href="#" class="brand">网站名</a>
						<div class="nav-collapse collapse navbar-responsive-collapse">
							<ul class="nav">
								<li class="active">
									<a href="#">主页</a>
								</li>
								<li>
									<a href="#">链接</a>
								</li>
								<li>
									<a href="#">链接</a>
								</li>
								<li class="dropdown">
									 <a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉菜单<strong class="caret"></strong></a>
									<ul class="dropdown-menu">
										<li>
											<a href="#">下拉导航1</a>
										</li>
										<li>
											<a href="#">下拉导航2</a>
										</li>
										<li>
											<a href="#">其他</a>
										</li>
										<li class="divider">
										</li>
										<li class="nav-header">
											标签
										</li>
										<li>
											<a href="#">链接1</a>
										</li>
										<li>
											<a href="#">链接2</a>
										</li>
									</ul>
								</li>
							</ul>
							<ul class="nav pull-right">
								<li>
									<a href="#">右边链接</a>
								</li>
								<li class="divider-vertical">
								</li>
								<li class="dropdown">
									 <a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉菜单<strong class="caret"></strong></a>
									<ul class="dropdown-menu">
										<li>
											<a href="#">下拉导航1</a>
										</li>
										<li>
											<a href="#">下拉导航2</a>
										</li>
										<li>
											<a href="#">其他</a>
										</li>
										<li class="divider">
										</li>
										<li>
											<a href="#">链接3</a>
										</li>
									</ul>
								</li>
							</ul>
						</div>
						
					</div>
				</div>
				
			</div>
		</div>
	</div>
</div></span></strong>

    Bootstrap的优势在于，可以适应各种设备，这种灵活性性使它应用广泛。