菜鸟入门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根本就没法比,于是就非常好奇,显卡是什么神奇的东西?为什么运算速度 ...
随机推荐
- js 时间转时间戳
前言 有时候我们用时间插件,选择好时间后,需要把日期格式转化为时间戳,再传到后台 时间转时间戳 let time = Math.floor(new Date("2014-04-23 18:5 ...
- AI与.NET技术实操系列（七）：使用Emgu CV进行计算机视觉操作
引言 计算机视觉(Computer Vision, CV)是人工智能领域中最为引人注目的分支之一.从自动驾驶汽车到医疗影像分析,从智能安防系统到虚拟现实体验,计算机视觉的应用无处不在,深刻地改变着我们 ...
- 搭建自己的OCR服务，第一步：选择合适的开源OCR项目
一.OCR是什么? 光学字符识别(Optical Character Recognition, OCR)是指对文本资料的图像文件进行分析识别处理,获取文字及版面信息的过程. 亦即将图像中的文字进行识别 ...
- 解决Linux下文本文件中文乱码问题
上一篇我们提到了OS和DB的一些中文乱码问题解决,本篇我们继续介绍下在OS上的文本文件中文乱码问题. 操作系统是Linux(OEL 8.10),所有文件是打了一个压缩包上传的,上传解压后发现其中的文本 ...
- 【python-日期和时间处理】datetime模块基本使用
1. 获取datetime对象 获取当前datetime对象 方法:datetime.now(cls, tz=None) -> datetime 参数说明: tz:时区信息,不传该参数时,默认使 ...
- 面试题-Spring和Springboot框架
前言 spring框架部分的题目,是我根据Java Guide的面试突击版本V3.0再整理出来的,其中,我选择了一些比较重要的问题,并重新做出相应回答,并添加了一些比较重要的问题,希望对大家起到一定的 ...
- AI 应用思考
之前看到过一个理论,创新技术的三个阶段:新技术创造-精英服务-平民化 技术扩散的三阶段理论模型 1. 创新垄断期(精英创造阶段)技术革命初期,创新活动高度依赖知识密集型投入.AI发展呈现"分 ...
- JBoltAI 与 AIGS 的深度融合：重构企业数智化未来
在企业数智化转型浪潮中,JBoltAI 凭借其独特的 AIGS(AI Generate Service)解决方案,正成为连接大模型能力与企业实际需求的桥梁.其核心价值在于通过技术框架的重构,将 AI ...
- Java编程之面向对象
一.面向对象 1.定义 (1)类:描述的是具有共性的一类事物 (2)对象:一个个具备了类的特点和功能的个体 (3)面向对象:要完成某件事,首先要先有对象,然后直接调用这个对象的响应功能 2.成员变量: ...
- Netty 心跳机制实现（客户端与服务端）
Netty 心跳机制实现(客户端与服务端) Netty 的心跳机制是保持长连接有效性的重要手段,可以检测连接是否存活并及时释放无效连接.下面介绍客户端和服务端的完整实现方案. 一.服务端实现 1. 基 ...