CSS之Bootstrap(快速布局)

简介

什么是Bootstrap?

Bootstrap官网

  • 框架:库 lib library
  • jQuery作为一个框架来讲,提供一套比较便捷的操作DOM的方式
  • 把大家都需要的功能预先写好到一些文件 这就是一个框架
  • Bootstrap 让我们的 Web 开发更简单,更快捷;
  • 注意是 Bootstrap 不是 BootStrap!这是一个词,不是合成词,其含义为:n. 引导指令,引导程序
  • Bootstrap 是当下最流行的前端框架(界面工具集);
  • 特点就是灵活简洁,代码优雅,美观大方;
  • 其目的是为了让 Web 开发更敏捷;
  • 是 Twitter 公司的两名前端工程师 Mark Otto 和 Jacob Thornton 在 2011 - 年发起的,并利用业余时间完成第一个版本的开发;

为什么使用Bootstarp?

  • 生态圈火,不断地更新迭代;
  • 提供一套美观大方地界面组件;
  • 提供一套优雅的 HTML+CSS 编码规范;
  • 让我们的 Web 开发更简单,更快捷;

注意:

使用 Bootstrap 并不代表不用写 CSS 样式,而是不用写绝大多数大家都会用到的样式

准备

下载Bootstrap

  • https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip
  • https://github.com/twbs/bootstrap/releases/download/v4.0.0-alpha.2/bootstrap-4.0.0-alpha.2-dist.zip

安装Bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>页面标题</title>
  <!-- 引入Bootstrap核心样式文件(必须) -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <!-- 引入Bootstrap默认主题样式(可选) -->
  <link rel="stylesheet" href="css/bootstrap.theme.min.css">
  <!-- 你自己的样式或其他文件 -->
  <link rel="stylesheet" href="example.css">
</head>
<body>
  <!-- 你的HTML结构...... -->
  <!-- 以下代码,如果不使用JS插件则不需要 -->
  <!-- 由于Bootstrap的JS插件依赖jQuery,so 引入jQuery -->
  <script src="js/jquery.min.js"></script>
  <!-- 引入所有的Bootstrap的JS插件 -->
  <script src="bootstrap.min.js"></script>
  <!-- 你自己的脚本文件 -->
  <script src="example.js"></script>
</body>
</html>
 

Bootstrap文档

基础的Bootstrap模板

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn‘t work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 

Compatible

<meta http-equiv="X-UA-Compatible" content="IE=edge">
  • 此属性为文档兼容模式声明,表示如果在IE浏览器下则使用最新的标准渲染当前文档

视口

<meta name="viewport" content="width=device-width, initial-scale=1">
  • 视口的作用:在移动浏览器中,当页面宽度超出设备,浏览器内部虚拟的一个页面容器,将页面容器缩放到设备这么大,然后展示
  • 目前大多数手机浏览器的视口(承载页面的容器)宽度都是980;
  • 视口的宽度可以通过meta标签设置
  • 此属性为移动端页面视口设置,当前值表示在移动端页面的宽度为设备的宽度,并且不缩放(缩放级别为1)
    • width:视口的宽度
    • initial-scale:初始化缩放
    • user-scalable:是否允许用户自行缩放(值:yes/no; 1/0)
    • minimum-scale:最小缩放,一般设置了用户不允许缩放,就没必要设置最小和最大缩放
    • maximum-scale:最大缩放

条件注释

  • 条件注释的作用就是当判断条件满足时,就会执行注释中的HTML代码,不满足时会当做注释忽略掉

第三方依赖

  • jQuery

    Bootstrap框架中的所有JS组件都依赖于jQuery实现

  • html5shiv

    让低版本浏览器可以识别HTML5的新标签,如header、footer、section等

  • respond

    让低版本浏览器可以支持CSS媒体查询功能

建议以后在HTML中将脚步的引入放到页面最底下

mediaquery

@media (判断条件(针对于当前窗口的判断)){
    /*这里的代码只有当判断条件满足时才会执行*/
}

@media (min-width: 768px) and (max-width: 992px) {
  /*这里的代码只有当(min-width: 1280px)满足时才会执行*/
  .container {
    width: 750px;
  }
}
  • 当使用min-width作为判断条件一定要从小到大,其原因是CSS从上往下执行

基础CSS样式

预置界面组件

JavaScript插件

JavaScript插件的依赖情况

