http://twitter.github.com/bootstrap/base-css.html#typography
国内:
http://ninghao.net/bootstrap/components.html
1.
Bootstrap's global default font-size
is 14px, with a line-height
of 20px. This is applied to the <body>
and all paragraphs. In addition, <p>
(paragraphs) receive a bottom margin of half their line-height (10px by default).
缺省font-size:14px line-height 20px bootom-margin:10px
2.Make a paragraph stand out by adding .lead
.
<p class="lead">...</p>
3.Emphasis 强调
三个tag:<small> <strong>(以粗体显示)<em>(以斜体显示)
4.Emphasis classes 文字的颜色区分
如:muted(柔和)、text-warning、text-error、text-info、text-success
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
5.Abbreviations缩写
<abbr title="attribute">attr</abbr> 鼠标移到attr处会显示attribute的解释
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr> 小字体显示,initialism是词首字母缩略词的意思
6.blockquote引用
7.form
7.1 from-search圆角显示输入框
Add .form-search
to the form and .search-query
to the <input>
for an extra-rounded text input.
<form class="form-search"> <input type="text" class="input-medium search-query"> <button type="submit" class="btn">Search</button> </form>
7.2Inline form 不换行显示多个控件
7.3Horizontal form(labe右对齐,控件左对齐)
Add .form-horizontal to the form Wrap labels and controls in .control-group Add .control-label to the label Wrap any associated controls in .controls for proper alignment
例子:http://twitter.github.com/bootstrap/base-css.html#forms
7.4前或后加文字lable+input或在一行
<div class="input-prepend"> <span class="add-on">@</span> <input class="span2" id="prependedInput" type="text" placeholder="Username"> </div> <div class="input-append"> <input class="span2" id="appendedInput" type="text"> <span class="add-on">.00</span> </div>
<div class="input-prepend input-append"> <span class="add-on">$</span> <input class="span2" id="appendedPrependedInput" type="text"> <span class="add-on">.00</span> </div>
分享到:
相关推荐
Setting up 56 Styling typography 57 Aligning text 61 Text transformation 62 Blockquotes 62 Styling listing elements 64 Creating and styling buttons 67 Which elements are eligible to use Bootstrap's ...
twitter-bootstrap-typography-demo
Bootstrap, a leading open source frontend framework, takes care of typography, form layouts, and user interface components, allowing a developer to focus on writing code. Integrating ASP.NET's ...
Discover how easy it is to design killer interfaces and responsive websites with the Bootstrap framework. This practical book gets you started building pages with Bootstrap’s ...
You'll understand how to use Bootstrap 4 for typography, forms, and modules. You'll understand how to structure your page and your code to be optimally efficient. What You'll Learn How to use ...
You’ll understand how to use Bootstrap 4 for typography, forms, and modules. You’ll understand how to structure your page and your code to be optimally efficient. What You’ll Learn How to use ...
Module 1: Bootstrap 4 By Example Chapter 1: Getting Started 3 Getting Bootstrap 4 Setting up the framework 5 Folder structure 6 Warming up the sample example 6 Bootstrap required tags 8 Building our ...
Leverage carefully-built CSS styles for typography, buttons, tables, forms, and more Deploy Bootstrap’s jQuery plugins to create drop-downs, switchable tabs, and an image carousel
Typography Buttons Tabs & Accordions Unlimited Nav Tabs Widget Boxes Media Object Simple Line Icons Icons Tree Views Language Bar & Icons Form Elements Form Plugins Form Validation Form ...
Clean typography Responsive design Built with Bootstrap 3.3+ Well organized and commented code Retina-ready icons – FontAwesome and Halflings Responsive Graphs and charts for all your possible ...
sublime-bootstrap4:已弃用| 用于Sublime Text 3的Bootstrap 4片段
这个项目是关于Bootstrap 5和SASS的 包含main.SCSS fils @import“ utils / _variables”; @import“ utils / _helper”; @import“ utils / _mixins”; @import“ base / _reset”; @import“ base / _...
包括响应式布局和使用Bootstrap 4.5构建的高质量UI。 | | | 该存储库包含的有限免费版本。 ,带有后端的 , , 和版本也都可用,并以完整包装形式提供。 免费Vue.js版本可作为 产品特点 使用此模板,您将能够利用...
Use Responsive Grid System, Bootstrap, and Foundation frameworks for responsive web design Learn how to use the latest features of CSS including custom fonts, nth-child selectors (and some CSS4 ...
ScaleText保留Typography的纵横比,同时仍保持可读性。 人们不再需要编写媒体查询来缩放文本。 ScaleText可以消除网页上任何类型的显示器(无论是智能手机,平板电脑还是笔记本电脑)中的代码异味并动态处理字体...
我从官方988元购买的,保证带文档 未压缩; 文件夹和文件结构: Hplus-v.3.0.1/ ├── css/(css文件夹,... ├── typography.html(排版) ├── webim.html(WebIM即时通讯) ├── widgets.html(小部件)
不是预加载所有 Bootstrap 的 CSS 组件,lesser 包括基本元素:网格、排版和强大的 mixin,其余的都放在一边。 针对响应式排版进行了优化,Lesser 还预装了以下插件: 用法 安装较少 bower install lesser 在此...