美文网首页
Bootstrap学习(一)入门

Bootstrap学习(一)入门

作者: 筱平哥哥 | 来源:发表于2018-10-21 10:34 被阅读27次

Date: 2018-10-17

1、Bootstrap网格系统

Bootstrap网格系统定义:

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口的大小的增加而适当地扩展到12列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。

移动设备优先策略:

响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。


Bootstrap网格系统布局

Bootstrap网格系统工作原理:

  • 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。
  • 使用行来创建列的水平组。
  • 内容应该放置在列内,且唯有列可以是行的直接子元素。
  • 预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
  • 列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距(margin)取负,表示第一列和最后一列的行偏移。
  • 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个 .col-xs-4。

基本的网格结构

下面是 Bootstrap 网格的基本结构:

<div class="container">
  <div class="row">
    <div class="col-*-*">...</div>
    <div class="col-*-*">...</div>
  </div>
  <div class="row">
    <div class="col-*-*">...</div>
  </div>
</div>

2、Bootstrap排版

Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。
基本元素:

  • 标题:h1~h6
    • 内联子标题:用<small>或者添加 .small class
  • 强调:默认强调标签<small>(设置文本为父文本大小的 85%)、<strong>(设置文本为更粗的文本)、<em>(设置文本为斜体)
  • 列表:
    • 有序列表<ol><li></li></ol>
    • 无序列表<ul><li></li></ul>,可以使用 class .list-unstyled 来移除样式。也可以通过使用 class .list-inline 把所有的列表项放在同一行中。
    • 定义列表<dl><dt><dd></dd></dt></dl>,在这种类型的列表中,每个列表项可以包含<dt><dd> 元素。<dt>代表 定义术语,就像字典。接着,<dd><dt> 的描述。.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl>的默认样式堆叠在一起,随着导航条逐渐展开而排列在一行。

更多排版类:http://www.runoob.com/bootstrap/bootstrap-typography.html

更多排版类

3、Bootstrap表格

表格元素

Bootstrap 支持的一些表格元素:


表格元素

表格类

表格类

<tr>, <th> 和 <td> 类

下表的类可用于表格的行或者单元格:


行或单元格的类

相关文章

  • Bootstrap学习(一)入门

    Date: 2018-10-17 1、Bootstrap网格系统 Bootstrap网格系统定义: Bootstr...

  • 浅谈bootstrap的使用

    现在大部分刚开始学前端的人都要学习一下bootstrap框架,作为一个新入门的前端来说,bootstrap的却是一...

  • Bootstrap学习资源

    bootstrap笔记总结 Bootstrap入门笔记之(三)栅格系统 我的Bootstrap笔记,常用类名知...

  • Bootstrap

    Bootstrap中文网在简书上看到的一篇不错的关于bootstrap的文章。另一篇Bootstrap快速入门 1...

  • Bootstrap入门(一)

    什么是Bootstrap? Bootstrap是一种标准化的响应式页面的解决方案,包含js,css的大型框架,采用...

  • 前端快速开发框架BootStrap示例

    参考为什么前端工程师多不愿意用 Bootstrap 框架?boostrap入门示例Github bootstrap...

  • bootstrap table 教程+x-editable

    快速入门 bootstrap-table是一个基于Bootstrap的jQuery插件可以实现从数据库中提取数据到...

  • BootStrap入门

    Q1:BootStrap是什么? 简单、灵活的用于搭建Web页面的HTML、CSS、JS的工具集,即前端开发框架

  • Bootstrap入门

    Bootstrap简介Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。是基于 HTML、CSS...

  • bootstrap入门

    了解之路: 1. 首先按照官网了解一下,下载bootstrap文件,然后按照官网开始第一个页面;这样就能够了解到b...

网友评论

      本文标题:Bootstrap学习(一)入门

      本文链接:https://www.haomeiwen.com/subject/evrdzftx.html