第一篇初识bootstrap
作者:-夏昊- 发布时间:2024-04-28 09:41:01
标签:初识,bootstrap
Bootstrap是一款目前非常流行的前端框架,简单的说,就是html,css,javascript的工具集,我们可以用bootstrap搭建出简洁,清新的网站或软件界面,有了bootstrap这个利器后台开发人员再也不用发愁前台界面的搭建了。
Bootstrap(1)包含了丰富的web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件:下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对话框等。
(2)自带了13个jQery插件,这些插件为bootstrap中的组件赋予了生命。其中包括:模式对话框、标签页、滚动条、弹出框等。
Bootstrap是twitter的工程师在业余时间开发的,在最大最流行的开源站点github上开源以后讯速成为该网站上更新最频繁的项目,大量工程师踊跃为该项目贡献代码,短时间内涌现出大量使用bootstrap搭建的网站。何以bootstrap发展速度会如此惊人呢?这主要得益于bootstrap的优秀特性:
移动设备优先:将针对移动的特性放在了首位
浏览器支持:所有的主流浏览器都支持 Bootstrap
容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap
响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
它包含了功能强大的内置组件,易于定制
下面我们来看用bootstrap搭建出来的最简单的一个页面。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>我的第一个 Bootstrap 页面</h1>
<p>重置窗口大小,查看响应式效果!</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>学的不仅是技术,更是梦想!</p>
<p>再牛逼的梦想,也抵不住你 * 似的坚持!</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>学的不仅是技术,更是梦想!</p>
<p>再牛逼的梦想,也抵不住你 * 似的坚持!</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>学的不仅是技术,更是梦想!</p>
<p>再牛逼的梦想,也抵不住你 * 似的坚持!</p>
</div>
</div>
</div>
</body>
</html>
以上所述是小编给大家介绍的第一篇初识bootstrap的相关知识网站的支持!
0
投稿
猜你喜欢
- Python应用编程需要用到的针对不同数据库引擎的数据库接口:http://wiki.python.org/moin/DatabaseInt
- 前言总是记不住字符串拼接,每次都要百度去搜索,所以在这里记录一下,好方便后续的查找,如有错误和问题可以提出,谢谢。字符串拼接分为几种方式,在
- 用比较笨的方法来做abc ="AlkjA;lkjlkjAlkAkjAlkjAAAA" if instr(abc,&quo
- 一、色彩空间的转换代码如下:#色彩空间转换import cv2 as cvdef color_space_demo(img):
- <style type="text/css"> <!-- body,td,th {
- 引擎简介Innodb引擎Innodb引擎提供了对数据库ACID事务的支持,并且实现了SQL标准的四种隔离级别。该引擎还提供了行级锁和外键约束
- 什么是pyc文件pyc是一种二进制文件,是由py文件经过编译后,生成的文件,是一种byte code,py文件变成pyc文件后,加载的速度有
- 说明:复制表(只复制结构,源表名:a 新表名:b) select * into b from a where 1<>1说明:拷贝
- 目录一、jieba库概述二、jieba库安装三、jieba分词的原理四、jieba分词的3种模式五、jieba库常用函数六、文本词频示例七、
- virtualenv简介在开发Python应用程序的时候,我们的系统上通常只会安装一个Python版本:例如 3.7。所有使用 pip 安装
- 先上图功能:1、上拉日历折叠,展示周2、左右滑动切换月2、“今天”回到今天;“+”添加日程3、localStorage存储日程index,h
- Deferred对象结构Deferred由一系列成对的回调链组成,每一对都包含一个用于处理成功的回调(callbacks)和一个用于处理错误
- 本文实例讲述了Python基于Socket实现的简单聊天程序。分享给大家供大家参考,具体如下:需求:SCIENCE 和MOOD两个人软件专业
- 导语嘿嘿!木木子今日闪现——已经给大家写了很多内容啦~涉及的人工智能、初学者、爬虫、数据分析(这方面
- golang字符串比较的三种常见方法fmt.Println("go"=="go")fmt.Print
- 八种获取当前日期的js代码,第一步:把如下代码加入<head>区域中:<SCRIPT language=java
- 1、去除一个数组中的重复元素:使用grep函数代码片段: 代码:my @array = ( 'a', 'b'
- 今天来介绍一下Tensorflow里面的反卷积操作,网上反卷积的用法的介绍比较少,希望这篇教程可以帮助到各位反卷积出自这篇论文:Deconv
- Page Object模式是Selenium中的一种测试设计模式,主要是将每一个页面设计为一个Class,其中包含页面中需要测
- 前言urllib、urllib2、urllib3、httplib、httplib2 都是和 HTTP 相关的 Python 模块,看名字就觉