如何使用Javascript插件

内置组件

深度自定义 Bootstrap

在线自定义

源码编译

LESS语言

原文地址:https://www.cnblogs.com/shuai1991/p/10884603.html

时间: 2024-10-14 04:30:02

CSS之Bootstrap(快速布局)的相关文章

如何用CSS快速布局(一)—— 布局元素详细

要快速进行网页排版布局,则必须对布局的元素有清晰的了解,才不会总是在细节处出错.这一篇先详解有关布局的因素作为布局基础:块级元素and内联元素.盒模型.准确定位.元素对齐.样式继承.下一篇则重点描述快速布局思路. 一.什么是块级元素和内联元素 1,块级元素: display:block表现出来的特点是折行的, 一般来说可以包含块级元素和内联元素: 例外: P 元素,只能包含内联元素,而不能包含块级元素. "form"这个块元素比较特殊,它只能用来容纳其他块元素. 2,内联元素: dis

css模拟Bootstrap响应式布局——栅格

做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下,用的是max-width.min-width子元素的宽度设置为不同的百分比,模拟栅格的12列.把100划分12份,用浮动宽度超出会自动换行,下面是段代码,以后会认真学习bootstrap.加油!飞燕草 1 <style type="text/css"> 2 #containe

atitit。html&#160;css框架Bootstrap&#160;&#160;Foundation的比较与不同&#160;attilax大总结

atitit.html css框架Bootstrap  Foundation的比较与不同 attilax大总结 1. Bootstrap  Foundation的比较与不同1 2. Bootstrap 教程2 2.1. Bootstrap 简介2 2.2. Bootstrap CSS2 2.3. Bootstrap 布局组件2 2.4. Bootstrap 插件3 2.5. Bootstrap 其他3 3. Bootstrap 的attilax总结3 4. 参考3 1. Bootstrap  F

响应式设计(2)--引入bootstrap栅格布局

bootstrap为我们内置了栅格系统布局,通过它,我们可以非常快速的在不同宽度的屏幕下进行自适应布局. [grid栅格系统]http://v3.bootcss.com/css/#grid  [响应式工具]http://v3.bootcss.com/css/#responsive-utilities 不了解bootstrap栅格布局的同学,可以先看看上面的链接,了解个大概. 你真的了解吗?只要你了解个大概的话,就能回答的出下面几个问题,回答不出来的话,点开上面的链接好好看一遍 1)bootstr

CSS:谈谈栅格布局

检验前端的一个基本功就是考查他的布局.很久之前圣杯布局风靡一时,这里就由圣杯布局开始,到最流行的bootstrap栅格布局. 圣杯布局 圣杯布局是一种三列布局,两边定宽,中间自适应: 1 * { 2 box-sizing: border-box; 3 } 4 html, body{ 5 width: 100%; 6 height: 100%; 7 margin: 0; 8 } 9 .container{ 10 width:100%; 11 } 12 .container:after{ 13 di

Bootstrap页面布局24 - BS旋转木马功能

代码: <div class='container-fluid'> <h3 class='page-header'>Bootstrap 旋转木马</h3> <div class='carousel slide' id='carousel1'> <div class='carousel-inner'> <div class='item active'> <img src='http://placehold.it/1246x360/

bootstrap 快速入门

bootstrap 快速入门   简介 是一个的 HTML.CSS 和 JS 框架 配置页面 远程访问 <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件(一般不用引入) --> <link rel=

实现 Bootstrap 基本布局

看到了一篇 20 分钟打造 Bootstrap 站点的文章,内容有点老,重新使用 Bootstrap3 实现一下,将涉及的内容也尽可能详细说明. 1. 创建基本的页面 我们先创建一个基本的 HTML 模板页面,使用 sublime + emmet 可以直接创建这个页面. 1.1 新建一个文件, Ctrl + N 1.2 保存到页面文件中,Ctrl + S,命名为 index.html 1.3 在这个空白页面中,输入 html:5,然后直接按制表键 Tab,就应该可以看到一个基本的 HTML5 模

Bootstrap页面布局23 - BS折叠内容

<div class='container-fluid'> <h3 class='page-header'>Bootstrap 折叠内容</h3> <!--如果用的a标签,href='#collapse1'--> <a href='#collapse1' class='btn btn-primary' data-toggle='collapse'>点击显示内容</a> <!--button标签中指向data-target='#c