20180820 bootstrap学习笔记

2019-03-19  本文已影响0人  瑶九九

Bootstrap简介

基本了解

Bootstrap是由Mark Otto和Jacob Thornton合作完成的，基于HTML、CSS、JavaScript的基础上开发的前端开发框架，具有简洁、直观、强悍的优点，使Web开发更加快捷。
Bootstrap由动态css语言less写成，个人理解是将常用的一些样式打包成一些类，在需要使用的时候，直接调用相应的类，就可以达到预期的样式形式，不用利用组件和js进行进一步的组合封装。

Bootstrap包含内容

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
CSS：Bootstrap 自带以下特性：全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
JavaScript 插件：Bootstrap包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。
定制：您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。
——百度百科

Bootstrap特点

  1. 移动设备优先，然后才是桌面设备，框架包含了贯串与整个库的移动设备优先的样式
  2. 响应式设计，能够自适应于台式机、平板电脑、手机，确保了适当的绘制和触屏缩放，同时可以设置禁止缩放功能，使网站看上去感觉更像原生应用
  3. 包含了功能强大的内置组件，易于定制
  4. 它是开源的

Bootstrap浏览器/设备支持

| | Chrome | Firefox | IE | Opera | Safari |
| :---------|
| Android | YES | YES | 不适用 | 不适用 | 不适用 |
| IOS | YES | 不适用 | 不适用 | 不适用 | YES |
| Mac OS X | YES | YES | 不适用 | YES | YES |
| Windows | YES | YES | YES | YES | 不适用 |

学习笔记

！DOCTYPE必要

Bootstrap使用了一些HTMl5元素和CSS属性，因此为了让这些元素和属性正常工作，必须保证在使用Bootstrap项目的开头包含<!DOCTYPE html>
以下是Bootstrap手册上给出的一份HTML的基本模板，之后网页新增的内容只要在这份模板的基础上进行增删基本就可以实现了

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

如果在Bootstrap创建的网页开头不使用<!DOCTYPE html>，可能将导致一些浏览器显示不一致的问题

移动设备优先

上面说过Bootstrap是对移动设备优先的，因此为了让Vootstrap开发的网站对移动设备更友好，确保适当的绘制和触屏缩放是有必要的，因此最好在网页的head之中添加viewport meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
device-width保证网页能在带有不同屏幕分辨率的设备下仍然能呈现出预想的格式
initial-scale=1.0是让网页以1:1的比例呈现，不会有任何的缩放
另外可以通过为viewport meta标签添加user-scalable=no来禁止其缩放功能

网格系统

Bootstrap提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或viewport尺寸的增加，系统会自动分为最多12列
在查看相关资料后，个人认为网格系统就类似以前用过的方块本，将一页纸竖向分为几块，最多12块，所有长度的判定都是在页面分为12格之后，再根据相应的需求进行合并


1.png

下表总结了Bootstrap网格系统如何跨多个设备工作


2.png

下图是我根据菜鸟教程中的学习进行实践的结果


3.png
注意事项

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

强调

类似html，bootstrap将文本的一些常用的样式打包成一个个类，调用这个类时就会出现相应的形式，而html中是需要通过<strong><em>等标签来进行修改表现形式
下图是我进行尝试时创建的html

4.png

图中比较不明显，但实际上可以比较明显的感觉到container是一个居中的盒子，来自bootstrap的container带了自己的光环，而像html里的盒子模型，都是需要自己自动设置margin、padding来使这个盒子居中

引用

下图是菜鸟教程中的示例图


5.png

这个示例中采用了html的三个标签，<blockquote><small><cite>
其中<cite>标签是我平时不常用的，所以去网上找了一些关于它的资料

<cite> 标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
按照惯例，引用的文本将以斜体显示。
用 <cite>标签把指向其他文档的引用分离出来，尤其是分离那些传统媒体中的文档，如书籍、杂志、期刊，等等。如果引用的这些文档有联机版本，还应该把引用包括在一个<a> 标签中，从而把一个超链接指向该联机版本。
<cite> 标签还有一个隐藏的功能：它可以使你或者其他人从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器，它能够自动整理引用表格，并把它们作为脚注或者独立的文档来显示。<cite> 标签的语义已经远远超过了改变它所包含的文本外观的作用；它使浏览器能够以各种实用的方式来向用户表达文档的内容。

另外，在这个例子中值得注意的是，这个引用示例中引用的bootstrap的类是pull-right，表示向右对齐，一般的引用在没有声明```class="pull-right"时统一向左对齐

列表

列表部分大致上和html相似，<ol><ul>分别表示有序列表和无序列表，列表内容前用<li>表示块级，自动换行
在这一部分里，比较不同的是<dt><dl><dd>这三个标签，<dl>是最外层的包裹，表示定义列表，<dt>代表定义术语，表示自主定义列表的每一个主分支点的名字，<dd>相应的表示分支点的内容
在列表这一部分的包装类有.list-inline .dl-horizontal，前一个类声明后，会将列表变成内联样式，后一个类声明后会将列表水平放置，从类名上也可以比较直观的看出这个类是针对自定义列表的，因此列表水平放置就是主分支和分支点写在同一行上
下图是进行尝试后得到的结果

7.png

代码

Bootstrap提供令人两种方式显示代码

  1. 内联显示：<code>
  2. 以代码块形式显示：<pre>
    需要注意的是：显示的代码中标签前后的<、>是需要分别用&lt以及&gt来表示的
    下图是我用来作对比的一个图，一个用&lt以及&gt来表示，一个直接用<、>来表示
    8.png
    9.png

从图上的结果比较能清楚的看出来，如果想要添加代码，必须要用&lt以及&gt来表示<>，不然在编译的时候，计算机会直接把想作为代码部分显示的代码块也一并当做初始代码进行编译
另外，在<code><pre>之后的空格都会原封不动的显示出来

表格

Bootstrap提供了一个清晰的创建表格的布局
下表列出了Bootstrap支持的一些表格元素


11.png

下表样式可用于表格中：


12.png

.table样式如图：


13.png

.table-striped样式如图：


14.png

.table-bordered样式如图：


15.png

.table-hover样式如图：


16.png

当鼠标移动到某一栏的内容时，那一行都会显示成灰色

表单

Bootstrap提供了下列类型的表单布局：

  1. 垂直表单（默认）
    向父<form>元素添加role=“form”
    把标签和控件放在一个带class.form-group的<div>中
    向所有的文本元素<input>、<textarea> 和 <select> 添加 class ="form-control"

  2. 内联表单
    内联表单中所有元素都是内联的
    如果需要一个内联表单内的元素都向左对齐，标签并排，就在<form>标签内添加form-inline类

    17.png

  3. 水平表单
    水平表单的呈现形式和其他表单有所不同，它是将前面的属性名称和后面需要输入的表单内容并成一行
    步骤：
    a. 向父 <form> 元素添加 class .form-horizontal
    b. 把标签和控件放在一个带有 class .form-group 的 <div> 中
    c. 向标签添加 class .control-label


    18.png

静态控件

如果需要在一个水平表单内的表单标签后放置纯文本时，可以在 <p> 上使用 class .form-control-static
当输入框input接收到：focus时，会采用设立focus时的样式
如下图所示代码块

19.png

表示当鼠标悬停在链接上，或者点击过的链接，颜色都会被设置成为#2a6496，同时，会呈现一条下划线
另外，点击过的链接会另外呈现出颜色为#333的虚线轮廓

上一篇下一篇

猜你喜欢

热点阅读