• 实战web前端之:Bootstrap框架windows下安装与使用


    Bootstrap是前端开发中比较受欢迎的框架,简洁且灵活。它基于HTML、CSS和JavaScript,HTML定义页面元素,CSS定义页面布局,而JavaScript负责页面元素的响应。Bootstrap将HTML、CSS和JavaScript封装成一个个功能组件,用起来简单,粗暴,是由美国麻省理工学院的Mark Otto和Jacob Thornton合作开发。由于笔者的室友在三天半之内就学完了html5+css3+javascript+bootstrap框架,这让我感到压力巨大。尤其是这几天课程比较多,又不敢逃课,
     
    学习真正的知识进度缓慢。所以笔者也开始进入了Bootstrap领域进行研究。
     

    1.登录Bootstrap官网

     

    点击Download.

    2.下载Bootstrap

    Download Bootstrap:下载预编译和压缩版Bootstrap(不含文档和源码)。

    Download code:Bootstrap源码,如官网介绍,需要编译Less文件 和一些安装。

    刚接触Bootstrap的话建议下载第一个,下载下来直接用。

    使用Bootstrap进行前端开发
    开发环境:WAMP(windows下的Apache + MySQL + PHP)

    编辑器:DW

    Step 1: 将下载下来的压缩包解压,将里面的css,和js文件夹放到你的工程目录中(即您wamp下的网站根目录了)。在工程根目录中新建了一个”index.html”,用来测试Bootstrap。

    Step 2: 编辑”index.html”,使用Bootstrap封装的功能部件。

    编写代码:

     

    <!DOCTYPE html>

    <html>

    <head>

       <meta charset="utf-8"> 

       <title>在线尝试 Bootstrap 实例</title>

       <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  

       <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

       <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>

     

          <h1>Hello, world!</h1>

     

    </body>

    </html>

    Step 3: 在浏览器中打开我们编写好的”index.html”查看。

    如果发现有大写的Hello,world!则说明您的Bootstrap安装成功了!

  • 相关阅读:
    正则表达式和grep
    Java程序员常用工具集
    在 TDA 工具里看到 Java Thread State 的第一反应是
    Java线程Dump分析工具--jstack
    一个Tomcat配置参数引发的血案
    JVM性能调优监控工具jps、jstack、jmap、jhat、jstat等使用详解
    jstat的用法
    Java命令学习系列(2):Jstack
    JVM调优之jstack找出最耗cpu的线程并定位代码
    linux内核cdev_init系列函数(字符设备的注册)
  • 原文地址:https://www.cnblogs.com/geeksongs/p/10602654.html
Copyright © 2020-2023  润新知