Bootstrap——安装、导入以及简单使用

Bootstrap安装和使用

bootstrap简介

Bootstrap是前端开发中比较受欢迎的框架,简洁且灵活。它基于HTML、CSS和JavaScript,HTML定义页面元素,CSS定义页面布局,而JavaScript负责页面元素的响应。Bootstrap将HTML、CSS和JavaScript封装成一个个功能组件,用起来简单,粗暴。


安装bootstrap

1、进入bootstrap官网

2、选择版本,点击下载bootstrap(这里以v4.6为例)

Bootstrap——安装、导入以及简单使用_第1张图片

3、点击下载bootstrap生产文件Bootstrap——安装、导入以及简单使用_第2张图片

4、解压文件

Bootstrap——安装、导入以及简单使用_第3张图片

也可以直接导入Boostrap CDN

https://www.bootcdn.cn/twitter-bootstrap/

<head>
  <meta charset="UTF-8">
  <title>网格系统title>
  
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css" rel="stylesheet">
head>

注意版本!

bootstrap的使用

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网格系统title>
    <link rel="stylesheet" type="text/css" href="lib/css/bootstrap.min.css"/>
head>
<body>

<div class="container">
  
  <div class="row">
    
    <div class="col-md-4" style="background-color: red">第一块div>
    <div class="col-md-4" style="background-color: #1e7e34">第二块div>
    <div class="col-md-4" style="background-color: #005cbf">第三块div>
  div>

  <div class="row">
    <div class="col-md-4" style="background-color: #20c997">第一块div>
    <div class="col-md-4" style="background-color: #dc3545">第二块div>
    <div class="col-md-5" style="background-color: #491217">第三块div>
  div>

  <div class="row">
    <div class="col-md-3 offset-md-10">
      <button type="submit" style="background-color: #4e555b">提交button>
    div>
  div>
div>
body>
html>

Bootstrap——安装、导入以及简单使用_第4张图片

具体使用可以查看:菜鸟教程

Bootstrap——安装、导入以及简单使用_第5张图片

你可能感兴趣的:(Java基础自学笔记,bootstrap)