Bootstrap-sass<1>安装与基本结构

本文详细介绍如何通过安装Ruby和Sass,利用Sass优化Bootstrap项目的样式管理,并介绍bootstrap-sass的使用方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近项目都在用bootstrap布局,每次改动和文件组织总感觉不是那么清晰明了,所以借着该项目,重新整理一下sass,在网上发现有bootstrap-sass,已经集成好的一个bootstrap的sass文件,所以用这个框架对项目样式部分又重新码了一遍,感觉收获还是蛮多的,就写了一些总结,也算是对sass和bootstrap的一点回顾。
就从安装sass开始吧。。
<1>Sass的安装
(1)ruby安装
在如下网站:http://rubyinstaller.org/downloads下载安装包。下载完安装时记住在安装选项中勾选Add Ruby executables to your PATH这个选项,来自动添加环境变量,如果忘记也没关系,在系统变量里添加即可,命令行方式和界面都行。
(2)sass安装
安装完ruby后再开始菜单中找到ruby,打开Start Command Prompt with Ruby。
然后在命令行输入
gem install sass 
之后便会自动下载。
(3)sass的编译(我一般都是scss,没写sass)
1,最常用的编译在命令行下找到需编译的scss文件,输入:
sass test.scss test.css
便可
2,我一般用sublime编写代码,所以可以在sublime中下载一些插件完成scss文件保存及编译。
下载 Sass,SASS Build,SublimeOnsaveBuild三个插件,不知道插件如何下的童鞋请百度一下。
对了,之前我遇到问题就是下完之后可能仍不能编译。提示no build system.
解决方法是,由于sublime有时不能自动识别scss语法,所以无法匹配编译系统。直接在tool下面选择build with ,在子菜单选择sass即可。
(4)bootstrap-sass下载
与sass下载一样,在开始菜单中找到ruby,打开Start Command Prompt with Ruby。
输入
gem install bootstrap-sass
即可。
(5)bootstrao-sass结构
在 /assets/stylesheet/中,bootstrap文件夹和bootstrap.scss,bootstrap-compass都是我们核心文件。
我们可以先来看下bootstap.scss文件。下面是对该文件做的一个简单注释,提取了主要的一些内容。





然后你再找到boostrap文件夹下的variable.scss文件,查看内容,你就会发现更加熟悉了呢,只要你懂得基础的sass语法,在结合这个文件,你已经可以开发基础的页面了。下一篇,主要是对这个文件和bootstrap布局知识的回顾。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <html> <head> <!-- 页面meta --> <meta charset="utf-8"> <title>书虫补给站</title> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/AdminLTE.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/_all-skins.min.css"> <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script> <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script> <script src="${pageContext.request.contextPath}/js/app.js"></script> <script type="text/javascript"> function SetIFrameHeight() { var iframeid = document.getElementById("iframe"); //iframe id if (document.getElementById) { iframeid.height = document.documentElement.clientHeight; } } </script> </head> <body class="hold-transition skin-purple sidebar-mini"> <div class="wrapper"> <!-- 页面头部 --> <header class="main-header"> <!-- Logo --> <a href="${pageContext.request.contextPath}/admin/index.jsp" class="logo"> <!-- mini logo for sidebar mini 50x50 pixels --> <span class="logo-mini"><b>智阅云联</b></span> <!-- logo for regular state and mobile devices --> <span class="logo-lg"><b>书虫补给站</b></span> </a> <!-- Header Navbar: style can be found in header.less --> <nav class="navbar navbar-static-top"> <nav class="navbar navbar-static-top"> <div class="navbar-custom-menu"> <ul class="nav navbar-nav"> <li class="dropdown user user-menu"> <a > <img src="${pageContext.request.contextPath}/img/user1.jpg" class="user-image" alt="User Image"> <span class="hidden-xs">${USER_SESSION.name}</span> </a> </li> <li class="dropdown user user-menu"> <a href="${pageContext.request.contextPath}/userServlet?method=logout"> <span class="hidden-xs">注销用户</span> </a> </li> </ul> </div> </nav> </nav> </header> <!-- 页面头部 /--> <!-- 导航侧栏 --> <aside class="main-sidebar"> <!-- sidebar: style can be found in sidebar.less --> <section class="sidebar"> <!-- /.search form --> <!-- sidebar menu: : style can be found in sidebar.less --> <ul class="sidebar-menu"> <li id="admin-index"> <a href="${pageContext.request.contextPath}/admin/index.jsp"> <i class="fa fa-dashboard"></i> <span><b>新书推荐</b></span> </a> </li> <li> <a href="${pageContext.request.contextPath}/bookServlet?method=search" target="iframe"> <i class="fa fa-circle-o"></i> <span><b>图书借阅</b></span> </a> </li> <li> <a href="${pageContext.request.contextPath}/bookServlet?method=searchBorrowed" target="iframe"> <i class="fa fa-circle-o"></i> <span><b>当前借阅</b></span> </a> </li> <li> <a href="${pageContext.request.contextPath}/recordServlet?method=searchRecords" target="iframe"> <i class="fa fa-circle-o"></i> <span><b>借阅记录</b></span> </a> </li> </ul> </section> <!-- /.sidebar --> </aside> <!-- 导航侧栏 /--> <!-- 内容区域 --> <div class="content-wrapper"> <iframe width="100%" id="iframe" name="iframe" onload="SetIFrameHeight()" frameborder="0" src="${pageContext.request.contextPath}/bookServlet?method=selectNewbooks"></iframe> </div> </div> </body> </html>帮我优化一下这段代码
最新发布
06-19
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值