`

bootstrap typography

 
阅读更多

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>


 

 

 

 

 

 

 

分享到:
评论

相关推荐

    bootstrap-5.1.3-dist.zip

    3. **CSS样式**:Bootstrap的CSS框架包括全局CSS设置、型录(typography)、布局工具、表单控件以及实用的类,帮助开发者快速创建美观的界面。 4. **JavaScript插件**:除了CSS,Bootstrap还包含一系列基于jQuery的...

    bootstrap.min.js+bootstrap.css

    `bootstrap.css`则是Bootstrap的CSS文件,它定义了Bootstrap的样式规则,包括栅格系统(grid system)、排版(typography)、表单(forms)、按钮(buttons)、表(tables)、图像(images)、代码(code)以及各种...

    bootstrap最新模版20套

    5. ** Typography 和 Grid System**:Bootstrap提供了统一的排版样式和强大的栅格系统。栅格系统帮助开发者创建灵活的布局,而良好的排版则确保内容清晰易读。 6. **Jumbotron 和 Carousel**:Jumbotron是Bootstrap...

    bootStrap3及jquery、离线文档.zip

    5. **排版(Typography)**:Bootstrap 3 提供了一系列的文本样式和排版工具,如h1到h6的标题、段落、强调文本、引用等。 6. **图标(Glyphicons)**:Bootstrap 3 包含一套基本的图标集,可以方便地插入到网页中,...

    twitter-bootstrap-typography-demo

    "twitter-bootstrap-typography-demo"是基于这个框架的一个排版设计的实战演示,旨在展示如何利用Bootstrap来实现美观且易读的文本样式。 Bootstrap的核心之一就是其强大的排版系统,它包括了一系列用于控制字体、...

    bootstrap-3.3.7-dist

    8. **排版(Typography)**:Bootstrap提供了统一的排版样式,包括字体、行高、段落间距等,以确保一致的视觉体验。此外,还有对标题(Headings)、引用(Blockquotes)、列表(Lists)等的预设样式。 9. **辅助类...

    bootstrap-3.3.6-dist

    3. **样式和字体**:Bootstrap包含了一套全面的CSS样式,如排版(typography)、颜色方案、按钮样式、表格(tables)、图像(images)和代码高亮(code)。此外,它还集成了Google的Open Sans和Glyphicons字体库,...

    bootstrap4官方下载zip包

    4. ** Typography**:Bootstrap 4内置了丰富的排版样式,包括字体、标题、段落、引用等,确保文本在各种设备上都能保持一致的视觉效果。 5. **颜色系统**:Bootstrap 4定义了一系列色彩变量,用于按钮、链接、警告...

    基于Bootstrap的后台管理界面

    5. ** Typography**:Bootstrap提供了统一的排版样式,包括字体、行高、颜色等,确保整个网站的视觉一致性。 6. **图标集**:Bootstrap通常与Font Awesome等图标库结合使用,提供大量的矢量图标,用于增强界面的...

    bootstrap极客学院上

    3. **样式**:Bootstrap的CSS样式包括了全局的HTML元素样式、可自定义的排版(typography)、颜色方案以及间距(spacing)规则,确保了整体设计的一致性。 4. **JavaScript插件**:Bootstrap的一些组件依赖于...

    Bootstrap for ASP.NET MVC

    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 ...

    html5+bootstrap前端框架

    8. `typography.html`:可能包括字体、排版和文本相关样式。 9. `gallery.html`:可能是图片画廊的示例,利用Bootstrap的响应式布局展示图像。 10. `chart.html`:可能使用了图表库(如Chart.js或Highcharts)与...

    bootstrap3.3 布局工具 离线版本

    5. ** Typography 和 样式**:Bootstrap 提供了一套清晰的排版指南和基础样式,包括字体、颜色、间距、边距等,确保了设计的一致性。 6. **可视化布局系统**:提到的“可视化布局系统”可能指的是Bootstrap的网格...

    Jack Spurlock - Bootstrap

    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 ...

    Bootstrap4_for_AxureRP8.rar

    5. **改进的 Typography**:优化了排版样式,提供更好的可读性和一致性。 6. **更强的辅助类**:添加了更多的实用辅助类,便于快速实现常见样式调整。 在AxureRP8中使用Bootstrap4元件库,用户可以: 1. **导入...

    bootstrap3.3.0dist

    5. ** Typography**:Bootstrap包含了统一的排版样式,如字体、行高、对齐方式等,使得文档内容易于阅读。 6. **图标库**:Bootstrap自带一套Glyphicons图标集,提供大量的矢量图标供开发者使用,增强界面视觉效果...

    bootstrap后台模板,快速生成网页

    6. ** Typography 和 样式**:Bootstrap提供了统一的排版、标题、段落、引用等文本样式,以及表格、图像、代码等元素的样式,保持了整体设计的一致性。 7. **无障碍支持**:Bootstrap遵循Web内容可访问性指南(WCAG...

    Bootstrap-中文-API.chm

    9. **辅助类(Helper classes)**:Bootstrap提供了一系列辅助类,如排版类(typography helpers)、颜色类(color utilities)和间距类(spacing utilities),可以帮助开发者快速调整元素样式。 10. **CSS样式**...

Global site tag (gtag.js) - Google Analytics