CSS 框架之 Bootstrap 的下载和安装

最新推荐文章于 2023-04-23 14:04:53 发布

weixin_30609287

最新推荐文章于 2023-04-23 14:04:53 发布

阅读量329

点赞数

文章标签：前端框架 javascript ViewUI

原文链接：http://www.cnblogs.com/chenfulin5/p/6846762.html

版权

BootStrap 简介：

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
    响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
    它为开发人员创建接口提供了一个简洁统一的解决方案。
    它包含了功能强大的内置组件，易于定制。

下载：

    // Bootstrap 官网
    http://getbootstrap.com/
    // Bootstrap 下载
    http://getbootstrap.com/getting-started/#download

![](http://images2015.cnblogs.com/blog/991711/201705/991711-20170512162356691-923902216.png)
直接下载源码

安装

    // 解压 bootstrap-3.3.7.zip
    unzip  bootstrap-3.3.7.zip
    // 找到预编译好的库
    ls  bootstrap-3.3.7/dist/
    css  fonts  js
    //  这里就是你要的库

使用

    // 假设你将这三个文件夹都复制到你的网站服务器的家目录，将jQuery 也复制到js 目录里面
    // 那么可以使用如下代码使用
      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4   <title>aplex Bootstrap</title>
      5   <meta charset="utf-8">
      6   <meta name="viewport" content="width=device-width, initial-scale=1">
      7   <link rel="stylesheet" href="/css/bootstrap.min.css">
      8   <script src="/js/jquery.js"></script>
      9   <script src="/js/bootstrap.min.js"></script>
     10 </head>
     11 
     12 <body>
     13 <small>本行内容是在标签内</small><br>
     14 <strong>本行内容是在标签内</strong><br>
     15 <em>本行内容是在标签内，并呈现为斜体</em><br>
     16 <p class="text-left">向左对齐文本</p>
     17 <p class="text-center">居中对齐文本</p>
     18 <p class="text-right">向右对齐文本</p>
     19 <p class="text-muted">本行内容是减弱的</p>
     20 <p class="text-primary">本行内容带有一个 primary class</p>
     21 <p class="text-success">本行内容带有一个 success class</p>
     22 <p class="text-info">本行内容带有一个 info class</p>
     23 <p class="text-warning">本行内容带有一个 warning class</p>
     24 <p class="text-danger">本行内容带有一个 danger class</p>
     25 </body>
     26 
     27 </html>

转载于:https://www.cnblogs.com/chenfulin5/p/6846762.html