• bootstrap的概念


    bootstrap 的学习非常简单,并且它所提供的样式又非常精美。只要稍微简单的学习就可以制作出漂亮的页面。

    用于生产环境的 Bootstrap

      编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件。

    Bootstrap 源码

      Less、JavaScript 和 字体文件的源码,并且带有文档。需要 Less 编译器和一些设置工作。

    Sass

      这是 Bootstrap 从 Less 到 Sass 的源码移植项目,用于快速地在 Rails、Compass 或 只针对 Sass 的项目中引入。

    其实我们不用下载bootstrap也可以使用它:

    Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN 加速服务。基于国内云厂商的 CDN 服务,访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。

    base.html

    <!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 rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
        
      </head>
      <body>
        <h1>你好,bootstrap!</h1>
    
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
      </body>
    </html>
    复制代码

     base.html中已经引入了bootstrap,将其保存,我们就可以使用bootstrap提供的样式了。

    字体图标

    bootstrap默认提供了二百多个图标。我们可以通过span标签来使用这些图标:

    <h3>图标</h3>   
        <span class="glyphicon glyphicon-home"></span>
        <span class="glyphicon glyphicon-signal"></span>
        <span class="glyphicon glyphicon-cog"></span>
        <span class="glyphicon glyphicon-apple"></span>
        <span class="glyphicon glyphicon-trash"></span>
        <span class="glyphicon glyphicon-play-circle"></span>
        <span class="glyphicon glyphicon-headphones"></span>
    复制代码

    按钮

     <button></button>标签用于创建按钮,bootstrap提供了丰富的按钮样式。

        <h3>按钮</h3>
        <button type="button" class="btn btn-default">按钮</button>
        <button type="button" class="btn btn-primary">primary</button>
        <button type="button" class="btn btn-success">success</button>
        <button type="button" class="btn btn-info">info</button>
        <button type="button" class="btn btn-warning">warning</button>
        <button type="button" class="btn btn-danger">danger</button>
        
        <h3>按钮尺寸</h3>
        <button type="button" class="btn btn-default">按钮</button>
        <button type="button" class="btn btn-primary btn-lg">primary</button>
        <button type="button" class="btn btn-success btn-sm">success</button>
        <button type="button" class="btn btn-info btn-xs">info</button>
    
        <h3>把图标显示在按钮里</h3>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;按钮</button>
    复制代码

    按钮除了有默认的大小外,bootstrap还提供三个参数来调整按钮的大小,分别是:btn-lg、btn-sm和btn-xs。

  • 相关阅读:
    Sublime Text shift+ctrl妙用(转载)
    编写一致的符合习惯的javascript
    Vue 部署单页应用,刷新页面 404/502 报错
    http 缓存策略浅析
    Vue 项目优化,持续更新...
    web安全之——XSS、CSRF
    javascript 易错知识点合集
    深入理解 js this 绑定机制
    javascript 模块依赖管理的本质
    VUE 项目刷新路由指向index.html
  • 原文地址:https://www.cnblogs.com/paoge/p/13681043.html
Copyright © 2020-2023  润新知