前端学习 之 Bootstrap （一）

时间  2019-11-19
标签 前端 学习 bootstrap 栏目 Bootstarp 繁體版
原文   原文链接

中文文档css

1、前言

一、简介

Bootsrtap做为一个前端框架，开箱即用，封装了前段开发的大量底层细节，开放灵活，对响应式设计网页很好支持，组件丰富，社区活跃。
特色：html

  • 可重用性
  • 一致性
  • 灵活的栅栏布局
  • 定制化
  • 社区活跃
  • 面向将来和开放式开发

二、下载

官网地址前端

2、预览

一、使用

直接引入
能够直接在HTML文件中引入Bootsrtapweb

<link href="css/bootsrtap.min.css" rel="styleesheet" media="screen">

Bootstrap CDN：
所谓CDN就是经过一个互联网部署在多个数据中心的大型分布式服务器系统。浏览器能够并行的从CDN下载文件，不须要从本身的服务器下载文件。这些文件不在同一个域中，不会受浏览器的限制（同时只能在一个域下载几个文件）。所以下载时不会一个一个排队。另外CDN会根据用户的位置和更快的路由速度来选择服务器下载文件。
优势：节省带宽，提升网站性能。bootstrap

<link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/版本号/css/bootstrap.min.css">

这也是web性能优化(页面访问)的一个方案api

二、移动设备优先

在 Bootstrap 3 中，对移动设备友好的。为了确保适当的绘制和触屏缩放，须要在 之中添加 viewport 元数据标签。浏览器

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

在移动设备浏览器上，经过为视口（viewport）设置 meta 属性为 user-scalable=no 能够禁用其缩放（zooming）功能。性能优化

<head>
    <meta name="viewport"  content="width=device-width, initial-scale=1, max-minum-scale=1, use-scalable=no">
</head>

三、布局容器

Bootstrap 须要为页面内容和栅格系统包裹一个 .container 容器。咱们提供了两个做此用处的类container与container-fluid。但这两种 容器类不能互相嵌套
用于固定宽度并支持响应式布局的容器前端框架

<div class="container">
  ...
</div>

container会使页面给人居中的感受服务器

.container-fluid类用于 100% 宽度，占据所有视口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

.container-fluid给人感受平铺整个页面的流式布局容器

3、栅格系统

一、简介

栅格系统用于经过一系列的行（row）与列（column）的组合来建立页面布局，内容就能够放入这些建立好的布局中，更好的实现设计的一致性。
在大屏幕中，栅格最多能够扩大到12列。小屏幕中全部的列都会堆叠起来。因为Bootstrap是移动优先，因此栅格实际上是在小屏设备中定义了尺寸，而之一中定义的栅格尺寸也是和中屏设备和大屏设备。
类前缀名：

  • 小尺寸手机屏幕：.col-xs- （分辨率<768px）
  • 平板屏幕：- col-sm- （分辨率(≥768px)）
  • 小尺寸桌面屏幕：-col-md- （分辨率(≥992px)x）
  • 大尺寸屏幕：.col-lg- （分辨率(≥1200px)）
    注：为了让网站页面有更好的而可读性，对列间距的宽度为默认30px。即列与列之间的空白区域。

二、不一样设备的页面

移动设备和桌面屏幕：使用.col-xs-* 和 .col-md-*

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

手机、平板、桌面：使用.col-xs-* 和 .col-md-，.col-sm-

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

栅栏系统中一行中有十二列，而多出12列，最后一个元素就会换行从新排列。

三、偏移与排列

偏移：在一行中，两个元素占据不一样的列数，不一样的元素也能够以间距隔开，列向右侧偏移。
列偏移： .col-md-offset-
这些类实际是经过使用 选择器为当前元素增长了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

列排列： .col-md-push-* 和 .col-md-pull-* 类能够改变列（column）的顺序。
两个元素在一行中先后排列，占据不一样的列数，使用列排列类就能够颠倒元素在页面中排列顺序。

3、排版

  • 标题：HTML 中的全部标题标签 都可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式
  • 页面主题：全局 font-size 设置为 14px，line-height 设置为 1.428。
  • 中心内容：经过添加 .lead 类可让段落突出显示
  • 内联：mark
  • 删除： del
  • 无用文本：s
  • 插入文本：ins
  • 下划线： u
  • 小号文本：small 默认为标准字体的百分之85
  • 强调文本：strong
  • 斜体：em
  • 高亮：
    • b用于高亮单词或短语，不带有任何着重的意味；
    • i 标签主要用于发言、技术词汇等
  • 对齐类：
    • .text-center 居中
    • .text-right 靠右
    • .text-left 靠左
  • 字母大小写：
    • .text-lowercase
    • .text-uppercase
    • .text-capitalize

