前段开发框架介绍--Bootstrap

Bootstrap是简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。目前基于Bootstrap构建的网站也有很多优秀的例子。所有的JavaScript插件都依赖jQuery库。

Bootstrap中的HTML、CSS和JS适用于各类设备, 不过它们可以被概括成几个类别,请看 http://v2.bootcss.com/index.html顶部的导航条。
文档章节
脚手架
全局性的样式文件,用于重置背景、链接样式、栅格系统等,并包含两个简单的布局结构。

基本CSS样式
常见的HTML元素 -- 如排版、代码、表格、表单、和按钮的样式。还包括 Glyphicons, 一个非常棒的图标集。

组件
常见界面组件 -- 如标签、pill、导航、警告、页面标题的基本样式。

JavaScript插件
和组件类似,这些Javascript插件用来实现提示(tooltip)、弹出框(popover)、模态对话框(modal)等具有交互性的组件。

想要使用Bootstrap, 需要包含相应的 CSS and JS 文件,然后就可以开始用Bootstrap开发任何网站和应用程序了!
<!DOCTYPE html><!--页面设置为HMTL5文档类型-->
<html>
  <head>
    <title>Bootstrap 101 Template</title>
<!--支持移动设备:确保适当的绘制和触屏缩放添加viewport元数据标签,width=device-width默认是设备的宽度,initial-scale=1.0代表不缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--也可以添加user-scalable=no 可以禁用缩放功能,仅能滚动屏幕查看全部-->
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!--添加好viewport的meta标签并引入一个额外的样式表即可启用响应式CSS-->
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

猜你喜欢

转载自wangjingyi.iteye.com/blog/2183057