基于Bootstrap实现下图所示效果的页面，一个居中的标题和一个大按钮：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<link href=" //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

<title>Hello World</title>

</head>

<body>

<div class="text-center">

<h3>Hello World!</h3>

<button type="button" class="btn btn-primary" >我是按钮，按我一下</button>

</div>

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</body>

</html>

Bootstrap 搭建基础页面的更多相关文章

  1. 利用Bootstrap搭建网站页面

    先来看下页面效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. 两周“学会”bootstrap搭建一个移动站点

    一直想着用bootstrap搭建网站,它的自适应.元素封装完善.现成的Glyphicons字体图标,省去很多的css.js.ui的工作,可以快速搭建一个客户需要的站点.ytkah自己有一些div+cs ...

  3. 【BootStrap】 基础

    [BootStrap] 基础 一. 自适应(针对不同设备如手机平板笔电,使页面的宽度适应设备宽度) <meta name="viewport" content="w ...

  4. CentOS6.5 搭建基础PHP环境（yum安装）

    转载:闲来无事 » CentOS6.5 搭建基础PHP环境(yum安装) yum安装php环境只需要几条简单的命令就可以实现,OK,各位客官,菜来了.首先确保你的yum源可用,或者网络是通的,不然下载 ...

  5. 如何使用 Bootstrap 搭建更合理的 HTML 结构

    前言 Bootstrap 的成功不仅在于其简单易用,更在于其样式的规范性以及 HTML 结构的合理性.但是很多人在使用 Bootstrap 时只是依照文档盲目的复制黏贴,并没有仔细考虑每个类的用处,也 ...

  6. 20分钟成功编写bootstrap响应式页面 就这么简单

    最近发现一个叫 Bootstrap 的好东西,Bootstrap 是现在最流行的响应式 CSS 框架,它以移动设备优先,能够快速适应不同设备.使用它编写响应式页面快捷.方便,而且屏蔽了浏览器差异.使用 ...

  7. Jenkins 持续集成持续发布使用搭建基础

    一.环境搭建基础 1.持续集成.持续交付.持续部署概念 ①.集成: 是指软件多人研发的部分软件代码整合交付,以便尽早发现个人开发部分的问题:持续集成:强调开发人员提交了新代码之后,立刻进行构建(单元) ...

  8. 在Bootstrap开发框架基础上增加WebApi+Vue&Element的前端

    基于Metronic的Bootstrap开发框架是我们稍早一点的框架产品,界面部分采用较新的Bootstrap技术,框架后台数据库支持Oracle.SqlServer.MySql.PostgreSQL ...

  9. 一款MVC5+EF+Bootstrap搭建的后台通用管理系统模板

    最近闲来无事,就用MVC5+EF+Bootstrap搭建了一个通用的后台管理系统的模板,里面使用到的技术包括: MVC,EF,T4模板批量生成 Jquery,jqGrid Bootstrap DDD ...

随机推荐

  1. Mac Book 问题汇集

    1.mac wifi 无法连接问题 1. 由于插入的USB 转接头导致,USB转接口带有网线插口,机器默认网页接口接口导致. 解决方案: 拔掉转接口,连上WiFi ,再插入转接口使用 2.可以是路由器 ...

  2. WDCP配置ThinkPHP5伪静态隐藏index.php，出现“”解决重定向次数过”问题

    站点域名的配置:xxx.com.conf server { listen 80; root /www/web/xxx_com/public_html; server_name xxx.com; ind ...

  3. python数据预处理

    缺失值处理 import pandas as pda import numpy as npy import matplotlib.pylab as pyl # data=pda.read_excel( ...

  4. @uoj - 310@ 【UNR #2】黎明前的巧克力

    目录 @description@ @solution@ @accepted code@ @details@ @description@ Evan 和 Lyra 都是聪明可爱的孩子,两年前,Evan 开 ...

  5. AJAX的GET请求、POST请求

    感谢:链接(视频讲解很详细) AJAX(Asynchronous Javascript and XML):异步的JavaScript和XML(不需要刷新网页就可以更新网页数据) XML:百度百科 是一 ...

  6. Codeforces Round #561 (Div. 2) A Tale of Two Lands 【二分】

    A Tale of Two Lands 题目链接(点击) The legend of the foundation of Vectorland talks of two integers xx and ...

  7. Java中容易遗漏的小知识点( 一 )（为了和小白一样马上要考试的兄弟准备的，希望小白和大家高过不挂）

    笔者csdn博客同文地址:https://blog.csdn.net/weixin_45791445/article/details/106597515 我是小康小白,一个平平无奇的Java小白.热爱 ...

  8. 透过源码看懂Flink核心框架的执行流程

    前言 Flink是大数据处理领域最近很火的一个开源的分布式.高性能的流式处理框架,其对数据的处理可以达到毫秒级别.本文以一个来自官网的WordCount例子为引,全面阐述flink的核心架构及执行流程 ...

  9. （三）利用@DataProvider传递参数

    具体实现如下: @DataProvider(name="couponListData") public Object[][] couponListData(){ //自己定义Obj ...

  10. 囚徒问题(100 prisoners problem)的python验证

    密码学课上老师介绍了这样一个问题,囚徒问题(100 prisoners problem):一百个囚徒被关在牢房里,典狱长给他们最后一次机会,100人依次进入一个有100个抽屉的牢房,每个抽屉置乱放入1 ...