当前位置: 首页 > 编程笔记 >

第一篇初识bootstrap

卫嘉泽
2023-03-14
本文向大家介绍第一篇初识bootstrap,包括了第一篇初识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的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 导语 WebKit是一个开源的浏览器引擎。Qt中提供了基于WebKit的QtWebKit模块,它包含了一组相关的类。QtWebKit提供了一个Web浏览器引擎,使用它便可以很容易的将万维网(WorldWide Web)中的内容嵌入到Qt应用程序中。与此同时,本地也可以对Web内容进行控制。QtWebKit可以呈现HTML(HyperTextMarkup Language,超文本标记语言)文档、XH

  • 很多话题已展开就是一本百科全书,但是,很多时候,直观、精简的方式是大家容易接受的。比如初学者学习V系的语言,拿着微软的MSDN是无从下手的。因此,我在尝试简短去描述或者介绍一个事物。这个也是我个人必须去抽象和提升的。 Weex是什么? Weex是阿里开源的一套构建跨平台的移动框架。对于前端的同学,最直观的是web components的开发方式;对于Native同学,可以理解为使用web的开发方式

  • 本文向大家介绍AngularJS学习第一篇 AngularJS基础知识,包括了AngularJS学习第一篇 AngularJS基础知识的使用技巧和注意事项,需要的朋友参考一下 AngularJS学习第一篇,了解指令、过滤器等相关内容。 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng- 1、 ng-app: 定义了 AngularJS 应用程序的根元素; ng-app 指令在

  • 初始化工程是一个项目开发的第一步。迈出了这一步,你就成功了一半。我相信大部分同学构建了一个项目,是会拼着老命写完的(逃...)。 这里,我尝试用简单的方式来说明一个工程的构建。然后,再将简单的方式工程化(复杂化),最后拼凑成目前weex开源的代码结构。 安装weex-toolkit weex-toolkit是一个很好的工具供我们工程构建。首先,第一步是安装该工具: $npm install -g

  • ?> CMake 不再使你在构建项目时郁闷地想自杀了。 --一位 KDE 开发者 1. 背景知识 cmake 是 kitware 公司以及一些开源开发者在开发几个工具套件(VTK)的过程中的衍生品,最终形成体系,成为一个独立的开放源代码的项目。项目的诞生时间是 2001 年。其官方网站是 www.cmake.org,可以通过访问官方网站获得更多关于 cmake 的信息。cmake 的流行其实要归功

  • 本文向大家介绍Spring基础篇之初识DI和AOP,包括了Spring基础篇之初识DI和AOP的使用技巧和注意事项,需要的朋友参考一下 前言   作为从事java开发的码农,Spring的重要性不言而喻,你可能每天都在和Spring框架打交道。Spring恰如其名的,给java应用程序的开发带了春天般的舒爽感觉。Spring,可以说是任何一个java开发者通往技术高阶的必备基础。当然,要学好Spr