Lijana在全栈web/移动开发方面有11年以上的经验, QA, 项目管理, entreprenueurship, and design, too.
PREVIOUSLY AT
Lijana在全栈web/移动开发方面有11年以上的经验, QA, 项目管理, entreprenueurship, and design, too.
PREVIOUSLY AT
Bootstrap是最好的和最常用的HTML/CSS/JS前端框架之一. Almost any web developer who has made a website or two has heard of this popular framework. 它提供了许多现成的组件和资源, Bootstrap可以显著加快应用程序的开发速度.
每个优秀的开发人员都关心节省开发过程中的每一秒. 高效意味着更快的部署——我们部署得越快、越频繁, 我们的终端用户越快得到更好的产品. Therefore spending a few hours or days on planning the process and strategy can save us not only a few minutes, but many hours.
I personally have been working with this framework for the last 4 years on 90% of my projects. In this article, I would like to share with you a few tips which can help you to speedup your application development without missing some of Bootstrap’s awesome capabilities.
尽管它是一个很容易上手的框架, 不要被它的简单所迷惑. 在匆忙投入一个项目之前, spend time playing with the framework and getting the lowdown on the key pieces of its infrastructure and exciting components. 这将有助于避免 10个最常见的引导错误.
Dedicate an hour to read documentation on Bootstrap’s site or learn more from a great post on Toptal’s blog, What is Bootstrap? 关于什么，为什么和如何做的简短教程. 很棒的文章 你可能不知道的3个提示和技巧 on scotch.io.
If you find reading documentation a boring task and you would rather read some code instead, 那么最好的起点是 引导程序的网站. 打开网页检查器, 浏览网站的源代码, 检查每个代码块及其元素. 这可能是掌握基础知识的最好和最快的方法之一.
深入研究页面结构，了解布局是如何构建的.
...
… resize your browser window or use Chrome’s Viewport Resizer to learn more about media query utilities.
/*特别小的设备(手机，小于768px) */
/*没有媒体查询，因为这是Bootstrap的默认设置*/
/*小型设备(平板电脑，768px及以上)*/
@media (min-width:
@screen-sm-min) { ... }
/*中型设备(桌面，992px及以上)*/
@media (min-width:
@screen-md-min) { ... }
/*大型设备(大型桌面，1200px及以上)*/
@media (min-width:
@screen-lg-min) { ... }
@media (max-width: @screen-xs-max) { ... }
@media (min-width:
@screen-sm-min)和(max-width: @screen-sm-max) { ...
}
@media (min-width:
@screen-md-min)和(max-width: @screen-md-max) { ...
}
@media (min-width:
@screen-lg-min) { ... }
以及如何以及何时使用它们, 熟悉列类，以获得最佳的响应式设计结果.
Left column
Right column
看看W3Schools，你会在那里找到一个 完整的Bootstrap参考 of all CSS classes, components, and JavaScript plugins - all with “Try it Yourself” examples:
检查源代码，并尝试熟悉尽可能多的类名. 了解它们的用例——如何、何时以及为什么. 这将帮助您在编写HTML和样式化UI元素时更快地前进. Learning more about these components will help you avoid bloating your stylesheets with lots of unnecessary duplicate code. 通过使用和重用现有组件来保持简洁, instead of creating too many new ones that do the same as the ones that already exist within the framework.
当在由几个开发人员组成的团队中工作时，这一点尤其重要. Make sure you do not end-up writing tons of duplicated code creating too many styles for the same case each time over and over again when translating new designs to the code. Keeping the UI development consistent and well documented with UI style guides can also add a couple of knots up to the productive teamwork. In addition, you will find that when adding new features or pages to your application you will move forward with less frustration. 我参与了十几个大项目, and in comparison I’ve seen a number of cases where the framework was literally hacked and every time the new CSS code was added it would break UI on other pages. 浏览所有的网站并修复这些类型的错误会让人筋疲力尽. Not only that, think about the cost and all the money spent on extra developer time and QA help.
如果你需要将div和/或内容居中，你可以使用以下类之一:
Use text-center
I am centered text
… or center-block
I am centered text
not .center or
如果你需要更小或更大的字体，你可以使用这些类之一:
I'm bigger paragraph text.
I'm smaller paragraph text.
如果您需要更大或更小的标题，不要忘记 .h1, .h2, .h3, .h4, .h5, .h6, .small. Use it like this:
Smaller Title with .h2
Bigger Title with .h1
Smaller Title with .small
不需要创建类 .清楚，你可以使用Bootstrap的 .clearfix instead.
...
Just use .Clearfix而不是定义自己的样式(或者更糟，使用内联样式):
...
Remove the default list-style 并在列表项上留下空白. 这只适用于直接子列表项. 以防您需要对嵌套列表应用相同的方法, 您还需要为它们添加类名.
- ...
- ...
类似地，对于复选框或单选按钮，我们有 .checkbox-inline and .radio-inline.
你总是可以加上 .form-inline 到你的表单(它不一定是 )用于左对齐和内联块控件.
想象一下更大或更小的按钮? Add .btn-lg, .btn-sm, or .btn-xs 额外尺寸.
用类将元素向左或向右浮动. !important 是为了避免特异性问题. 类也可以与任何CSS预处理器混合使用.
Use .pull-right, .pull-left, .text-right, .text-left instead of .right, .left, .left-float, .right-float.
...
...
使用文本对齐类轻松地将文本重新对齐到组件.
Left aligned text.
Right aligned text.
在做大项目的时候, I found that the best way to use the framework effectively is to build off of it and not customize its core files directly. 这个概念类似于您可能在项目中使用的其他平台和库.
Although, if you are building a small site and have a design mockup that might not require much change or updates, 您可能会发现，根据您的需要定制框架是更好的选择. For example you might want to strip out all of the stuff you don’t need directly in the framework files, or you can go to Bootstrap’s site customize section where you can easily configure all the components, variables, 和jQuery插件，以获得自己的版本. In this case, you might speed up your site development and cut the time styling or dealing with overrides.
However, if you are starting or working on a big site with several developers or more - it is best to keep things separated and well organized. Move the framework files outside the main custom CSS folder and keep it in a non-edit non-version folder and remove unused CSS by utilizing Grunt or Gulp plugins grunt-uncss or gulp-uncss. 另一种保持独立的方法是通过CDN提供服务. Having the framework’s code separate and untouched gives you a better and faster option when upgrading it to the latest version. 它还有助于最小化许多可伸缩性和样式问题, 或者在快速持续的UI更改中进行添加时减慢速度.
利用像Yeoman或Slush这样的脚手架工具, 以及像鲍尔这样的包管理器, Python’s pip, Node’s NPM, 或者Ruby Gems，因为它们做的不仅仅是将文件添加到应用程序的路径中. I really appreciate the power of Bower - it can definitely do a little more than just download a file or two. Using a package manager is a good idea since most likely the complexity of your project will grow and the amount of third-party plug-ins and how you maintain them will become insane and time consuming. Bower will help you keep track of each plugin and its dependencies including anything related to Bootstrap.
Bootstrap的流行带来了大量有用的资源:文章, tutorials, 第三方插件和扩展, templates, theme builders, and so on. 因此，无论您是在寻找灵感还是代码片段, 你将拥有加速进步所需的一切.
你会认为有这么多可用的资源, 每个人都会利用它，并在他们的项目中使用它, 但不管你信不信，事实并非如此. Some developers waste their time and slow project progress by skipping some great code snippets or resources. 虽然你不应该只是盲目地复制粘贴, 您必须了解好的部分，并根据自己的编码风格和技术需求采用它们. The ability to find and sort out good resources and be able effectively utilize it is also a skill and requires years of experience and knowledge.
下面列出了一些有用的入门资源:
来自Bootstrap创建者的官方主题: themes.getbootstrap.com.
市场与高级Bootstrap主题和模板: wrapbootstrap.com, themeforest.net, creativemarket.com/themes/bootstrap.
免费引导主题 & Templates: startbootstrap.com, www.bootstrapzero.com, shapebootstrap.net/free-templates.
“The Big Badass List”——319个有用的Bootstrap资源列表: bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources/
BootstrapUI 由AngularUI团队用纯AngularJS编写.
React-Bootstrap 是可重用的前端组件库吗. You’ll get the look and feel of Twitter Bootstrap, but with much cleaner code, via Facebook’s React.js framework.
Bootstrap 3与Django的集成: http://github.com/dyve/django-bootstrap3
Jekyll-Bootstrap 是一个完整的博客支架基于Jekyll的博客.
WordPress入门主题Sage 具有现代前端开发工作流. 基于HTML5 Boilerplate, gulp, Bower和Bootstrap.
Bootstrap的材料设计 is a theme for Bootstrap 3 which lets you use the new Google Material Design in your favorite front-end framework.
Bootstrap is one of the best available frameworks that offers you many great tools and resources in order to accelerate and speed up your application development process.
在设计和编码一个出色的UI时，它可以节省你许多小时/天的工作. Every component and plugin is thoroughly documented with live examples and code blocks for easier use and customization. 很多人都强烈推荐它 developers 在原型制作和生产中都很受欢迎. 这是一个非常好的工具，使移动友好的响应式网站. Bootstrap为许多类型的项目提供了一个很好的起点, 选择把它交给a designer 然后说，让这个看起来更漂亮!而不需要他们破解代码. Most importantly, 它允许你先发展结构, and address fonts, 颜色和花哨的风格之后. Take the time to study what it can do and be smart about how to use it the best way so you can get where you want faster.
Lijana在全栈web/移动开发方面有11年以上的经验, QA, 项目管理, entreprenueurship, and design, too.
PREVIOUSLY AT
世界级的文章，每周发一次.
世界级的文章，每周发一次.
Join the Toptal® community.