第一次接触神奇的Bootstrap基础排版

前端之家收集整理的这篇文章主要介绍了第一次接触神奇的Bootstrap基础排版前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Bootstrap是Twitter推出的一个简单灵活的,基于HTML5和CSS3的用于搭建WEB前端页面的html、css、javascript工具集。拥有友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档,自定义JQuery插件,完整的类库,基于Less等特点。Bootstrap让Web开发更迅速、更简单。

1.Bootstrap下载

官网:;新手入门:

我们可以在官网下载到Bootstrap,Bootstrap的源码,如果不想下载,还可以使用Bootstrap提供的CDN。

2.Bootstrap文件结构

bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css │ └── bootstrap-theme.min.css.map ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2

3.Bootstrap的HTML标准模板

<Meta charset="utf-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> <Meta name="viewport" content="width=device-width,initial-scale=1"> Bootstrap的HTML标准模板

Hello,world!

4.Bootstrap的标题

和普通的HTML页面一样,Bootstrap定义标题也是使用标签h1到h6,只不过Bootstrap覆盖了其默认的样式,使其在所有浏览器下显示效果是一样的,定义的具体规则如下表所示:

标题

标题

标题标题

标题标题

<div class="h1">标题


<div class="h2">标题

<div class="h3">标题

注意:副标题行高都是1,font-weight不加粗,颜色为灰色(#999);h1~h3的副标题,大小为标题的65%,h4~h6的副标题,大小为标题的75%;详细代码请参阅bootstrap.css文件中第407行~第443行。

5.Bootstrap的内容

1)强调内容

在实际项目中,对于一些重要的文本,希望突出强调的部分都会做另外的样式处理。Bootstrap同样对这部分做了一些轻量级的处理。

通过添加类名“.lead”让一个段落p突出显示,其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理。用法如下:

普通文本

2)通过颜色来表示强调

例如:

3)粗体和斜体

粗体使用b标签或h3标签来实现;斜体使用em标签或i标签来实现。

普通文本粗体普通文本

普通文本

粗体

普通文本

普通文本斜体普通文本

普通文本斜体普通文本

4)文本对齐

Bootstrap通过定义四个类名来控制文本的对齐风格:

6.Bootstrap的列表

Bootstrap根据平时的使用情形提供了六种形式的列表:普通列表、有序列表、去点列表、内联列表、定义列表、水平定义列表。

1)普通列表

  • 普通列表1
  • 普通列表2

2)有序列表

  1. 有序列表1
  2. 有序列表2
  1. 有序列表1
  2. 有序列表2
    1. 有序列表2.1
    2. 有序列表2.2
  3. 有序列表3

3)去点列表

给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。

有序列表1
  • 有序列表2
  • 4)内联列表(为制作水平导航而生)

    像去点列表一样,通过添加类名“.list-inline”来实现内联列表,把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示

    导航栏条目1
  • 导航栏条目2
  • 5)定义列表

    Bootstrap定义列表只是调整了行间距,外边距和字体加粗效果

    北京
    中国的首都。
    上海
    国家中心城市,超大城市。

    6)水平定义列表

    水平定义列表就像内联列表一样,Bootstrap可以给dl标签添加类名“.dl-horizontal”给定义列表实现水平显示效果

    北京
    中国的首都。
    上海
    国家中心城市,超大城市。

    7.Bootstrap的表格

    Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。具体如下:

    <Meta charset="utf-8"> 基础表格

    基础表格

    表格标题 斑马线表格
    表格标题表格标题
    表格标题 带边框的表格
    表格标题表格标题
    表格标题 鼠标悬浮高亮的表格
    表格标题表格标题
    表格标题 紧凑型表格
    表格标题表格标题
    表格标题 响应式表格
    表格标题

    这部分代码包含了Bootstrap常用的表格,效果图如下所示:

    Bootstrap还为表格的行元素tr提供了五种不同的类名(对应的源码,请查看bootstrap.css文件中第1484行~第1583行),每种类名控制了行的不同背景颜色,具体说明如下表所示:

    其使用非常的简单,只需要在元素中添加上表对应的类名,就能达到效果

    注意: 1.要实现悬浮状态,需要在标签上加入table-hover类。 2.除了”.active”之外,其他四个类名和”.table-hover”配合使用时,Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置,所以如果需要给tr元素添加其他颜色样式时,在”.table-hover”表格中也要做相应的调整。

    如果大家还想深入学习,可以点击进行学习,再为大家附两个精彩的专题:

    系列文章:

    第一次接触神奇的Bootstrap网格系统

    第一次接触神奇的Bootstrap表单

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    猜你在找的Bootstrap相关文章

    表格标题表格标题
    表格标题表格标题