Bootstrap介绍

来源：互联网发布：陶瓷设计软件有哪些编辑：程序博客网时间：2024/06/14 15:51

Bootstrap是一个html、css和js的一个前端框架，应用广泛，应用于响应式、移动设备优先的web项目。

由于bootstrap是基于jquery的所以应用bootstrap.js之前要引用jq。

bootstrap css 简介

前端开发人员习惯使用全局的css文件，bootstrap也是如此。

栅格系统

bootstrap是响应式解决的方案重点就是栅格系统，所谓栅格系统就是将整个屏幕划分成若干个（一般就是12）等宽的列，bootstrap中定义了一系列的预定义类用于实现栅格系统。

bootstrap的模板

<!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">    <title>Bootstrap 模板</title>    <!-- Bootstrap -->    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">    <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>    <!-- IE9以下版本使用HTML5需要使用两个文件：html5shiv.min.js和respond.min.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></body></html>

常见的xs、sm、md、lg的区别

屏幕

典型设备

尺寸

命名

超小屏幕

手机

<768

-xs(extar small)

小屏幕

平板

>768

-sm(small)

中等屏幕

桌面显示器

>=992

-md

大屏幕

大规格显示器

>=1200

-lg(large)

<divclass="col-xs-6"col-xs-push-6></div>
<divclass="col-xs-4 col-xs-pull-6"></div>

阅读全文

0 0