菜鸟入门bootstrap
1.入门
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <link rel="stylesheet" href="css/bootstrap.min.css">
7 <style>
8
9 </style>
10 </head>
11 <body>
12 <!--
13 bootstrap是一个响应式的前端框架。
14 前端框架： 让我们实现一个功能变得异常的简单。
15 响应式：自适应屏幕。
16 -->
17 <button class="btn btn-success btn-block">按钮</button>
18 </body>
19 </html>
2.栅格系统：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <link rel="stylesheet" href="css/bootstrap.min.css">
7 <style>
8 .col-xs-4 {
9 border: 1px solid red;
10 }
11 .col-xs-5 {
12 border: 1px solid green;
13 }
14 </style>
15 </head>
16 <body>
17 <!--
18 容器总共两种：container 左右有边距的的
19 container-fluid 左右无边距
20 -->
21 <div class="container-fluid">
22 <div class="row">
23 <!-- col-lg-* (large) 超大
24 col-md-* (medium) 中等
25 col-sm-* (small) 小
26 col-xs-* (extra small) 超小
27
28 小的样式布局是兼容大的样式布局。
29 -->
30 <div class="col-xs-4">文字</div>
31 <div class="col-xs-4">文字</div>
32 <div class="col-xs-4">文字</div>
33 </div>
34 </div>
35 </body>
36 </html>
3.栅格系统的平移：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <link rel="stylesheet" href="css/bootstrap.min.css">
7 <style>
8 .col-xs-6 {
9 border: 1px solid red;
10 }
11 </style>
12 </head>
13 <body>
14 <div class="container">
15 <div class="row">
16 <div class="col-xs-6 col-xs-push-6"></div>
17 </div>
18 </div>
19 </body>
20 </html>
4.按钮：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <link rel="stylesheet" href="css/bootstrap.min.css">
7 <link rel="stylesheet" href="css/font-awesome.css">
8 </head>
9 <body>
10 <!--
11 所有的按钮在书写的时候，首先加上 btn这个样式。
12 primary 蓝色
13 success 绿色(头顶绿)
14 info 天空蓝
15 danger 红色
16 default 透明
17 -->
18 <button class="btn btn-primary">蓝色</button>
19 <button class="btn btn-danger">这是一个按钮</button>
20 <button class="btn btn-info">这是一个按钮</button>
21 <button class="btn btn-success">这是一个按钮</button>
22
23 <button class="btn btn-success btn-lg">大按钮</button>
24 <button class="btn btn-success btn-sm">小按钮</button>
25 <button class="btn btn-success btn-xs">超小按钮</button>
26
27 <button class="btn btn-primary btn-block">块级按钮</button>
28
29 <hr>
30 <button class="btn btn-info btn-xs"><i class="fa fa-edit"></i> 编辑</button>
31 </body>
32 </html>
5.按钮组：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <link rel="stylesheet" href="css/bootstrap.min.css">
7 <link rel="stylesheet" href="css/font-awesome.css">
8 <style>
9 .box {
10 margin-top: 30px;
11 margin-left: 50px;
12 }
13 </style>
14 </head>
15 <body>
16 <!--
17 按钮组：btn-group，效果是将按钮合并到一起。
18 -->
19 <div class="btn-group box">
20 <button class="btn btn-sm btn-default"><i class="fa fa-eye"></i> Watch</button>
21 <button class="btn btn-sm">485</button>
22 </div>
23
24 </body>
25 </html>
6.表格：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <link rel="stylesheet" href="css/bootstrap.min.css">
7 <link rel="stylesheet" href="css/font-awesome.css">
8 <style>
9 .table th, .table td {
10 text-align: center;
11 }
12 </style>
13 </head>
14 <body>
15
16 <div class="container">
17 <div class="row">
18 <div class="col-xs-8 col-xs-push-2">
19 <!--
20 strip: 斑马线。
21 对于表格来说，写class的时候，首先写table.
22 table-bordered: 给表格加边框。
23 table-hover: 当鼠标划到数据的时候，背景颜色发生变化
24 -->
25 <table class="table table-bordered table-hover table-striped">
26 <thead>
27 <tr>
28 <th>用户名</th>
29 <th>电话</th>
30 <th>性别</th>
31 <th>操作</th>
32 </tr>
33 </thead>
34 <tbody>
35 <tr>
36 <td>张三</td>
37 <td>5689</td>
38 <td>男</td>
39 <td>
40 <button class="btn btn-sm btn-info">
41 <i class="fa fa-edit"></i> 编辑
42 </button>
43 <button class="btn btn-sm btn-danger">
44 <i class="fa fa-remove"></i> 删除
45 </button>
46 </td>
47 </tr>
48 <tr>
49 <td>张三</td>
50 <td>5689</td>
51 <td>男</td>
52 <td>
53 <button class="btn btn-sm btn-info">
54 <i class="fa fa-edit"></i> 编辑
55 </button>
56 <button class="btn btn-sm btn-danger">
57 <i class="fa fa-remove"></i> 删除
58 </button>
59 </td>
60 </tr>
61 <tr>
62 <td>张三</td>
63 <td>5689</td>
64 <td>男</td>
65 <td>
66 <button class="btn btn-sm btn-info">
67 <i class="fa fa-edit"></i> 编辑
68 </button>
69 <button class="btn btn-sm btn-danger">
70 <i class="fa fa-remove"></i> 删除
71 </button>
72 </td>
73 </tr>
74 <tr>
75 <td>张三</td>
76 <td>5689</td>
77 <td>男</td>
78 <td>
79 <button class="btn btn-sm btn-info">
80 <i class="fa fa-edit"></i> 编辑
81 </button>
82 <button class="btn btn-sm btn-danger">
83 <i class="fa fa-remove"></i> 删除
84 </button>
85 </td>
86 </tr>
87 </tbody>
88 </table>
89 </div>
90 </div>
91 </div>
92
93 </body>
94 </html>
7.表单：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <link rel="stylesheet" href="css/bootstrap.min.css">
7 <style>
8 form {
9 border: 1px solid #e3e3e3;
10 border-radius: 4px;
11 padding: 5px 10px;
12 }
13 </style>
14 </head>
15 <body>
16 <!-- label最常用的用法是和表单一起配合使用 -->
17 <!--
18 <form>
19 <label for="username1">Username: </label><input id="username"> <br>
20 <input id="username1">
21 </form>
22 -->
23 <div class="container">
24 <div class="row">
25 <div class="col-xs-6 col-xs-push-3">
26 <!---
27 表单中所有的标签都需要加上：form-control, 无论是text password select
28 -->
29 <form>
30 <div class="form-group">
31 <label for="username">用户名: </label>
32 <input type="text" class="form-control" id="username">
33 </div>
34 <div class="form-group">
35 <label for="password">密码</label>
36 <input type="password" id="password" class="form-control">
37 </div>
38 <div class="form-group">
39 <label for="graduation">密码</label>
40 <select class="form-control" id="graduation">
41 <option value="gz">高中</option>
42 <option value="dz">大专</option>
43 <option value="bk">本科</option>
44 </select>
45 </div>
46 <div class="form-group">
47 <label>性别: </label>
48 <div>
49 <label>
50 <input type="radio" name="gender" value="F"> 女
51 </label>
52 <label>
53 <input type="radio" name="gender" value="M"> 男
54 </label>
55 </div>
56 </div>
57 <div class="form-group">
58 <label>兴趣</label>
59 <div>
60 <label>
61 <input type="checkbox" name="interests" value="read"> 读书
62 </label>
63 <label>
64 <input type="checkbox" name="interests" value="sport"> 运动
65 </label>
66 <label>
67 <input type="checkbox" name="interests" value="movie"> 电影
68 </label>
69 </div>
70 </div>
71 <div class="form-group">
72 <button class="btn btn-block btn-primary">提交</button>
73 </div>
74 </form>
75 </div>
76 </div>
77 </div>
78
79 </body>
80 </html>
7.1.表单成为一行：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <link rel="stylesheet" href="css/bootstrap.min.css">
7 </head>
8 <body>
9 <div class="container-fluid">
10 <div class="row">
11 <div class="col-xs-8 col-xs-push-2">
12 <!--
13 inline： 在css中将块级元素转为行级元素。
14 -->
15 <form class="form-inline">
16 <div class="form-group">
17 <label for="name">姓名</label>
18 <input type="text" id="name" class="form-control">
19 </div>
20 <div class="form-group">
21 <label for="gender">性别</label>
22 <select class="form-control" id="gender" name="gender">
23 <option value="F">女</option>
24 <option value="M">男</option>
25 </select>
26 </div>
27 <div class="form-group">
28 <label>生日</label>
29 <input type="text" class="form-control"> -
30 <input type="text" class="form-control">
31 </div>
32 <div class="form-group">
33 <button class="btn btn-danger">查询</button>
34 </div>
35 </form>
36 </div>
37 </div>
38 </div>
39 </body>
40 </html>
7.2.文本和表单放在一排：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <link rel="stylesheet" href="css/bootstrap.min.css">
7 </head>
8 <body>
9 <div class="container">
10 <div class="row">
11 <div class="col-xs-8 col-xs-push-2">
12 <form class="form-horizontal">
13 <div class="form-group">
14 <label for="username" class="col-xs-2 control-label">用户名</label>
15 <div class="col-xs-10">
16 <input class="form-control" id="username">
17 </div>
18 </div>
19 <div class="form-group">
20 <label for="password" class="col-xs-2 control-label">密码</label>
21 <div class="col-xs-10">
22 <input class="form-control" id="password">
23 </div>
24 </div>
25 </form>
26 </div>
27 </div>
28 </div>
29 </body>
30 </html>
8.下拉菜单：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <link rel="stylesheet" href="css/bootstrap.min.css">
7 <script src="js/jquery-3.5.0.js"></script>
8 <script src="js/bootstrap.min.js"></script>
9 </head>
10 <body>
11 <div class="dropdown">
12 <!--
13 对这个下拉框效果起决定性作用的是 data-toggle="dropdown"
14 -->
15 <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
16 请选择学科 <span class="caret"></span>
17 </button>
18 <!-- dropdown-menu加上之后菜单会影藏 -->
19 <ul class="dropdown-menu">
20 <li><a href="#">Java</a></li>
21 <li><a href="#">HTML</a></li>
22 <li><a href="#">CSS</a></li>
23 <li><a href="#">Javascript</a></li>
24 </ul>
25 </div>
26 </body>
27 </html>
9.输入框组：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <link rel="stylesheet" href="css/bootstrap.min.css">
7 <link rel="stylesheet" href="css/font-awesome.css">
8 <style>
9 .box {
10 width: 50%;
11 margin: 100px auto 0;
12 }
13 .input-group-addon {
14 padding: 0;
15 border: 0;
16 }
17 </style>
18 </head>
19 <body>
20 <div class="box">
21 <!--
22 input-group: 输入框组。
23 input-group-addon: 将span和输入框紧贴在一起。
24 -->
25 <div class="input-group">
26 <input class="form-control">
27 <span class="input-group-addon">1000phone.com</span>
28 </div>
29 <div class="input-group">
30 <span class="input-group-addon">用户名</span>
31 <input class="form-control">
32 </div>
33 <div class="input-group">
34 <input class="form-control">
35 <span class="input-group-addon">
36 <button class="btn btn-danger"><i class="fa fa-search"></i></button>
37 </span>
38 </div>
39 </div>
40
41 </body>
42 </html>
10.导航条：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <link rel="stylesheet" href="css/bootstrap.min.css">
7 </head>
8 <body>
9 <!-- 导航条
10 navbar-default: 给导航条一个默认的颜色。
11 navbar-inverse: 让导航条的颜色呈现一个暗黑色。
12 navbar-static-top: 去掉navbar本身的圆角
13 -->
14 <nav class="navbar navbar-default navbar-inverse navbar-static-top">
15 <div class="container-fluid">
16 <div class="navbar-header">
17 <a class="navbar-brand">知乎</a>
18 </div>
19 <!-- 在navbar中加表单，表单的class样式为：navbar-form -->
20 <form class="navbar-form navbar-left">
21 <div class="form-group">
22 <input class="form-control">
23 </div>
24 <button class="btn btn-default">Submit</button>
25 </form>
26 <!--
27 在navbar中放按钮：navbar-btn
28 -->
29 <!-- <button class="btn btn-danger navbar-btn" style="float: left;">按钮</button>-->
30 <button class="btn btn-danger navbar-btn">按钮</button>
31 <!--
32 在navbar中放文本：navbar-text
33 -->
34 <p class="navbar-text">navbar文本内容</p>
35 <!--
36 在navbar中放连接：navbar-link
37 -->
38 <a href="#" class="navbar-link">Mark Otto</a>
39 </div>
40 </nav>
41 </body>
42 </html>
菜鸟入门bootstrap的更多相关文章
- Bootstrap框架菜鸟入门教程
Bootstrap菜鸟入门教程 Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简 ...
- Hadoop学习笔记(1) ——菜鸟入门
Hadoop学习笔记(1) ——菜鸟入门 Hadoop是什么?先问一下百度吧: [百度百科]一个分布式系统基础架构,由Apache基金会所开发.用户可以在不了解分布式底层细节的情况下,开发分布式程序. ...
- swift菜鸟入门视频教程-04-集合类型
本人自己录制的swift菜鸟入门,欢迎大家拍砖,有什么问题能够在这里留言. 主要内容: 数组(Arrays) 字典(Dictionaries) 集合的可变性(Mutability of Collect ...
- C功底挑战Java菜鸟入门概念干货（一）
一.认识Java 1.Java 程序比较特殊,它必须先经过编译,然后再利用解释的方式来运行. 2.Byte-codes 最大的好处是——可越平台运行,可让“一次编写,处处运行”成为可能. 3.使用 ...
- swift菜鸟入门视频教程-03-字符串和字符
本人自己录制的swift菜鸟入门,欢迎大家拍砖.有什么问题能够在这里留言. 主要内容: 字符串字面量 初始化空字符串 字符串可变性 字符串是值类型 使用字符 计算字符数量 连接字符串和字符 字符串插值 ...
- C功底挑战Java菜鸟入门概念干货（二）
(接上篇博文:C功底挑战Java菜鸟入门概念干货(一)) 一.Java面向对象程序设计-类的基本形式 1.“类”是把事物的数据与相关的功能封装在一起,形成的一种特殊结构,用以表达对真实世界的一种抽象概 ...
- swift菜鸟入门视频教程-07-闭包
本人自己录制的swift菜鸟入门,欢迎大家拍砖.有什么问题能够在这里留言. 主要内容: 闭包表达式(Closure Expressions) 跟随闭包(Trailing Closures) 值捕获(C ...
- github菜鸟入门
github菜鸟入门教程 闲来无事,研究了下github的玩法,完毕总结:简单好玩,上档次! 一.首先注册github的账号 二.下载安装git 三.新建仓库 1.点击右上方的+号选择首项新建仓库 2 ...
- 菜鸟入门【ASP.NET Core】5：命令行配置、Json文件配置、Bind读取配置到C#实例、在Core Mvc中使用Options
命令行配置 我们通过vs2017创建一个控制台项目CommandLineSample 可以看到现在项目以来的是dotnet core framework 我们需要吧asp.net core引用进来 ...
- CUDA显卡运算编程菜鸟入门指南1——Hello world - yfszzx的专栏 - 博客频道 - CSDN.NET
第一次知道有显卡(GPU)编程这个东西,是去年比特币最热门的时候,看了几篇关于比特币的文章,说比特币挖矿要靠显卡,CPU的速度与GPU根本就没法比,于是就非常好奇,显卡是什么神奇的东西?为什么运算速度 ...
随机推荐
- Python 潮流周刊#93：为什么“if not list”比len()快2倍？（摘要）
本周刊由 Python猫 出品,精心筛选国内外的 250+ 信息源,为你挑选最值得分享的文章.教程.开源项目.软件工具.播客和视频.热门话题等内容.愿景:帮助所有读者精进 Python 技术,并增长职 ...
- 【Linux】5.5 Shell运算符
Shell运算符 Shell 和其他编程语言一样,支持多种运算符,包括: 算数运算符 关系运算符 布尔运算符 字符串运算符 文件测试运算符 原生bash不支持简单的数学运算,但是可以通过其他命令来实现 ...
- 【Maven】生命周期
Maven 有三个相互独立的生命周期:Clean 生命周期.build 生命周期.site 生命周期. 各个构建环节执行的顺序:不能打乱顺序,必须按照既定的正确顺序来执行. Maven 的核心程序中定 ...
- 什么是RESTful 或 GraphQL？
RESTful 与 GraphQL 深度解析 在前端的开发过程中,相信 everyone 对 Get.POST 等请求方式都很熟悉,那么这些请求是归于哪种架构或者设计风格可能又不是很熟.现在在这简单的 ...
- Visual Studio 外部工具中添加 git-bash
引言 旧版的 Visual Studio 没有集成 git 工具,并且自己也习惯用 git-bash 命令行来操作, 那么如何在旧版的 Visual Studio 快速打开 git-bash 终端呢? ...
- leetcode每日一题：对角线上的质数
题目 2614. 对角线上的质数 给你一个下标从 0 开始的二维整数数组 nums . 返回位于 nums 至少一条 对角线 上的最大 质数 .如果任一对角线上均不存在质数,返回 0 . 注意: 如果 ...
- Java 与 LLM 大模型融合的技术革命：JBoltAI 如何重构企业级 AI 开发范式
Java 与 LLM 大模型融合的技术革命:JBoltAI 如何重构企业级 AI 开发范式 一.Java 技术栈的智能化转型挑战 随着 LLM(大语言模型)技术的突破,全球超过 900 万家 Java ...
- 洛谷P4198 楼房重建 题解
Part1.自己一开始是怎么想的 我一开始的想法是先考虑什么情况下是看不见的. 如果是 \(i < j\) 的话可以直接看 \(j\) 的斜率和 \(i\) 的斜率就是比较 \(\frac{h_ ...
- 🎀EXCEL-时间函数
简介 在Excel中,时间函数用于处理和操作日期和时间数据; 以下是Excel中常用的时间函数及其常见应用场景的总结. 函数 时间函数基础 TIME 语法:TIME(hour, minute, sec ...
- markdown文本编辑器--核心功能（解析和渲染）
开源项目地址 GitHub 开源地址(YtyMark-java) 欢迎提交 PR.Issue.Star ️! 1. 简述 YtyMark-java项目分为两大模块: UI界面(ytyedit-mark ...