zoukankan      html  css  js  c++  java
  • Bootstrap速学教程之简要介绍

      Bootstrap是Twitter推出的一个用于前端开发的开源工具包,由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架,不用请UI设计师也能开发出中规中矩的网页,并且最重要的是支持html5、css3移动端自适应,现在很多所谓的三合一五合一网站是基于bootstrap搭建的。

      我们来看一个简单的例子

    <!DOCTYPE html><!-- html5格式 -->
    <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标签放在最前面,其他内容跟随其后! -->
        <meta name="description" content="这是描述">
        <title>这是标题</title>
        <!-- 新 Bootstrap 核心 CSS 文件 cdn加速 -->
        <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>
      </head>
      <body>
        <!-- 导航栏 -->
        <nav class="navbar">
          <div class="container">
          </div>
        </nav>
    
        <!-- 主题内容 -->
        <div class="container">
        </div>
      </body>
    </html>

      笔记:

      1.Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。

      2.Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下,建议将此 <meta> 标签加入到你的页面中 IE=edge

      3.Bootstrap 3 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落,而不是增加一个额外的文件。为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元数据标签。可选设置(viewport)设置 meta 属性为 user-scalable=no可以禁用其缩放(zooming)功能。这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感 觉。

      4.jquery用1.*版本,2.0版本不支持ie6/7/8

      5.<nav>是bootstrap中内置的导航样式,pc端可以展示完整的一行,移动端会收缩到右上角的菜单menu中

      6.内容主体div可以用container,有固定宽度并支持响应式布局的容器,container-fluid用于 100% 宽度

  • 相关阅读:
    LeetCode 382. Linked List Random Node
    LeetCode 398. Random Pick Index
    LeetCode 1002. Find Common Characters
    LeetCode 498. Diagonal Traverse
    LeetCode 825. Friends Of Appropriate Ages
    LeetCode 824. Goat Latin
    LeetCode 896. Monotonic Array
    LeetCode 987. Vertical Order Traversal of a Binary Tree
    LeetCode 689. Maximum Sum of 3 Non-Overlapping Subarrays
    LeetCode 636. Exclusive Time of Functions
  • 原文地址:https://www.cnblogs.com/ytkah/p/5652970.html
Copyright © 2011-2022 走看看