• bootstrap学习总结-01 环境准备


    1 下载Bootstrap

      Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。当前下载的Bootstrap版本为v3.3.7

    http://getbootstrap.com/
    
    http://v3.bootcss.com/

    http://www.runoob.com/bootstrap/bootstrap-tutorial.html

    2 Bootstrap包含的文件

    css: Bootstrap最重要的部分,预先设计好的样式文件。

    fonts: Bootstrap用到的字体。

    js: Bootstrap用到的JS插件。

    3 使用Bootstrap

      现在网页中使用Bootstrap需要在网页中加载Bootstrap用到的css样式表,js文件。

     1) BootStrap的JS插件依赖于Jquery库,需要在以下网站下载Jqeruy:

    http://jquery.com/

    2) 编写第一个Bootstrap

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <link rel="stylesheet" href="css/index.css" />
            <meta name="viewport" content="width=device-width,initial-scale=1">
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    
            <link rel="icon" href="./img/index.png">
            <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>
        </head>
    
        <body>
    
            <div class="container">
    
                <h1 class="page-header">使用<small>Bootstrap编写网页</small></h1>
                <p>helloWorld
                </p>
            </div>
        </body>
    </html>
  • 相关阅读:
    lnmp yum源的安装自己总结。
    bootstrap 表单validator与ajax验证!!!!
    laravel5.4 安装
    学习进度条
    作业8:单元测试练习(个人练习)
    作业7: 用户体验设计案例分析
    学生成绩录入系统设计与实现(1)
    作业5:需求分析
    结对项目—— 词频统计
    结对项目—— 词频统计
  • 原文地址:https://www.cnblogs.com/wangshuo1/p/5835984.html
Copyright © 2020-2023  润新知