bootstrap网页框架的使用方法
本文为大家分享了网页框架bootstrap的简单使用方法，供大家参考，具体内容如下
直接百度bootstrap可以搜到bootstrap中文网站，然后最好建议选择下载源码。
下载完成后，将dist/css/bootstrap.min.css复制到项目的根目录下。
具体的模块介绍和使用在中文网站上都有讲述，这里以制作的一个简单示例为例：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>使用bootStrap进行响应式布局</title>
<linkhref="bootstrap.min.css"type="text/css"rel="stylesheet">
</head>
<body>
<!--导航条-->
<!--class中"navbarnavbar-default是默认的颜色,而navbar-fixed-top是取消导航栏的圆角效果,role可以不要"-->
<navclass="navbarnavbar-inversenavbar-fixed-top"role="navigation">
<!--添加<divclass="container"></div>是为了让界面有居中的效果-->
<divclass="container">
<divclass="navbar-header">
<buttontype="button"class="navbar-togglecollapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1"aria-expanded="false">
<spanclass="sr-only">Togglenavigation</span>
<spanclass="icon-bar"></span>
<spanclass="icon-bar"></span>
<spanclass="icon-bar"></span>
</button>
<aclass="navbar-brand"href="#">ProjectName</a>
</div>
<!--Collectthenavlinks,forms,andothercontentfortoggling-->
<divclass="collapsenavbar-collapse"id="bs-example-navbar-collapse-1">
<formclass="navbar-formnavbar-right"role="search">
<divclass="form-group">
<inputtype="text"class="form-control"placeholder="Email">
</div>
<divclass="form-group">
<inputtype="password"class="form-control"placeholder="Password">
</div>
<buttontype="submit"class="btnbtn-success"onclick="signin()">Signin</button>
<script>
<!--这里是登录按钮的方法实现,可以根据需要自定义-->
functionsignin(){
alert("点击了登录");
}
</script>
</form>
</div><!--/.navbar-collapse-->
</div><!--/.container-fluid-->
</nav>
<!--巨幕-->
<divclass="jumbotron">
<divclass="container">
<h1>Hello,world!</h1>
<p>这里是测试文这里是测试文这里是测试文这里是测试文这里是测试文这里是测试文这里是测试文</p>
<!--btn-primary是对按钮外观样式的调整btn-lg是对按钮样式的设定btn-lg代表按钮的大小类型其中&raque是尖角号">>"-->
<p><aclass="btnbtn-primarybtn-lg"href="http://www.baidu.com"role="button">更多内容»</a></p>
</div>
</div>
<divclass="container">
<divclass="row">
<divclass="col-md-4">
<h2>Heading1</h2>
<p>这里是测试文这里是测试文这里是测试文这里是测试文这里是测试文这里是测试文这里是测试文</p>
<p><aclass="btnbtn-group-verticalbtn-lg"role="btton">Viewdetails»</a></p>
</div>
<divclass="col-md-4">
<h2>Heading2</h2>
<p>这里是测试文这里是测试文这里是测试文这里是测试文这里是测试文这里是测试文这里是测试文</p>
<p><aclass="btnbtn-group-verticalbtn-lg"role="button"href="http://www.baidu.com">跳转到百度»</a></p>
</div>
<divclass="col-md-4">
<h2>Heading3</h2>
<p>这里是测试文这里是测试文这里是测试文这里是测试文这里是测试文这里是测试文这里是测试文</p>
<p><aclass="btnbtn-group-verticalbtn-lg"role="button">Viewdetails»</a></p>
</div>
</div>
<hr/>
<foot>
<!--"©"是©符号-->
<p>©company2014</p>
</foot>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助。