菜鸟入门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根本就没法比,于是就非常好奇,显卡是什么神奇的东西?为什么运算速度 ...
随机推荐
- Containerd 配置使用 Nvidia container runtime
前言 Kubernetes 集群中 Docker 如何使用 GPU,请看这一篇 docker配置Nvidia环境,使用GPU 本文着重讲 Containerd 如何作为容器运行时来使用 GPU CRI ...
- centos安装php环境
安装 PHP 所需扩展 yum install libxml2 libxml2-devel openssl openssl-devel bzip2 bzip2-devel libcurl libcur ...
- 一款HTML转Markdown格式的工具
Markdown格式不仅对写博客的人非常友好和方便,对AI也是如此. 目前AI大语言模型的输出基本都是Markdown格式,这就意味着AI是能充分理解Markdown格式的,这一点非常重要. Mark ...
- Linux指令详解之：进程与系统负载
目录 5.4 进程(process) 5.4.1 守护进程 5.4.2 僵尸进程 5.4.3 孤儿进程 6.0 进程监控指令 6.0.1 ps(报告当前系统的进程状态) 6.0.2 ps aux 结果 ...
- 一款 .NET 开源、功能强大的远程连接管理工具，支持 RDP、VNC、SSH 等多种主流协议！
前言 今天大姚给大家分享一款基于 .NET 开源(GPL-2.0 license).免费.功能强大的 Windows 远程连接管理工具,支持 RDP.VNC.SSH 等多种主流协议:mRemoteNG ...
- 【C#】VS2019新建C#类自动添加作者版权等信息
VisualStudio2019新建C#类自动添加作者版权等信息 问题: 新建C#类的时候经常需要手动添加注释和版权等信息,那么如何新建类的时候就让编译器自动添加好这些信息呢? 解决: 参考网上的资料 ...
- （转）python批量提取PDF第一页输出为图片
一:步骤 1.使用input输入路径 2.生成图片存户路径同存放路径 3.生成图片为PNG格式 4.支持自定义截取页数,建议为第一页 二:安装扩展类 pip install PyMuPDF 三:示例代 ...
- stackbd：在一个块设备上堆叠另一个块设备
stackbd 是一个虚拟的块设备,它作为另一个块设备的前端,如 USB 闪存盘或循环设备.它将I/O请求传递给底层设备,同时它打印请求信息用于调试.它还有可能修改请求. 堆叠块设备(stackbd) ...
- java串口通信
实体 package com.hwd.campus.common.common.utils.http; import gnu.io.SerialPort; /** * 串口参数封装类 * @autho ...
- Lucas 定理简单证明
前言 Oi wiki 和网上博客的证明都没完全看懂,最后还是自己推出来的..这里记录一下思路. Lucas 定理 对于质数 \(p\),$${n\choose m}\bmod p={\lfloor n ...