您的当前位置:首页正文

Bootstrap框架入门准备

来源:图艺博知识网
  1. Bootstrap框架重要特性

一套完整的基础CSS插件。

丰富的预定义样式表。

一组基于jQuery的JS插件集。

一个非常灵活的响应式(Responsive)栅格系统,并且崇尚移动先行(Mobile First)的思想。

  1. Bootstrap下载地址
    Bootstrap框架的文件和源码可以在其官方网站()下载。打开网站的首页,单击Download Bootstrap按钮,跳转到下载页面。
    3. HTML标准模板
    HTML标准模板如下:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap基础模板</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">

  1. CSS基本语法
    Bootstrap的CSS组件的核心就是选择器的定义以及在各自优先级上的处理。
    4.1 优先级
    如何确定CSS的优先级?这里我们要先引入一个机制,分别用4个数字(a,b,c,d)表示优先级组合,比如1,1,1,1和0,1,0,1。它们的意思分别是:
    第一个数字(a)表示style属性,优先级最高。由于一般都是class样式,所以该值一般都是0。
    第二个数字(b)是该CSS选择器上的id数量的总和,一般都是1个。
    第三个数字(c)是用在该CSS选择器上的其他属性CSS选择器以及伪类的总和。这里包括class(.btn)和属性CSS选择器(比如li[id=red])。
    第四个数字(d)计算元素(就像table、p、div等)和伪元素(就像first-child等)。
    通用CSS选择器(*)是0优先级。
    如果两个CSS选择器有同样的优先级,在样式表中后面的那个起作用。
    计算下面两个选择器的优先级:

leftbar li#first { color: red; } #leftbar li:first-child{ color: blue; }

更多关于CSS的详细内容,可以阅读下面两篇文章:

Top