Bootstrap

最新推荐文章于 2024-08-10 07:25:09 发布

邹尚雄

最新推荐文章于 2024-08-10 07:25:09 发布

阅读量303

点赞数

简介

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。阅读更多有关bootstrap

前端框架这个名词并不能直观地描述bootstrap的具体内容，它其实就是包含扁平化设计ui+响应式栅格系统+css样式+基本html组件+js组件+其他实用工具在内的一个前端工具集合。

使用入门

想要学会使用boostrap第一步当然是阅读它的文档，文档分为四个主要部分：

起步

这里介绍了如何在你的网页中引入并开始使用bootstrap，安装bootstrap有很多种方法，初学者只需要记住下面这种最基本的方式就好，如果你联网很方便，可以直接使用CDN链接，如果需要离线使用，也可以下载bootstrap到本地并把地址替换成你的本地路径啦。

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

起步里还提供了一个很有用的基本模版：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

如果我们想要以最快的速度开始使用，直接复制这一段代码就可以开始啦。在页面的顶部引入css底部引入js是编写html的基本常识，这样可以保证页面最自然地载入。

同样它还很贴心地提供了一些例如带导航栏的页面、着陆页、控制台、登录页等最常用的页面模版，这些代码你也可以直接复制使用。

全局css样式

这个部分的内容介绍了bootstrap的柵格系统，bootstrap就是靠这一套系统实现响应式的。响应式可以理解为同一个页面可以依据设备屏幕或浏览器窗口的大小自行适应布局。如果你想要一个直观的体会，可以试着打开使用bootstrap的网页并拖动你浏览器窗口的大小，观察页面会如何变化。

除此之外这里还介绍了bootstrap文本、按钮、表单、表格等基本html元素的样式。使用Bootstrap编写网页，就好像P图拥有了美图秀秀一样，你不再需要仔细钻研色相包和对比度，只需要给照片挑选一个滤镜就可以了，在Bootstrap中创建一个按钮，不需要你考虑背景色边框形状字体大小，只需要给<button>标签加一个class="btn btn-default"的属性就大功告成啦。

基本组件

这里的内容包括bootstrap提供的图标、导航栏、菜单等等构成页面的基本组件。很多的代码示例都可以直接复制来使用。

js组件

这部分是一些带动画效果的页面组件，例如模态框、下拉菜单、弹出框、轮播图等。