Web 开源 CSS 框架 Bootstrap 文档、Bootstrap 下载

本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划

Bootstrap是一款由Twitter推出的开源CSS框架,它的核心是由一系列用于Web前端开发的工具包组成。Bootstrap基于HTML、CSS和JavaScript,是一款非常适合敏捷Web开发的CSS框架,Bootstrap同时也是Github上最热门的开源项目之一。

Bootstrap的特点

  • 强大的开发团队。Bootstrap由Twitter的设计师Mark Otto和Jacob Thornton合作开发,Bootstrap开发团队也是国际上公认最优秀的前端开发团队之一。
  • 极简的框架。Bootstrap的设计非常简单,这就意味着,无论你是高级的前端设计师,还是普通的程序员,都能够很快地掌握Bootstrap的开发流程和开发方式。
  • 跨设备、跨浏览器最初设想的Bootstrap只支持现代浏览器,不过新版本已经能支持所有主流浏览器,甚至包括IE7。从Bootstrap 2开始,提供对平板和智能手机的支持。
  • 完美的响应式设计。Bootstrap支持响应式布局,可以智能识别客户端浏览器的类型,从而构造适应当前设备前端布局,这一切都是全自动的。
  • 支持HTML5和CSS3。Bootstrap支持所有的HTML5标签和CSS3属性。
  • 使用LESS构建动态样式。当传统的枯燥CSS写法止步不前时,LESS技术横空出世。LESS使用变量、嵌套、操作、混合编码,帮助用户花费很小的时间成本,编写更快、更灵活的CSS。

Bootstrap组件

Bootstrap的强大之处在于拥有丰富的组件,我们可以利用这些现有的组件快速地搭建出自己想要的界面。这些组件包括导航、导航条、面包屑、分页、下拉菜单、按钮组、按钮下拉菜单、排版、缩略图、警告对话框、进度条等。

利用Bootstrap构建一个简单的下拉菜单导航

代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Bootstrap dropdown with navbar example</title>
    <link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />

</head>
<body>
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <ul class="nav">
                    <a class="brand" href="#">w3cschool</a>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li class="dropdown" id="accountmenu">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">PHP</a></li>
                            <li><a href="#">MySQL</a></li>
                            <li class="divider"></li>
                            <li><a href="#">JavaScript</a></li>
							<li><a href="#">HTML5</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container-fluid">
     <h1>Dropdown Example</h1>
    </div>
	<script type="text/javascript" src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
	<script type="text/javascript" src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.dropdown-toggle').dropdown();
        });
   </script>
</body>
</html>

利用Bootstrap构建一个简单的按钮组合

代码:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 嵌套的按钮组</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="btn-group">
  <button type="button" class="btn btn-default">按钮 1</button>
  <button type="button" class="btn btn-default">按钮 2</button>

  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" 
      data-toggle="dropdown">
      下列
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">下拉链接 1</a></li>
      <li><a href="#">下拉链接 2</a></li>
    </ul>
  </div>
</div>

</body>
</html>

利用Bootstrap构建一个彩色的进度条

代码

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 条纹的进度条</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="progress progress-striped">
   <div class="progress-bar progress-bar-success" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 90%;">
      <span class="sr-only">90% 完成(成功)</span>
   </div>
</div>
<div class="progress progress-striped">
   <div class="progress-bar progress-bar-info" role="progressbar"
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 30%;">
      <span class="sr-only">30% 完成(信息)</span>
   </div>
</div>
<div class="progress progress-striped">
   <div class="progress-bar progress-bar-warning" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 20%;">
      <span class="sr-only">20% 完成(警告)</span>
   </div>
</div>
<div class="progress progress-striped">
   <div class="progress-bar progress-bar-danger" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 10%;">
      <span class="sr-only">10% 完成(危险)</span>
   </div>
</div>

</body>
</html>

总结

除了上面的一些组件外,利用Bootstrap还可以非常轻松的构建一些网页常用组件。如果你对Bootstrap感兴趣,你也可以前往其官方网站了解更多信息。

本文链接:http://www.codeceo.com/article/bootstrap-web-css-framework.html
本文作者:码农网 – 小峰
原创作品,转载必须在正文中标注并保留原文链接和作者等信息。]

相关文章

在文章中找不到问题答案?您还可以

前往问答社区提问

关注我们的微博

付费投稿计划
点击查看详情