bootstrap框架之基本CSS样式

排版

标题

从 <h1> 到 <h6> 所有的HTML标题都是可用的.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Body copy

Bootstrap定义的全局 font-size 是 14px，line-height 是 20px。这些样式应用到了 <body> 和所有的段落上。另外，对 <p> (段落)还定义了1/2行高(默认为10px)的底部外边距(margin)属性。

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Lead body copy

要突出一个段落只需加 .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>

构建在Less

排版规模是在variables.less这2个LESS变量: @baseFontSize and @baseLineHeight的基础上. 第一个是贯穿整个font-size, 第二个是line-heightThe. 我们使用这些变量和一些简单的数值来创建margin, padding, 和 line-height 等等类型.

强调

<small>

强调内嵌和文本块, 使用小标签.

This line of text is meant to be treated as fine print.

<p><small>This line of text is meant to be treated as fine print.</small>
</p>

加粗

用font-weight强调一小段文字.

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

斜体

用 斜体 强调一小段文字.

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

注意! 在HTML5可随意使用 <b> 和 <i>, <b>是为了突出词或短语, 而不会有其他重要含义, 而 <i> 提供主要是语态, 专业术语等含义.

对齐

简单方便将文字对齐的属性.

居左文字.

居中文字.

居右文字.
  1. <p class="text-left">居左文字.</p>
  2. <p class="text-center">居中文字.</p>
  3. <p class="text-right">居右文字.</p>

强调的属性

通过一些颜色属性来强调.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
  1. <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
  2. <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
  3. <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
  4. <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
  5. <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

缩写

参照在鼠标悬停在缩写和缩写词就显示完整内容的HTML的<abbr> 元素. abbr元素带有 title 属性之后, 缩写的部分的底部会有一条虚线, 并且鼠标悬停在上面会有一个“帮助”符号, 同时还会显示title所提供的内容.

<abbr>

如想看完整文字可把鼠标悬停在缩写词, 但需要包含 title 属性.

An abbreviation of the word attribute is attr.

<abbr title="attribute">attr</abbr>

<abbr class="initialism">

如需对缩写词字体大小稍微缩小, 可添加 .initialism .

HTML is the best thing since sliced bread.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

地址

让联系信息最接近原始格式的形式呈现.

<address>

换行使用 <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Full Name
first.last@example.com

  1. <address>
  2. <strong>Twitter, Inc.</strong><br>
  3. 795 Folsom Ave, Suite 600<br>
  4. San Francisco, CA 94107<br>
  5. <abbr title="Phone">P:</abbr> (123) 456-7890
  6. </address>
  7. <address>
  8. <strong>Full Name</strong><br>
  9. <a href="mailto:#">first.last@example.com</a>
  10. </address>

引用

在标准的引用里, 可以很简单的改变风格和内容.

默认引用

把任何 HTML 嵌套在 <blockquote> 里面即可. 对于直接的引用, 我们建议使用 <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  1. <blockquote>
  2. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  3. </blockquote>

引用选项

在标准的引用里, 可以很简单的改变风格和内容.

标出来源

添加 <small>> 标签来注明引用的来源. 来源标题可以放在这个<cite> 标签里面.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
  1. <blockquote>
  2. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  3. <small>Someone famous <cite title="Source Title">Source Title</cite></small>
  4. </blockquote>

备用显示

使用 .pull-right 属性, 可让引用向右靠齐.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
  1. <blockquote class="pull-right">
  2. ...
  3. </blockquote>

列表

无序列表

用于没有明确信息的列表.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul>
  2. <li>...</li>
  3. </ul>

有序列表

用于有明确或需按序号排序的信息的列表.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  1. <ol>
  2. <li>...</li>
  3. </ol>

无样式列表

用于不需要列表样式的列表里.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul class="unstyled">
  2. <li>...</li>
  3. </ul>

行(水平)列表

使用 inline 让列表项水平排列一行, 同时每项之间都有一定的间距.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
  1. <ul class="inline">
  2. <li>...</li>
  3. </ul>

描述

对一个(条款)列表进行关联描述.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
  1. <dl>
  2. <dt>...</dt>
  3. <dd>...</dd>
  4. </dl>

水平状态的描述

使用<dl>把列表和对其的描述一对一横向显示.适用于术语的定义/解释

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  1. <dl class="dl-horizontal">
  2. <dt>...</dt>
  3. <dd>...</dd>
  4. </dl>

