美文网首页我爱编程
开始学习Bootstrap

开始学习Bootstrap

作者: Maonx | 来源:发表于2015-10-01 10:20 被阅读211次

最近想学习下Bootstrap,因为本身自己也在用SASS写CSS,所以想装一个基于SASS的Bootstrap,在Bootstrap中文网看中文文档下载了一个SASS项目源码,一开始看Bootstrap3的中文文档,比较困惑于Less版和SASS版的差别,安装区别很大,下了SASS项目的源码也不知道怎么进行安装,看了SASS说明文档第2步安装方法:Compass without Rails,
用Ruby安装方法试了下挺简单,也不用提前下载源码.

1. 先设置RubyGems 镜像

因为国内网络原因导致用gem安装的时候都有网络问题,
更改gem源到淘宝的gem的镜像源:

$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ gem sources -l
*** CURRENT SOURCES ***

https://ruby.taobao.org
# 请确保只有 ruby.taobao.org
$ gem install rails

2. 安装bootstrap-sass

$ gem install bootstrap-sass

3. 安装Compass

$ gem install Compass

4. 创建新的项目

现在可以正常创建Bootstrap 项目了

$ compass create my-new-project -r bootstrap-sass --using bootstrap

上面命令会创建一个项目,同时提示以下内容:

Congratulations! Your compass project has been created.

You may now add and edit sass stylesheets in the sass subdirectory of your project.

Sass files beginning with an underscore are called partials and won't be
compiled to CSS, but they can be imported into other sass stylesheets.

You can configure your project by editing the config.rb configuration file.

You must compile your sass stylesheets into CSS when they change.
This can be done in one of the following ways:
  1. To compile on demand:
     compass compile [path/to/project]
  2. To monitor your project for changes and automatically recompile:
     compass watch [path/to/project]

More Resources:
  * Website: http://compass-style.org/
  * Sass: http://sass-lang.com
  * Community: http://groups.google.com/group/compass-users/


To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
<head>
  <link href="/stylesheets/styles.css" rel="stylesheet" type="text/css" />
</head>

现在可以开心的学习测试bootstrap-sass了~~~

相关文章

  • 开始学习Bootstrap

    最近想学习下Bootstrap,因为本身自己也在用SASS写CSS,所以想装一个基于SASS的Bootstrap,...

  • 学习网站资源

    Bootstrap :bootstrap学习网站 element:element学习地址 Flex: Flex 布...

  • Bootstrap学习之二:栅格化布局

    @(Bootstrap) 导言 前面我们讲了如何安装使用bootstrap框架,下面我们将会学习bootstrap...

  • Bootstrap

    建议学习时长: 60分钟学习方式:了解 学习目标 知道 Bootstrap 是什么。 知道 Bootstrap 有...

  • Bootstrap初体验

    今天学习了Bootstrap的知识,没有学习Bootstrap之前,我一直以为是Bootstrap是一个很高大上的...

  • Netty-鸟瞰

    Netty-鸟瞰 Bootstrap:Netty应用从构建一个Bootstrap开始,通过Bootstrap可以轻...

  • 浅谈bootstrap的使用

    现在大部分刚开始学前端的人都要学习一下bootstrap框架,作为一个新入门的前端来说,bootstrap的却是一...

  • 2018-10-08Bootstrap03

    Bootstrap 图片 在本章中,我们将学习 Bootstrap 对图片的支持。Bootstrap 提供了三个可...

  • Bootstrap学习

    很好的bootstrap学习教程:http://www.runoob.com/bootstrap/bootstra...

  • 2018-05-27

    本周的学习内容主要是bootstrap的简单了解,开始学习js以及了解inux中/etc/passwd,和/etc...

网友评论

    本文标题:开始学习Bootstrap

    本文链接:https://www.haomeiwen.com/subject/gqcgcttx.html