zoukankan      html  css  js  c++  java
  • 在HTML网页中引入Bootstrap前端框架

           Bootstrap百度百科介绍:

          Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。

        这是优雅的分割线....................................

        要想在HTML网页中试用Bootstrap,至少需要引入三个文件

        <!-- 新 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
        <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

       然后将所有使用Bootsrap样式的代码写在如下DIV中,二者选一。

       <div class="container">
        //这里写你bootstrap样式的代码
        </div>

        <div class="container-fluid">
        //这里写你bootstrap样式的代码
        </div>

       

       以下是本人编写的一个例子网页代码

    <!DOCTYPE html>  
    <html lang="zh-CN">  
    <head>  
        <title>首页</title>  
        <!-- 设置文档编码 -->  
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">  
        <!--  -->  
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">  
        <!-- 新 Bootstrap 核心 CSS 文件 -->  
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">  
        <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->  
        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>  
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->  
        <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>  
        <!-- CSS样式 -->  
        <style type="text/css">  
            .container div{  
                text-align:center;  
            }  
        </style>  
    </head>  
    <body>  
        <div class="container">  
            <div ><h4>请选择你要进行的操作</h4></div>  
            <br/>  
            <div ><button type="button" class="btn btn-primary btn-lg btn-block active" onclick="location=''" >我要出租汽车</button></div>  
            <br/>  
            <div ><button type="button" class="btn btn-primary btn-lg btn-block" disabled="disabled" onclick="location=''">我要租赁汽车</button></div>  
        </div>  
    </body>  
    </html>  
    

      注:

    引入文件时,我是在线引入,为了方便不联网的情况,我们可以先将这三个文件下载下来,然后在引入本地路径的CSS文件和JS文件。至于如何获得这三个文件,麻烦点的可以去Bootstrap的官网http://v3.bootcss.com/和JQuery

    的官网http://jquery.com/下载相应的文件下来,这样可以加深对Bootsrtap的了解;最简单的就是直接访问这三个网页

    http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css  
    <span style="font-size:18px;"></span>  
    
    http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js  
    
    http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js  
  • 相关阅读:
    Trie Tree和Radix Tree
    DataNode Layout升级解决Du操作引发的性能问题
    Write-Ahead Log(WAL)的工作原理
    YARN的共享存储服务
    AWS S3存储基于Hadoop之上的一致性保证
    简单聊聊HDFS RBF第二阶段工作近期的一些进展
    基于 Confluence 6 数据中心的 SAML 单点登录设置你的身份提供者
    基于 Confluence 6 数据中心的 SAML 单点登录设置 SSL/TLS
    Confluence 6 基于 Confluence 数据中心的 SAML 单点登录
    Confluence 6 用自带的用户管理
  • 原文地址:https://www.cnblogs.com/kjtt/p/9120881.html
Copyright © 2011-2022 走看看