Bootstrap简介

文章目录

    • Bootstrap
    • 响应式布局
    • 案例:栅格系统的简单实现
    • CSS样式和JS插件

Bootstrap

1. 概念:一个前端开发的框架,来自Twitter,是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JavaScript 的,它简洁灵活,使得 Web开发更加快捷。
	* 框架:一个半成品软件,开发费人员可以在框架基础上,再进行开发,简化编码量。
	* Bootstrap优势:
		1. 定义了很多css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
		2. 响应式布局
			* 同一套页面可以兼容不同分辨率的设备。  
2.快速入门
	1. 下载Bootstrap
	2. 在项目中将这三个文件夹复制
	3. 创建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 HelloWorldtitle>

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

    
    <script src="js/jquery.min.js">script>
    
    <script src="js/bootstrap.min.js">script>

head>
<body>
<h1>你好,世界!h1>

body>
html>

响应式布局

* 同一套页面可以兼容不同分辨率的设备。
* 实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子。
* 步骤:
	1. 步骤:
		1. 定义容器。相当于之前的table
			* 容器分类:
				1. container:两翼留白显示
				2. container-fluid:每一种设备都是100%宽度
		2. 定义行。相当于之前的tr	样式:row
		3. 定义元素。指定该元素在不同设备上,所占的格子数目。样式:col-设备数目-格子数目
			* 设备代号,  例如:col-xs-12等
				1. xs:超小屏幕	手机(<768px):	col-xs-12	
				2. sm:小屏幕	平板	(>=768px)
				3. md:中等屏幕	桌面显示器	(>=992px)
				4. lg: 大屏幕	大桌面显示器	(>=1200px)
	* 注意:
		1. 一行中如果格子数目超过12,则超出部分自动换行。
		2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于等于分界点大小的设备。
		3. 如果真实设备宽度小于了设置山各类属性的设备代码的最小值,会一个元素占满一整行。

案例:栅格系统的简单实现


<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 HelloWorldtitle>
 
    
    <link href="css/bootstrap.min.css" rel="stylesheet">

    
    <script src="js/jquery.min.js">script>
    
    <script src="js/bootstrap.min.js">script>

    <style>
        .inner {
      
            border: 1px solid red;
        }
    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>

CSS样式和JS插件

全局CSS样式:
	* 按钮:class="btn btn-default"	: 
	* 图片:
		* class="img-responsive"	:  图片在任意尺寸都占100%
		* 图片形状:
			* ...	:方形
			* ... 	:圆形
			* ...	:相框
	* 表格
	* 表单
		* 给表单项添加:class="form-control"
组件:
	略。
插件:
	略。

你可能感兴趣的:(前端,bootstrap)