bootstrap简单使用

1.bootstrap实例：

 1 <title>Bootstrap 实例 - 代码</title>
 2 <link href="https://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 3 <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 4 <script src="https://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
 5 </head>
 6 <body>
 7 <p><code>&lt;header&gt;</code> 作为内联元素被包围。</p>
 8 <p>如果需要把代码显示为一个独立的块元素，请使用 &lt;pre&gt; 标签：</p>
 9 <pre>
10    &lt;article&gt;
11       &lt;h1&gt;Article Heading&lt;/h1&gt;
12    &lt;/article&gt;
13 </pre>
14 </body>
15 </html>

View Code

2.按钮：

 1 <html>
 2 <head>
 3 <title>Bootstrap 实例 - 按钮选项</title>
 4 <link href="https://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 5 <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 6 <script src="https://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
 7 </head>
 8 <body>
 9 <button type="button" class="btn btn-default">默认按钮</button>
10 <button type="button" class="btn btn-primary">原始按钮</button>
11 <button type="button" class="btn btn-success">成功按钮</button>
12 <button type="button" class="btn btn-info">信息按钮</button>
13 <button type="button" class="btn btn-warning">警告按钮</button>
14 <button type="button" class="btn btn-danger">危险按钮</button>
15 <button type="button" class="btn btn-link">链接按钮</button>
16 </body>
17 </html>

按钮

效果图：

转载于:https://www.cnblogs.com/chenze-Index/p/9274496.html

bootstrap简单使用相关推荐

SpringBoot+2次MD5登录密码加密+MyBatisPlus+Thymeleaf+Bootstrap简单实现登录功能，一文轻松搞定！
这里写目录标题一.演示GIF 二.开发前期准备 1.数据库 2.依赖POM.XML 3.idea结构目录三.后端 1.实体类 2.mapper接口 3.mapper.xml 4.Servicce接 ...
Bootstrap简单认识之Tooltips组件
Tooltips(提示工具)组件一.简介此组件用到了Tether插件,Tether一般用于搞定两个元素的位置关系,如下代码: new Tether({// 此为主动附着元素element: blu ...
基于 jQuery 与 Bootstrap 简单封装一个表格分页的组件
最近遇到一个需求:页面上的数据可能会有很多条,需要将数据分页展示在表格中.项目用的是 jQuery 和 Bootstrap,本来想直接用 bootstrapTable 插件,但是需要额外引入 js 文 ...
Bootstrap简单模板与基本表格
一:页面套用模板下面专门有个内容页是空白的页面blank page,方便我们套用,右边菜单我们把不需要的删除掉就留几个就可以了内容的位置我们右键源码可以很方便的看到, 其实他注释和样式名称表达得很 ...
Bootstrap简单认识之Dropdown组件
Dropdown(下拉框)组件一.简介此组件可以不指定 data-target 属性,不指定的话,必须按.dropdown-toggle 按钮和 dropdown-menu 列表放在同一个父元素下 ...
BootStrap简单学习
前言本文是关于BootStrap的简单学习,适合后端开发者查阅. 目录一.什么是BootStrap? 二.如何使用BootStrap? 2.1.下载BootStrap: 2.2.使用BootStr ...
bootstrap简单登录界面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
Spring4 MVC + REST + List + Bootstrap 简单示例
本篇文章,我们将教会你通过eclipse创建并转换为maven的web项目.通过spring4 mvc提供的REST方式将List对象中的值通JSTL 的c:forEach 标签输出到页面中(本篇文章 ...
前端框架Bootstrap简单介绍
下载: 解压之后: 把这些文件拷贝到项目中页面使用时只需要引入: 然后我们就可以参考官网来设计需要的前端页面了设计一个按钮:button 只需要标明css样式中使用的类下面就是现实效果: ...

bootstrap简单使用

bootstrap简单使用相关推荐

最新文章

热门文章