E008Web开发框架-Bootstrap

忘是亡心i 2024-04-17 20:26 11阅读 0赞

# 一、概述 #

## 1、简介 ##

Bootstrap是一个前端开发框架；

## 2、框架 ##

一个半成品的软件，开发人员可以在框架基础上再进行开发（借助框架，简化编码）；

## 3、使用Bootstrap的好处 ##

（1）Bootstrap定义了很多css样式和js插件。我们可以直接使用这些样式和插件轻松的编写出优美的网页；
    
    （2）响应式布局；同一个页面可以兼容不同尺寸（分辨率）的屏幕，自动适配布局；

## 4、Bootstrap快速入门 ##

第一步：下载Bootstrap，中文官网网址[https://www.bootcss.com/][https_www.bootcss.com]；

第二步：复制三个文件夹到自己的项目中；

第三步：创建HTML文件，引入必要的资源文件；

**基本入门代码模板：**

# 二、栅格系统 #

## 1、实现： ##

依赖于栅格系统

## 2、栅格系统简介： ##

将一行平均分成12个格子，可以指定元素占几个格子；

## 3、使用步骤 ##

### 第一步：定义容器。相当于HTML的table； ###

容器分类：
    container：两边自适应宽度的留白；
    container-fluid：每种设备都是100%宽度；

### 第二步：定义行。相当于之前的tr； ###

样式：row

### 第三步：定义元素，指定该元素在不同的设备上所占的格子数目； ###

样式：col-设备代号-格子数目
    
    设备代号：
    1、xs：超小屏幕 手机（<768px）；
    2、sm：小屏幕 平板（>=768px）；
    3、md：中等屏幕 桌面显示器（>=992px）；
    4、lg：大屏幕 大桌面显示屏（>=1200px）；

### 代码演示： ###

<!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>栅格系统</title>
        
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
    	
    	<script src="js/jquery-3.4.1.min.js"></script>
    	
    	<script src="bootstrap.min.js"></script>
    	<style type="text/css">
    		.inner{
    			border: 2px solid #46B8DA;
    		}
    	</style>
      </head>
      <body>
    	
    	<div class="container-fluid">
    		
    		<div class="row">
    			
    			<div class="col-lg-1 col-sm-2 inner">
    				栅格
    			</div>
    			<div class="col-lg-1 col-sm-2 inner">
    				栅格
    			</div>
    			<div class="col-lg-1 col-sm-2 inner">
    				栅格
    			</div>
    			<div class="col-lg-1 col-sm-2 inner">
    				栅格
    			</div>
    			<div class="col-lg-1 col-sm-2 inner">
    				栅格
    			</div>
    			<div class="col-lg-1 col-sm-2 inner">
    				栅格
    			</div>
    			<div class="col-lg-1 col-sm-2 inner">
    				栅格
    			</div>
    			<div class="col-lg-1 col-sm-2 inner">
    				栅格
    			</div>
    			<div class="col-lg-1 col-sm-2 inner">
    				栅格
    			</div>
    			<div class="col-lg-1 col-sm-2 inner">
    				栅格
    			</div>
    			<div class="col-lg-1 col-sm-2 inner">
    				栅格
    			</div>
    			<div class="col-lg-1 col-sm-2 inner">
    				栅格
    			</div>
    		</div>
    	</div>
      </body>
    </html>

## 4、注意事项 ##

①一行若格子数目超过12个，则超出部分会自动换行；

②栅格类属性可以向上兼容（>=）；

③如果真实设备的宽度小于设置的栅格类属性的设备代号的最小值，则一个元素占满一行；

# 三、全局CSS样式 #

## 1、按钮（更多见文档） ##

<!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>按钮</title>
        
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
    	
    	<script src="js/jquery-3.4.1.min.js"></script>
    	
    	<script src="bootstrap.min.js"></script>
      </head>
      <body>
    	  
        <a class="btn btn-default" href="#" role="button">Link</a>
        <button class="btn btn-default" type="submit">Button</button>
        <input class="btn btn-default" type="button" value="Input">
        <input class="btn btn-default" type="submit" value="Submit">
    	
    	
    	<button type="button" class="btn btn-default">（默认样式）Default</button>
    	
    	
    	<button type="button" class="btn btn-primary">（首选项）Primary</button>
    	
    	
    	<button type="button" class="btn btn-success">（成功）Success</button>
    	
    	
    	<button type="button" class="btn btn-info">（一般信息）Info</button>
    	
    	
    	<button type="button" class="btn btn-warning">（警告）Warning</button>
    	
    	
    	<button type="button" class="btn btn-danger">（危险）Danger</button>
    	
    	
    	<button type="button" class="btn btn-link">（链接）Link</button>
    
      </body>
    </html>

## 2、图片（见文档） ##

## 3、表格（见文档） ##

## 4、表单（见文档） ##

# 四、组件 #

## 1、导航条（见文档） ##

## 2、分页条（见文档） ##

# 五、插件 #

## 轮播图（见文档） ##

### 文档地址：[https://v3.bootcss.com/css/\#top][https_v3.bootcss.com_css_top] ###

[https_www.bootcss.com]: https://www.bootcss.com/
[https_v3.bootcss.com_css_top]: https://v3.bootcss.com/css/#top