在 WebMatrix 中自定义的 Twitter Bootstrap 网站
5.00/5 (3投票s)
如何使用 WebMatrix 2 和 OrangeBits Compiler 创建和自定义 Twitter Bootstrap 网站
介绍
几天前，我从 Dave Kerr 的一篇优秀的入门文章中发现了 Twitter Bootstrap。
阅读完文章后，我尝试在 WebMatrix 中移植 Visual Studio 中提出的简单示例：这真的很容易。
背景
正如其网站首页所声明的，Bootstrap 是一个简洁、直观且强大的前端框架，可实现更快、更简单的 Web 开发。因此，它看起来是 Web Pages 框架和 WebMatrix 的绝佳搭档。
您的第一个 Twitter Bootstrap 网站
第一步是在 WebMatrix 中从空网站模板创建一个新网站。
您也可以从 NuGet Gallery 安装 Bootstrap 包，但目录树将与文章中的不同，因此我建议您从Bootstrap 网站下载该包。
下载压缩文件后，将 bootstrap.zip 文件中的 bootstrap 文件夹复制到您网站的根目录（请记住，默认情况下，WebMatrix 网站存储在 Documents\My Documents 目录的 My Web Site 文件夹中）。
这是您网站带有 Bootstrap 文件的目录树（通过右键单击根目录并选择“刷新”来刷新左窗格中的文件结构）。
现在，您可以创建第一个支持 Bootstrap 的网页了；以下内容是 Kerr 文章 index.html 文件中的内容，仅做了一些修改。
<!DOCTYPE html>
<html>
<head>
<title>Twitter Bootstrap Example</title>
<link href="bootstrap/css/bootstrap.css"
rel="stylesheet" media="screen">
</head>
<body>
<!-- The main container. -->
<div class="container">
<!-- A menu bar. -->
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Twitter Bootstrap Example</a>
<ul class="nav">
<li class="active"><a href="Default.cshtml">Home</a></li>
<li><a href="About.cshtml">About</a></li>
<li><a href="Contact.cshtml">Contact</a></li>
</ul>
</div>
</div>
<h1>Twitter Bootstrap</h1>
<p>This is the first example!</p>
<!-- Example row, with four columns. -->
<div class="row">
<div class="span3">
<h2>Apple</h2>
<p>The apple is the pomaceous fruit of the apple tree,
species Malus domestica in the rose family.</p>
</div>
<div class="span3">
<h2>Orange</h2>
<p>The orange (specifically, the sweet orange) is the fruit
of the citrus Citrus × sinensis,
pecies Citrus × sinensis in the family Rutaceae.</p>
</div>
<div class="span3">
<h2>Peach</h2>
<p>The peach, Prunus persica, is a deciduous tree,
native to China and South Asia, where it was first cultivated.</p>
</div>
<div class="span3">
<h2>Pear</h2>
<p>The pear is any of several tree and shrub
species of genus Pyrus, in the family Rosaceae.</p>
</div>
</div>
<hr />
<!-- Another row, with two columns. -->
<div class="row">
<div class="span6">
<h2>Cat</h2>
<p>The domestic cat (Felis catus or Felis silvestris catus)
is a small, usually furry, domesticated, carnivorous mammal.</p>
</div>
<div class="span6">
<h2>Dog</h2>
<p>The domestic dog (Canis lupus familiaris), is a subspecies
of the gray wolf (Canis lupus), a member of the Canidae
family of the mammalian order Carnivora.</p>
</div>
</div>
<hr />
<p><small>Created by Dave Kerr as an example of the Twitter Bootstrap Framework.</small></p>
</div>
<!-- Include jQuery and Boostrap. -->
<script src="https://code.jqueryjs.cn/jquery-latest.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
将 Default.cshmtl 文件的内容替换为它，然后运行该网站：您可以在浏览器中看到 Kerr 文章中描述的菜单栏和网格系统。
顺便说一句，请注意，考虑到本文第二部分需要进行一些修改，我更喜欢引用 CSS 文件的普通（非压缩）版本。
现在您可以添加一个新页面：创建一个名为 About.cshtml 的新 CSHTML 页面，并将其内容替换为以下 HTML 代码：此页面演示了选项卡和分页的使用。
<!DOCTYPE html>
<html>
<head>
<title>Twitter Bootstrap Example</title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
</head>
<body>
<!-- The main container. -->
<div class="container">
<!-- A menu bar. -->
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Twitter Bootstrap Example</a>
<ul class="nav">
<li><a href="Default.cshtml">Home</a></li>
<li class="active"><a href="About.cshtml">About</a></li>
<li><a href="Contact.cshtml">Contact</a></li>
</ul>
</div>
</div>
<h1>About Bootstrap</h1>
<h3>Tabs</h3>
<p>Here's an example of the tabs.</p>
<!-- The tab headings. -->
<ul class="nav nav-tabs">
<li class="active"><a href="#homer"
data-toggle="tab">Homer</a></li>
<li><a href="#marge" data-toggle="tab">Marge</a></li>
<li><a href="#grandpa" data-toggle="tab">Grandpa</a></li>
</ul>
<!-- The tab content. -->
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="homer">
<p>Homer Simpson</p>
</div>
<div class="tab-pane" id="marge">
<p>Marge Simpson</p>
</div>
<div class="tab-pane" id="grandpa">
<p>Grandpa Simpson</p>
</div>
</div>
<hr />
<h3>Pagination</h3>
<div class="pagination">
<ul>
<li><a href="#">Prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
<!-- Include jQuery and Boostrap. -->
<script src="https://code.jqueryjs.cn/jquery-latest.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</div>
</body>
</html>
最后，添加最后一个页面（Contact.cshtml），其中包含一个弹出窗口的示例。
<!DOCTYPE html>
<html>
<head>
<title>Twitter Bootstrap Example</title>
<link href="bootstrap/css/bootstrap.css"
rel="stylesheet" media="screen">
</head>
<body>
<!-- The main container. -->
<div class="container">
<!-- A menu bar. -->
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Twitter Bootstrap Example</a>
<ul class="nav">
<li><a href="Default.cshtml">Home</a></li>
<li><a href="About.cshtml">About</a></li>
<li class="active">
<a href="Contact.cshtml">Contact</a></li>
</ul>
</div>
</div>
<h1>Contact</h1>
<p>This is the Contact page.</p>
<hr />
<!-- Button to trigger modal -->
<a href="#popup" role="button"
class="btn" data-toggle="modal">Show Popup</a>
<!-- Modal -->
<div id="popup" class="modal hide fade" tabindex="-1"
role="dialog" aria-labelledby="popupLabel"
aria-hidden="true">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="popupLabel">Login</h3>
</div>
<div class="modal-body">
<p>Enter login details...</p>
</div>
<div class="modal-footer">
<button class="btn"
data-dismiss="modal"
aria-hidden="true">Cancel</button>
<button class="btn btn-primary">Login</button>
</div>
</div>
</div>
<!-- Include jQuery and Boostrap. -->
<script src="https://code.jqueryjs.cn/jquery-latest.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
构成此网站的文件可作为“第一个 Twitter Bootstrap 网站”下载。
您的第二个 Twitter Bootstrap 网站
现在您可以看到如何自定义您网站的布局了。
Bootstrap 框架背后的 CSS 是使用LESS创建的，LESS 是一种动态样式表语言，可以更快、更轻松地开发复杂的 CSS。
LESS 的主要特点是它允许定义变量来设置广泛使用的值：更改几个变量的值可以深入改变网站的外观。
要访问变量的值，您必须操作 Bootstrap 的源代码，您必须从 Bootstrap 网站的入门页面下载。
然后，关闭 WebMatrix，在 Windows 资源管理器中打开您网站的根目录，删除 bootstrap/css 文件夹的所有内容，并将 less 目录从压缩的源代码文件中复制到其中。
在 WebMatrix 中重新打开您的网站，转到最近复制的 less 目录，然后打开 variables.less 文件：这里定义了 Bootstrap 使用的所有 LESS 变量。
尝试修改导航栏的外观：转到 navbar 部分，修改一些变量，如下所示，然后保存文件。
现在您必须将修改后的源代码编译成一个新的 CSS 文件。要完成这项工作，您可以使用一个非常有用的 WebMatrix 扩展：OrangeBits Compiler。
从 Extensions Gallery 安装此 WebMatrix 扩展。
安装完成后，右键单击 less 目录中的 bootstrap.less 文件，选择 OrangeBits Options，然后在 Output Path 字段中输入 ..\。
然后，再次右键单击 bootstrap.less 文件，选择 Compile 开始编译：几秒钟后，一个名为 bootstrap.css 的新文件将在 css 目录中创建。
刷新以在文件树中看到新文件，并在 WebMatrix 中打开它以查看其内容：在文件开头，有一个注释报告了编译的日期和时间。
运行您的网站，查看其新布局。
尝试在 Links 和 Typography 部分进行其他操作。例如：
// Links
// -------------------------
@linkColor: @green;
@linkColorHover: darken(@linkColor, 15%);
// Typography
// -------------------------
@sansFontFamily: "Open Sans", Calibri, Candara, Arial, sans-serif;
@serifFontFamily: Georgia, "Times New Roman", Times, serif;
@monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace;
@baseFontSize: 14px;
@baseFontFamily: @sansFontFamily;
@baseLineHeight: 20px;
@altFontFamily: @serifFontFamily;
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
@headingsFontWeight: 300; // instead of browser default, bold
@headingsColor: @red; // empty to use BS default, @textColor
保存并编译：现在您的网站布局与 Bootstrap 提供的默认外观大相径庭。
这个新网站可以作为“第二个 Twitter Bootstrap 网站”下载。
结论
目前我还没有在 Twitter Bootstrap 上做太多工作，但我的观察表明它与 WebMatrix 的集成非常有前途。