缩略语：当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的 元素的加强样式。缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）, 但须要包含 title 属性。为缩略语添加 .initialism 类，可让 font-size 变得稍微小些。

4、练习

简单博客格式

一、 源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>blog</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <header class="row">
        <p class="col-md-2 col-md-offset-2"><strong>My Blog</strong></p>
        <p class="col-md-1 col-md-offset-5"><a href="#">登录</a></p>
        <p class="col-md-1"><a href="#">注册</a></p>
        <p class="col-md-1"><a href="#">退出</a></p>
    </header>
    <div class="row">
        <div class="col-md-9 col-md-push-3">
            <div class="text-center">
                <h2 class="text-capitalize">simple blog form</h2>
            </div>
            <div>
                <div class="col-md-4 col-sm-6 text-lowercase">
                    <p>
                        Maybe I'm foolish maybe I'm blind<br>
                        也许是我太傻，也许是我眼瞎<br>
                        Thinking I can see through this and see what's behind<br>
                        觉得我能看穿一切以及背后的真相<br>
                        Got no way to prove it so maybe I'm blind<br>
                        没法证实什么，也许是我被蒙蔽<br>
                        But I'm only human after all I'm only human after all<br>
                        但毕竟我是个凡人，我只是个凡人<br>
                        Don't put your blame on me<br>
                        请别把你的火撒在我身上<br>
                        Don't put your blame on me<br>
                        别把你的火撒在我身上<br>
                        Take a look in the mirror and what do you see<br>
                        看一眼镜中世界，你看到了什么<br>
                        Do you see it clearer or are you deceived in what you believe<br>
                        你洞穿了一切仍是被信仰所欺骗？<br>
                        Cos I'm only human after all you're only human after all<br>
                        由于我只是个凡人，你只是个凡人<br>
                    </p>
                </div>
                <div class="col-md-4 col-sm-6 text-uppercase">
                    <p>
                        Maybe I'm foolish maybe I'm blind<br>
                        也许是我太傻，也许是我眼瞎<br>
                        Thinking I can see through this and see what's behind<br>
                        觉得我能看穿一切以及背后的真相<br>
                        Got no way to prove it so maybe I'm blind<br>
                        没法证实什么，也许是我被蒙蔽<br>
                        But I'm only human after all I'm only human after all<br>
                        但毕竟我是个凡人，我只是个凡人<br>
                        Don't put your blame on me<br>
                        请别把你的火撒在我身上<br>
                        Don't put your blame on me<br>
                        别把你的火撒在我身上<br>
                        Take a look in the mirror and what do you see<br>
                        看一眼镜中世界，你看到了什么<br>
                        Do you see it clearer or are you deceived in what you believe<br>
                        你洞穿了一切仍是被信仰所欺骗？<br>
                        Cos I'm only human after all you're only human after all<br>
                        由于我只是个凡人，你只是个凡人<br>
                    </p>
                    <blockquote class="blockquote-reverse">famous song <cite title="Source Title">Source Title</cite></blockquote>
                </div>
                <div class="col-md-4 col-sm-12">
                    <blockquote title="stay hungry stay foolish">
                        <p>
                            Maybe I'm foolish maybe I'm blind<br>
                            也许是我太傻，也许是我眼瞎<br>
                            Thinking I can see through this and see what's behind<br>
                            觉得我能看穿一切以及背后的真相<br>
                            Got no way to prove it so maybe I'm blind<br>
                            没法证实什么，也许是我被蒙蔽<br>
                            But I'm only human after all I'm only human after all<br>
                            但毕竟我是个凡人，我只是个凡人<br>
                            Don't put your blame on me<br>
                            请别把你的火撒在我身上<br>
                            Don't put your blame on me<br>
                            别把你的火撒在我身上<br>
                            Take a look in the mirror and what do you see<br>
                            看一眼镜中世界，你看到了什么<br>
                            Do you see it clearer or are you deceived in what you believe<br>
                            你洞穿了一切仍是被信仰所欺骗？<br>
                            Cos I'm only human after all you're only human after all<br>
                            由于我只是个凡人，你只是个凡人<br>

                        </p>
                    </blockquote>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-md-pull-9">
            <ul>
                <li>day1</li>
                <ul>
                    <li>笔记一</li>
                    <li>笔记一</li>
                    <li>笔记一</li>
                </ul>
                <li>day2</li>
                <li>day3</li>
            </ul>
        </div>
    </div>
    <footer>
        <div class="text-center">
            <address>
                <strong> Twitter, Inc.</strong><br>
                <abbr title="Phone">Phone:</abbr>0000000
            </address>
        </div>
    </footer>
</div>
</body>
</html>

二、样式

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程