Bootstrap简要介绍

目录

文章目录

  • 目录
    • 1 Bootstrap介绍
    • 2 Bootstrap的使用
      • 2.1 引入bootstrap
      • 2.2 布局容器
    • 3 栅格系统
    • 4 常用样式

1 Bootstrap介绍

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 [1] 国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。

简单来说,Bootstrap是用来做UI的,适用于不会写前端界面的后端程序员
相关文档:Bootstrap中文网 菜鸟教程

2 Bootstrap的使用

2.1 引入bootstrap

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.0">
    <title>Documenttitle>
    
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
head>
<body>
    
    <script src="js/jquery-3.6.1.js">script>
    
    <script src="bootstrap/js/bootstrap.min.js">script>    
    <h1>Hello,worldh1>
body>
html>

未引入bootstrap.min.css时的字体
在这里插入图片描述

引入bootstrap.min.css后
Bootstrap简要介绍_第1张图片

2.2 布局容器

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
head>
<body>
    
    <div class="container" style="background-color: yellow;height: 500px;">
        container类用于固定宽度并支持响应式布局的容器
    div>
body>
html>

3 栅格系统

相关文档:Bootstrap中文网

  1. 列组合
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
head>
<body>
    <div style="background-color: green;">4div>
    <div style="background-color: yellow;">8div>
    
    
    <div class="container">
        
        <div class="row">
             
            
            <div class="col-md-4" style="background-color: green;">4div>
            <div class="col-md-8" style="background-color: yellow;">8div>
        div>
    div>
body>
html>
  1. 媒体查询

会自动根据当前设备的屏幕选择,即自适应屏幕


            <div class="col-md-4 col-sm-6" style="background-color: green;">4div>
            <div class="col-md-8 col-sm-6" style="background-color: yellow;">8div>
  1. 列偏移

col-xx-offset-数值 相当于上一个div向右偏移了多少格,仍不能超过12

<div class="container">
        
        <div class="row">
            
            <div class="col-md-1" style="background-color: green;">1div>
            <div class="col-md-1 col-md-offset-1" style="background-color: yellow;">1div>
            <div class="col-md-1" style="background-color: orange;">1div>
            <div class="col-md-1 col-md-offset-2" style="background-color: orange;">1div>
        div>
    div>
  1. 列排序

如果浮动后的网格已存在元素,那么原来的就会被覆盖掉

<div class="row">
            
            <div class="col-md-1" style="background-color: green;">1div>
            
            <div class="col-md-1 col-md-push-3" style="background-color: yellow;">1div>
            <div class="col-md-1" style="background-color: orange;">1div>
            
            <div class="col-md-1 col-md-pull-2" style="background-color: greenyellow;">1div>
        div>
  1. 列嵌套

即每个小格子类还可以分成12格

<div class="container">
        
        <div class="row">
            <div class="col-md-6" style="background-color: green;">
                <div class="row">
                    <div class="col-md-3" style="background-color: yellow;">第二次分的3div>
                    <div class="col-md-3" style="background-color: greenyellow;">第二次分的3div>
                div>
            div>
            <div class="col-md-6" style="background-color: orange;">6div>
        div>
    div>

4 常用样式

在Bootstrap中文网都有相关的用法以及效果展示
Bootstrap中文网
菜鸟教程
很nb只能说

你可能感兴趣的:(前端学习笔记,bootstrap,前端,css)