注意!水平描述通过text-overflow会对过长而无法在左栏中完全显示的列名截断掉一部分. 而在较窄的视口(宽度)中, 会改变成垂直(形式)表述, 来适应当前屏幕.

bootstrap框架之基本CSS样式相关推荐

  1. 使用BootStrap框架设置全局CSS样式

    一.排版 标题 HTML 中的所有标题标签,<h1> 到 <h6> 均可使用.另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式. & ...

  2. vue动态获取css样式,Vue 框架之动态绑定 css 样式实例分析

    今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=""就可以了,使 ...

  3. java_web1:基本标签、form表单、frameset框架标签、CSS样式、javascript、servlet

    前端三剑客: html,css,js(javascript) html: Hyper Text Markup Language:超文本标记语言 针对字体,图片,视频,音频等等进行操作,设置字体颜色,大 ...

  4. Bootstrap无法加载CSS样式，或者CSS样式不生效

    可能的原因 1.路径写错了,如果没把握建议走CDN 2.文件路径有中文名,或者文件命名有中文名,这个情况有些时候可以有时候不可以 3.检查栅格系统的类前缀,有可能是小屏幕但是如果用lg可能导致看不出来 ...

  5. bootstrap思想总结_bootstrap学习心得总结-css样式设计分享

    由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么? 即前端页面搭建 ...

  6. Bootstrap全局css样式的使用

    教程目录 0x00 教程内容 0x01 准备环境 1. 新建HTML文件 2. 用浏览器打开 0x02 Bootstrap全局样式的使用 1. 引入Bootstrap样式资源 2. 修改css样式 3 ...

  7. Bootstrap框架(基础篇)之列表,表格,表单

    继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul><li>-& ...

  8. 用BootStrap框架编写旅游网页

    利用BootStrap编写一个简单的旅游网页 我决定了每周写一篇博客,分享自己所学的知识,这周是个简单的旅游网页制作. 这是效果图: 编写这个旅游网页利用BootStrap框架可以分为头部,正文,底部 ...

  9. 【一、bootstrap框架前端注册登录页面】

    一.使用bootstrap框架写一个简易的前端登录页面. 先上截图 下面开始记录本人使用bootstrap框架写这个登录页面的过程 1.bootstrap需要的配置文件 <!-- 新 Boots ...

最新文章

  1. roya mysql_MySQL安装及基础知识
  2. python可以写桌面软件吗-用Python编写一个桌面软件系统的步骤是什么？
  3. JavaScript基础04【逻辑、复制、关系、相等运算符、Unicode编码表】
  4. 双圆环环布带系法图解_库卡(kuka)机械臂KR210结构图解
  5. MacOS下如何通过命令搜索文件和打开文件
  6. php换设备登录逻辑,登录和退出登录的操作逻辑
  7. CentOS yum的详细使用方法
  8. string services
  9. gradle maven_Gradle vs Maven
  10. 分享：Python使用cookielib和urllib2模拟登陆新浪微博并抓取数据
  11. C#调用非托管代码（C++方法）的2种方式
  12. 程序员失业一月转行去送外卖，晒出当天收入，还以为看错了
  13. 打印机提示更换墨盒，但打印字仍很清晰，打印机设置还能用很久
  14. OverFeat,分类、定位、检测
  15. matlab求n阶行列式,发福利了，线性代数n阶行列式计算器！（需要的拿走吧）
  16. MAC-重新安装系统的三种方法
  17. IOS按钮排列自动换行
  18. Python骚操作：Python控制Excel实现自动化办公
  19. 计算机系统结构 2：局部性原理
  20. 常见DB2锁等待解决流程

热门文章

  1. 极米坚果等家用DLP投影仪维修指南
  2. SiR-alkyne与叠氮化物反应的可点击衍生物
  3. arm linux php,在ARM Linux系统上面安装Apache+sqlite+PHP的详细讲解 - Apache - 数安时代(GDCA)SSL证书官网...
  4. java火焰图的生成
  5. 商业插画师走尺：“声音主播”的画画世界
  6. 蔬菜大棚原理_温室大棚的工作原理及温室大棚分类
  7. python地理数据处理 下载_【实用书】Python地理数据处理，362页pdf，Geoprocessing with Python...
  8. Dev-C++下载与安装（中文汉化版）
  9. 华为荣耀系列手机无法查看logcat
  10. 快速上手前端开发，严选