第一篇初识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
投稿
猜你喜欢
- 一.什么是事务在MySQL中的事务(Transaction)是由存储引擎实现的,在MySQL中,只有InnoDB存储引擎才支持事务。事务处理
- 本文实例讲述了ES6新特性中的let和const命令。分享给大家供大家参考,具体如下:1. let 命令① 在js中是没有块级作用域的,va
- 删除文件os.remove( filename ) # filename: "要删
- 本文实例讲述了Python中shape计算矩阵的方法。分享给大家供大家参考,具体如下:看到机器学习算法时,注意到了shape计算矩阵的方法接
- 导语Hey!下午好,我是木木子,关注我,一起玩游戏吧~微信小游戏很久之前刮起了一股切水果热潮,还记得嘛?我记得纯粹是因为这个游戏家里的孩子依
- 本文实例讲述了PHP缓存集成库phpFastCache用法。分享给大家供大家参考。具体分析如下:phpFastCache是一个开源的PHP缓
- 先举个例子,分别以不指定编码、指定编码为 utf-8、指定编码为 utf-8-sig 三种方式来做比较,再将写入 csv 文件和 txt 文
- Web开发中,我们经常会遇到分页显示和排序数据记录集的情况,这在服务器端使用服务器端的代码和数据库技术是件很轻松的事情,比如:ASP、PHP
- 本文为大家分享了网易2016研发工程师编程题,供大家参考,具体内容如下'''[编程题] 奖学金时间限制:1秒空间限制
- import shutil高级的文件,文件夹,压缩包的处理模块,也主要用于文件的拷贝shutil.copyfileobj(fsrc,fdst
- 子节点部分选中时父节点也选中如果需求是:选中任何一个子节点都默认选择父节点,怎么办?其实,element-ui也提供了方案,常规下,如果子节
- 我们在设计网站的时候,有的时候需要根据页面元素的属性来制作不同的样式,比如,对于不同的链接类型,显示不同的链接图标。CSS的选择器是个很有用
- 最近和Sobin在做一个精品课程的项目,因为用到一个固定的id作为表间关联,所以在前一个表插入数据后要把插入数据生成的自增id传递给下一个表
- 本文实例讲述了Python面向对象程序设计之类和对象、实例变量、类变量用法。分享给大家供大家参考,具体如下:类和对象:类的定义:用来描述具有
- 简介使用faker可以获取很多模拟数据,如:姓名、电话、地址、银行、汽车、条形码、公司、信用卡、email、user_agen等等学会使用这
- python模块中的__all__属性,可用于模块导入时限制,如:from module import *此时被导入模块若定义了__all_
- 1. 什么是 CSV 文件CSV(逗号分隔值)文件是使用逗号分隔信息的文本文件。该文件的每一行都是一条数据记录,也就意味着它可以用于以表格的
- 应用正则表达式的全局匹配,可以匹配出字符出现的次数,比较这些次数,将最大的保存并返回。代码如下: var countMost = funct
- 本文实例讲述了Laravel框架执行原生SQL语句及使用paginate分页的方法。分享给大家供大家参考,具体如下:1、运行原生sqlpub
- tf定义了tf.app.flags,用于支持接受命令行传递参数,相当于接受argv。import tensorflow as tf#第一个是