关键词:
Bootstrap介绍
Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。
它是为实现快速开发Web应用程序而设计的一套前端工具包。
以前自己写的html的缺点:
命名:重复、复杂、无意义(想个名字费劲)
样式:重复、冗余、不规范、不和谐
页面:错乱、不规范、不和谐
Bootstrap的优点:
各种命名都统一并且规范化。 页面风格统一,画面和谐。
Bootstrap环境搭建
目录的结构:
bootstrap-3.3.7-dist/ ├── css // CSS文件 │ ├── bootstrap-theme.css // Bootstrap主题样式文件 │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css // 主题相关样式压缩文件 │ ├── bootstrap-theme.min.css.map │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css // 核心CSS样式压缩文件 │ └── bootstrap.min.css.map ├── fonts // 字体文件 │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ ├── glyphicons-halflings-regular.woff │ └── glyphicons-halflings-regular.woff2 └── js // JS文件 ├── bootstrap.js ├── bootstrap.min.js // 核心JS压缩文件 └── npm.js
我们主要用的是:
bootstrap.min.css // 核心CSS样式压缩文件
bootstrap.min.js // 核心JS压缩文件
我们可以通过官网来学习bootstrap为我们所有提供的一些模型(点我)
Bootstrap里面有一个重要的概念为 栅格系统;
栅格系统本质上就是在container类的标签下面,
<div class="container"> ... </div>
把每一行(row)均分成12列;(col--xx[lg,md,sm,xs]--**[1~12],列必须放在row中),xs为手机端的时候显示,md为桌面显示器 的时候显示;
每一个标签可以自定义占的列数(col--xx--**);
如果在一个 .row
内包含的列(column)大于12个,包含多余列(column)的元素将作为一个整体单元被另起一行排列,即
( 当标签所占的列数大于这一行剩余的列数的时候,会另起一行来存放该标签;)
列偏移
使用 .col-md-offset-*[1~12]
可以将列向 右侧偏移。即当前元素增加了左侧的边距(margin)。
列排序
使用 .col-md-push-* [1~12] 可以很容易的改变列(column)的顺序。
push为向右推;pull为向左拉;
常用的样式可以直接去官网去查询;(点我)
这里只是总结了一小部分
Bootstrap全局样式
标题相关
<h1>一级标题36px</h1> <h2>二级标题30px</h2> <h3>三级标题24px</h3> <h4>四级标题18px</h4> <h5>五级标题14px</h5> <h6>六级标题12px</h6> <!--除了使用h标签,Bootstrap内置了相应的全局样式--> <!--内联标签应用标题样式--> <span class="h1">一级标题36px</span> <span class="h2">二级标题30px</span> <span class="h3">三级标题24px</span> <span class="h4">四级标题18px</span> <span class="h5">五级标题14px</span> <span class="h6">六级标题12px</span>
副标题
<!--一级标题中嵌入小标题--> <h1>一级标题<small>小标题</small></h1>
文本对齐
<!--文本对齐--> <p class="text-left">文本左对齐</p> <p class="text-center">文本居中</p> <p class="text-right">文本右对齐</p>
文本大小写
<!--大小写--> <p class="text-lowercase">Lowercased text.</p> //小写 <p class="text-uppercase">Uppercased text.</p> //大写 <p class="text-capitalize">Capitalized text.</p> //首字母大写
按钮
<a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="submit" value="Submit">
按钮样式
<!-- Standard button --> <button type="button" class="btn btn-default">(默认样式)Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button" class="btn btn-primary">(首选项)Primary</button> <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success">(成功)Success</button> <!-- Contextual button for informational alert messages --> <button type="button" class="btn btn-info">(一般信息)Info</button> <!-- Indicates caution should be taken with this action --> <button type="button" class="btn btn-warning">(警告)Warning</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger">(危险)Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button" class="btn btn-link">(链接)Link</button>
按钮大小
<p> <button type="button" class="btn btn-primary btn-lg">(大按钮)Large button</button> <button type="button" class="btn btn-default btn-lg">(大按钮)Large button</button> </p> <p> <button type="button" class="btn btn-primary">(默认尺寸)Default button</button> <button type="button" class="btn btn-default">(默认尺寸)Default button</button> </p> <p> <button type="button" class="btn btn-primary btn-sm">(小按钮)Small button</button> <button type="button" class="btn btn-default btn-sm">(小按钮)Small button</button> </p> <p> <button type="button" class="btn btn-primary btn-xs">(超小尺寸)Extra small button</button> <button type="button" class="btn btn-default btn-xs">(超小尺寸)Extra small button</button> </p>
内容块居中
<div class="center-block">...</div>
快速浮动
<div class="pull-left">...</div> <div class="pull-right">...</div>
清除浮动
<!-- Usage as a class --> <div class="clearfix">...</div>
显示与隐藏
<div class="show">...</div> <div class="hidden">...</div>
设置viewport
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
JS插件:
常用的Bootstrap自带的插件(见官网)
其他常用的插件,比如(Toastr 模态框弹出的(用作通知),详细的用法) ; (Font Awesome 用作图标的)
一个不错的管理后台模板:
58-前端-bootstrap
前端框架Bootstrap该框架已经帮你写好了很多页面样式,你如果需要使用,只需要下载它对应文件,之后直接cv拷贝即可在使用Bootstrap的时候所有的页面样式都只需要你通过class来调节即可版本选择建议使用v3版本Bootstrap中文网:htt... 查看详情
前端bootstrap案例:轮播图(代码片段)
bootstrap框架系列案例案例网址【前端】Bootstrap案例:导航栏https://blog.csdn.net/karshey/article/details/127372691【前端】Bootstrap案例:轮播图https://blog.csdn.net/karshey/article/details/127388528【前端】Bootstrap案例 查看详情
前端bootstrap案例:导航栏(代码片段)
bootstrap框架系列案例案例网址【前端】Bootstrap案例:导航栏https://blog.csdn.net/karshey/article/details/127372691【前端】Bootstrap案例:轮播图https://blog.csdn.net/karshey/article/details/127388528【前端】Bootstrap案例 查看详情
bootstrap简介--目前最受欢迎的前端框架
Bootstrap,是目前最受欢迎的前端框架。Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的。Bootstrap是由Twitter的MarkOtto和JacobThornton开发的。Bootstrap是2011年八月在GitHub上发布的开源产品。Bo... 查看详情
前端基础bootstrap
1.bootstrap的特点1)bootstrap的兼容性可以兼容现在所有的浏览器,包括ie7以及ie82)bootstrap:响应式布局可以支持pc端的各种分辨率的显示,也支持移动端3)组件Bootstrap提供了很多的组件,方便使用者4)内置jQuery组件Bootstrap提供了... 查看详情
前端基础06bootstrap框架(代码片段)
Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。Bootstrap下载官方地址:https://getbootstrap.com中文地址:http://www.bootcss.com/Bootstrap环境搭建bootstrap-3.3.7-dist/├──css//CSS文件│├──bootstrap-theme.css//Bootstrap主题样式 查看详情
bootstrap前端框架介绍
Bootstrap简介 Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。是一个CSS/HTML/JavaScript框架。Bootstrap是基于HTML5和CSS3开发的,包含丰富的组件,根据这些组件可以快速的搭建一个漂亮... 查看详情
前端之bootstrap
bootstrap介绍详情见:bootstrap布局容器使用前端框架,所有标签样式的调整,全都是通过class属性值来的<divclass="container"></div>左右两边留白<divclass="container-fluid"></div>全屏显示格栅系统<divclass="... 查看详情
前端之bootstrap(代码片段)
Bootstrap简介 Bootstrap是一个前端框架、是目前最受欢迎、最流行的web前端框架、是Twitter公司的MarkOtto和JacobThornton一起开发的,Bootstra框架是基于HTML、CSS、JavaScript开发的,它因简洁、直观、功能强大被开发者广发使用。 Boot... 查看详情
day14-前端之bootstrap框架
Bootstrap介绍Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。它是为实现快速开发Web应用程序而设计的一套前端工具包。它支持响应式布局,并且在V3版本之后坚持移动设备优先。为什么要使用Bootstrap?在Bootstrap出现之前... 查看详情
前端基础之bootstrap介绍
http://v3.bootcss.com/Bootstrap优点: 下载: Bootstrap引入<metaname="viewport"content="width=device-width,initial-scale=1"><linkhref="dist/css/bootstrap.min.css"rel="stylesheet">&l 查看详情
前端框架
Bootstrap 教程Bootstrap,来自Twitter,是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的,它简洁灵活,使得Web开发更加快捷。本教程将向您讲解Bootstrap框架的基础,通过学习这些内容,您将可以轻松地创建Web项目。... 查看详情
it-前端--bootstrap30篇--快速入门
快速入门bootstrap 查看详情
在html网页中引入bootstrap前端框架
Bootstrap百度百科介绍: Bootstrap,来自Twitter,是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的,它简洁灵活,使得Web开发更加快捷。它由Twitter的设计师MarkOtto和JacobThornton合... 查看详情
前端框架bootstrap(响应式布局)入门(代码片段)
Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加bootstrap固定的class样式,就可以轻松完成指定效果的实现.... 查看详情
前端bootstrap案例:网格系统鼠标悬浮动画显示响应式布局(代码片段)
bootstrap框架系列案例案例网址【前端】Bootstrap案例:导航栏https://blog.csdn.net/karshey/article/details/127372691【前端】Bootstrap案例:轮播图https://blog.csdn.net/karshey/article/details/127388528【前端】Bootstrap案例 查看详情
吴裕雄bootstrap前端框架开发——bootstrap图片(代码片段)
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Bootstrap实例-图像</title><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/boo 查看详情
吴裕雄bootstrap前端框架开发——bootstrap表单(代码片段)
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Bootstrap实例-基本表单</title><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/b 查看详情