掷鸡蛋者 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
管理员
![]() ![]() 性别: 男
积分:52177 阅读权限:43389
帖子: 8320
加入时间: 2010/4/29
最后登录: 2019/11/29
|
Having covered one of the best web development frameworks (Twitter Bootstrap) and a super fast CSS coding technique with tons of goodness (SASS), in my previous posts, it is time to burn some rubber and get some work done. We will get our hands dirty and code a web page right from scratch using Twitter Bootstrap and SASS. This will be a 2 part tutorial, with detailed steps and a comprehensive overview on the processes and concepts behind them. The first part will cover the details of building the folder structure and creating markup using TBS for the layout. The second part will have a detailed walk through on the customization of the layout using SASS. Before starting to code, make sure you have these items installed/configured/downloaded on your computer:
What we’ll be creatingDemo | Download File | Part 2 of TutorialWe will be creating a basic layout using the frameworks. The objective of this tut is not to demonstrate all the ui elements in TBS, and to show how to use it, but it concentrates on the workflow and the basic concept of making use of both these frameworks. I expect novice readers to spend much time going through the framework, and get your hands dirty as much as possible, rather than trying to find out a tutorial which spoon feeds each and every implementation. Believe me, self study has been the best approach that has worked for me, and i strongly believe this tut, will give a strong basement to start building pages by your own using TBS and SASS. Lets get going (Note: I’m using Mac OSx for this tutorial and the tools and terminology that I use will be based on using a mac) Step 1: Creating a Compass Project and Setting up Your Folder StructureFirst thing to do is to get your folder structure right. Lets start by creating a Compass project. This is important as Compass is a preprocessor and each Compass file has to be converted to normal css (.css files), before we can start using them. Once you are sure which the folder you want to start working with, point Terminal to that location, and type in the following command to create a Compass project: compass create ![]() This command generates a folder structure, as follows ![]() It generates 2 folders ‘sass’ and ‘stylesheets’ and a .rb file ‘config.rb’. Obviously, all the SASS based files (with extension .scss or .sass) are to be put inside the ‘sass’ folder, and the generated .css files in the ‘stylesheets’ folder. In case your app uses a different folder structure, this structure can be customized by changing the config.rb file, by updating respective folder names for each type of asset (stylesheets, sass files, js files ). By default, 3 SCSS files are also generated in the ‘sass’ folder – ie.scss, print.scss, screen.scss, and respective css files in the ‘stylesheets’ folder. These scss files are just starting points without any rules included (although the screen.scss has a reset module included we won’t be using it, since TBS has its own reset rules within its stylesheet file. So lets remove the reset which is included in ‘screen.css’). After setting up the folder structure, there should be a mechanism where the Compass compiler keeps on updating any changes to the .scss files in the ‘sass’ folder, and replaces the respective files in ‘stylesheets folder’. This is what the following command does exactly (again, make sure the terminal is pointing to the root folder of the project, in our case, its ‘TBStut’). compass watch This will instruct the Compass compiler to poll for any changes in any .scss files within the relevant folder specified in the config.rb file and to create and update respective .css file to style sheet folder mentioned in the config.rb file. Step 2: Putting TBS files in placeNow that the Compass project has been created, and the folder is set to watch for changes and update the CSS files, next step will be to add the TBS framework files to this structure. The downloaded file set from TBS repository has the following structure. ![]() bootstrap.css and bootstrap-responsive.css play a major role in the framework while the ‘img’ folder contains the glyphicons which come with the framework and the ‘js’ folder has bootstrap.js, which includes all the scripts needed to make the jQuery plugins work. Let’s copy bootstrap.css and bootstrap-responsive.css to the ‘stylesheets’ folder (you could copy the minified versions too, if you wish), the ‘bootstrap.js’ to the js folder and later on gradually we’ll put images that we’ll be using in the tutorial into the images folder. Finally our folder structure looks like this: ![]() Step 3:The HTML for the PageNow straight to work! Lets create an HTML page ‘index.html’, and include all the TBS related stylesheets, available in the ‘stylesheets’ folder. To start with, I have used the starter template available in http://twitter.github.com/bootstrap/examples/hero.html, for the basic markup including the fixed top nav bar, the hero section and the content container. Here is how the code looks: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap, from Twitter</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <!-- Le styles --> <link href="../assets/css/bootstrap.css" rel="stylesheet"> <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet"> <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#">Project name</a> <div class="nav-collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> </div> <div class="container"> <!-- Main hero unit for a primary marketing message or call to action --> <div class="hero-unit"> <h1>Hello, world!</h1> <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p> <p><a class="btn btn-primary btn-large">Learn more ?</a></p> </div> <hr> <footer> <p>? Company 2012</p> </footer> </div> <!-- /container --> <!-- Le javascript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="http://code.jquery.com/jquery.min.js"></script> <script src="js/bootstrap.js"></script> </body> </html> In the above code I have removed the content section with 3 blocks of text which were present in the sample page. Here is a walk through of the above code and I’ll shed some light on the key points to be aware of.
At the moment, this is how our page looks: ![]() Now its time to add more details and UI elements to the page. Lets add a login form inside the hero unit.
<div class="hero-unit clearfix"> <div class="pull-left span5"> <h1>Welcome to 1stwebdesigner</h1> <p>A one stop resource for web designers and developers</p> <p><a class="btn btn-primary btn-large">Explore our articles</a></p> </div> <div class="pull-right"> <form class="well"> <label>Username</label> <input type="text" class="span3" placeholder="Type your username"> <label>Password</label> <input type="password" class="span3" placeholder="Type your password"> <label class="checkbox"> <input type="checkbox">Remember me </label> <button type="submit" class="btn">Log me in</button> </form> </div> </div> We are almost done with this page, once we’ve filled up the lower half of the page.
The markup of the bottom part with 3 equal width columns will look like: <div class="row"> <div class="span4"> <div class="thumbnail"> <img alt="" src="http://placehold.it/370x180"> <div class="caption"> <h5>Thumbnail label</h5> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a></p> </div> </div> </div> <div class="span4"> <div class="thumbnail"> <img alt="" src="http://placehold.it/370x180"> <div class="caption"> <h5>Thumbnail label</h5> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a></p> </div> </div> </div> <div class="span4"> <a class="thumbnail" href="#"> <img alt="" src="http://placehold.it/370x300"> </a> </div> </div> And the final markup should look like: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap, from Twitter</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <!-- Le styles --> <link href="stylesheets/bootstrap.css" rel="stylesheet"> <link href="stylesheets/bootstrap-responsive.css" rel="stylesheet"> <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#">Project name</a> <div class="nav-collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> </div> <div class="container"> <!-- Main hero unit for a primary marketing message or call to action --> <div class="hero-unit clearfix"> <div class="pull-left span5"> <h1>Welcome to 1stwebdesigner</h1> <p>A one stop resource for web designers and developers</p> <p><a class="btn btn-primary btn-large">Explore our articles</a></p> </div> <div class="pull-right"> <form class="well"> <label>Username</label> <input type="text" class="span3" placeholder="Type your username"> <label>Password</label> <input type="password" class="span3" placeholder="Type your password"> <label class="checkbox"> <input type="checkbox">Remember me </label> <button type="submit" class="btn">Log me in</button> </form> </div> </div> <div class="row"> <div class="span4"> <div class="thumbnail"> <img alt="" src="http://placehold.it/370x180"> <div class="caption"> <h5>Thumbnail label</h5> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a></p> </div> </div> </div> <div class="span4"> <div class="thumbnail"> <img alt="" src="http://placehold.it/370x180"> <div class="caption"> <h5>Thumbnail label</h5> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a></p> </div> </div> </div> <div class="span4"> <a class="thumbnail" href="#"> <img alt="" src="http://placehold.it/370x300"> </a> </div> </div> <footer> <p>? Company 2012</p> </footer> </div> <!-- /container --> <!-- Le javascript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="http://code.jquery.com/jquery.min.js"></script> <script src="js/bootstrap.js"></script> </body> </html> and here is how the page looks like now: ![]() We now have the basic markup in place and things are set, what remains is the customization part where we will use SASS to customize this page. Look forward to my next post which will comprehensively cover the customization part of this layout. Hope this tutorial enlightened you, and wait for more enlightenment to come your way regularly! This is the second part of my tutorial on How to Build a Website Using Twitter Bootstrap and SASS where we shall be customizing the Twitter Bootstrap-based web page using SASS. Just to set the context right, we will be starting out where we left off in the previous tutorial. If you haven’t seen it yet, please check it out and work through it. There you will learn how to setup your system for TBS, Ruby, and Compass. In this tutorial we will be furnishing our webpage from the last tutorial using SASS. By the end of this tutorial you will be at the next level of developing beautiful websites and applications! What we’ll be creatingStep 1: Creating a custom SASS fileLets remember that we are using the same file set which we used in the first part of this tutorial. Also, please make sure all the setup guidelines are being followed. Primarily, the Compass compiler should be watching our entire folder to make sure all the changes in the SASS files are being converted to the relevant CSS file. We can customize the above page in multiple ways:
The latter is always preferable (we discussed in the first part of the tutorial, that it’s always recommended to use a separate stylesheet file to override rules of any plugins or frameworks), because when it comes to multiple theming of the page, we just have to change the custom CSS file to another one in order to apply different skins to the layout. So lets create a SASS file (extension of a sass file is .scss) and place it in the ‘sass’ folder. Since the page talks about 1stwebdesigner, I’m naming it ’1wd.scss’, and including it in the HTML. Also make sure you are including it after the line which includes all bootstrap styles. Our folder structure now looks like: ![]() Step 2: Overriding the rules, using a mother hookAs a first step towards customization I always prefer adding a mother class to the body tag of the page, so that I can always group all the custom rules by referring to that class. So, lets start by giving the body tag of our HTML page a class – ‘fwd’. This helps us to maintain a first level of grouping in terms of selectors and makes sure we don’t override the bootstrap selectors directly. Step 3: Customizing the layoutWe will also be using a pinch of CSS3 in our styles. So lets include the CSS3 mixins in our .scss files so that we can make use of most of the CSS3 features easily using a single line of code. Lets start with the header. Here is a comparison of our current header and the customized one: The key changes that we’ll be doing here are:
Next is the hero unit Here is a comparison of our current hero-unit and the customized one: ![]() ![]() The key changes that we’ll be doing here are (the final code for this section is given towards the end of this bulleted section):
Now comes the thumbnail section Here is a comparison of our current thumbnail section and the customized one: The key changes that we’ll be doing here are (the final code for this section is given towards the end of this bulleted section):
Finally the footer I am just adding a custom pattern to the footer, add a border-radius and will be increasing the padding of the container to 20px. Please refer to the code of footer below:
Finally after all the customization and coding, here is how our customized page looks: This is just an intro to the power of SASS and TBS together. In the CSS file that we have used we can make use of variables effectively by storing color values in them and then importing the variable CSS to the main stylesheet at the beginning. With the complexity of each page, all the features of SASS can be leveraged in a much better way. Mixins, Extend, Variables and much more are in store for us to explore and implement. Get started with this if you are planning to plunge into the world of SASS and wait for more to come your way. I’d appreciate your feedback on my approach and on this tutorial to help me improve! 来源:http://www.1stwebdesigner.com/css/build-website-using-twitter-bootstrap-sass-2/ 相关文章
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
xszu | ||
江湖豪侠
![]() ![]() ![]() 性别: 男
积分:1377 阅读权限:2350
帖子: 528
加入时间: 2012/4/13
最后登录: 2014/7/18
|
蛋蛋你不翻译出来看的时候很吃力
|
|
|
掷鸡蛋者 | ||
管理员
![]() ![]() 性别: 男
积分:52177 阅读权限:43389
帖子: 8320
加入时间: 2010/4/29
最后登录: 2019/11/29
|
这么长翻译出来,估计要不少时间
![]() |
|
|
xszu | ||
江湖豪侠
![]() ![]() ![]() 性别: 男
积分:1377 阅读权限:2350
帖子: 528
加入时间: 2012/4/13
最后登录: 2014/7/18
|
这么长翻译出来,估计要不少时间 ![]() 还好现在可以直接在浏览器的时候翻译 |
|
|
cspioneer | ||
江湖少侠
![]() 性别: 男
积分:400 阅读权限:400
帖子: 66
加入时间: 2010/5/20
最后登录: 2013/3/14
|
不用翻译就和看小人书似的,就看图,和demo就行了
![]() |
|
|
cspioneer | ||
江湖少侠
![]() 性别: 男
积分:400 阅读权限:400
帖子: 66
加入时间: 2010/5/20
最后登录: 2013/3/14
|
980px 宽度,怎么设置尺寸啊,似乎不是很很整齐
|
|
|
坚强 | ||
江湖新秀
![]() ![]() ![]() 性别: 男
积分:271 阅读权限:349
帖子: 63
加入时间: 2011/8/20
最后登录: 2014/10/18
|
我猛一看还以为是外国网站呢,英文不太好,看的一知半解 |
|
|