优秀的Bootstrap框架文件目录介绍

BootStrap框架的使⽤介绍bootstrap框架的使⽤介绍⼀.什么是 Bootstrap 框架？Bootstrap 框架是最受欢迎的 HTML、CSS 和 JS 框架，⽤于开发响应式布局、移动设备优先的 WEB 项⽬。

⼆.怎么使⽤先下载库并安装到环境中注意：为了防⽌在后⾯引⽤导⼊的时候出错，可以将⼀些不必要的⽂件删除，不影响使⽤注意：bootstrap框架动态效果是基于jQuery的也就意味着你在使⽤bootstrap的时候要提前先导⼊jquery,可以提前在seetings中设置好默认注意：导⼊bootstrap⽂件夹后要导⼊两个模块这是第⼀种将⽂件下载到本地中的⽅式，第⼆种可以直接从bootcdn中获取链接这样就可以调⽤bootstrap⾥⾯的框架了1、全局CSS样式1、布局容器1、左右留⽩的页⾯框架 container<div class="container">......</div>2、全部占满浏览器窗⼝的容器框架 container-fluid<div class="container-fluid">......</div>2、栅格系统在布局容器内创建页⾯布局1、先⽤row来划分⾏，⼀⾏默认是12份2、再⽤col-**-数字，来划定份数3、可以通过栅格系统控制在多种不同尺⼨屏幕展⽰效果相同⼿机：col-xs-数字平板：col-sm-数字电脑：col-md-数字超⼤屏幕：col-lg-数字各种类参数可以叠加使⽤4、可以控制划分的份数左右移动⽤，col-md-offset-数字，从左往右移⼏份<div class="container"><div class="row"><div class="col-md-6 col-md-offset-3">这是占了6个栅格，在中间</div><div class="col-md-6 ">这是占了6个栅格，在左边</div><div class="col-md-4 col-sm-4 col-xs-4">占了4个栅格</div><div class="col-md-4 col-xs-4 col-md-offset-8 col-xs-offset-8">这是占了4个栅格，在右边</div></div></div>3、排版设置副标题：small<h1>h1. Bootstrap heading <small>Secondary text</small></h1><h2>h2. Bootstrap heading <small>Secondary text</small></h2>4、对齐左对齐：text-left居中对齐：text-center右对齐：text-right<p class="text-left">Left aligned text.</p><p class="text-center">Center aligned text.</p><p class="text-right">Right aligned text.</p><p class="text-justify">Justified text.</p><p class="text-nowrap">No wrap text.</p>5、改变⼤⼩写全部⼤写：text-lowercase全部⼩写：text-uppercase⾸字母⼤写：text-capitalize<p class="text-lowercase">Lowercased text.</p><p class="text-uppercase">Uppercased text.</p><p class="text-capitalize">Capitalized text.</p>6、列表⽆样式列表 (⼤列表⽆样式，⼩列表下有点序号)：list-style<ul class="list-unstyled"><li>...</li></ul>内联列表（将所有元素放在⼀⾏）：list-inline<ul class="list-inline"><li>...</li></ul>7、⽤户输⼊⽤<kbd>标签标⽰⽤户输⼊的内容<kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>8、表格基本带边框：table条纹带表格：table-striped带边框表格：table-bordered⿏标悬停：table-hover设置颜⾊：active(悬停在单元格上的颜⾊)、success(淡绿⾊)、danger(淡红⾊)、warning(淡黄⾊)、info(淡蓝⾊)、primary(⽆⾊) 9、表单所有的表单标签⼀般设置设置form-control类10、按钮可以为a、button、input标签添加button类，btn btn-default按钮颜⾊：btn-default（默认样式样式）、btn-danger（红⾊）、btn-primary（蓝⾊）、btn-success（绿⾊）、btn-info（淡蓝⾊）按钮尺⼨：btn-lg（⼤按钮）、btn-sm（⼩按钮）、btn-xs（超⼩按钮）禁⽤按钮：disabled='disabled'<p><button type="button" class="btn btn-danger btn-lg">（⼤按钮）Large button</button></p><p><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-primary btn-xs" disabled>禁⽤（超⼩尺⼨）Extra small button</button></p>11、图⽚响应式图⽚（让图⽚更好的缩放）：img-responsive图⽚形状：img-rounded（⽅形）、img-circle（圆形）、img-thumbnail（四边留⽩⽅形）<img src="..." alt="..." class="img-responsive img-rounded"><img src="..." alt="..." class="img-responsive img-circle"><img src="..." alt="..." class="img-responsive img-thumbnail">12、颜⾊给⽂本加颜⾊<p class="text-muted">...</p><p class="text-primary">...</p><p class="text-success">...</p><p class="text-info">...</p><p class="text-warning">...</p><p class="text-danger">...</p>给背景加颜⾊<p class="bg-primary">...</p><p class="bg-success">...</p><p class="bg-info">...</p><p class="bg-warning">...</p><p class="bg-danger">...</p>13、浮动向左浮动：pull-left向右浮动：pull-right14、让内容居中center-block2、组件组件中包括图标、下拉框、导航条、警告框、弹出框、分页、进度条等等图标可在图标库中找到对应的图标使⽤其代码前需要先下载该库到本地后导⼊，之后直接找到相应的图标复制代码就好，3、JavaScript插件JavaScript插件中包括js代码样式有：模态框、下拉菜单、滚动监听、标签页、弹出框、警告框、按钮等等其中警告框、弹出框可以⽤中的样式更加好看，使⽤其代码前需要先下载该库到本地后导⼊具体使⽤⽅式可以在中查看三.Font Awesome的使⽤介绍font awesome是⼀套字体和图表的扩建，当我们在⽤bootstrap发现图表不够⽤时可以使⽤这个具体使⽤⽅法可以在查看四.SweetAlert的使⽤介绍SweetAlert可以美化bootstrap的弹框，具有更多的风格并且与bootstrap完美兼容导⼊到⽂件中即可具体使⽤请查看。

文章题目：Bootstrap3：简介与模板1. 引言在现代全球信息湾开发中，使用响应式设计框架可以极大地简化开发流程，提高全球信息湾的用户体验和设计质量。

其中，Bootstrap3作为一种流行的前端框架，广泛应用于网页设计和开发中。

本文将对Bootstrap3进行简介，并探讨其常见模板的使用方法与特点。

2. Bootstrap3简介Bootstrap3是由Twitter开发的一种用于前端开发的开源框架。

它包含了一系列的HTML、CSS和JavaScript工具，能够帮助开发者轻松地创建响应式全球信息湾和Web应用。

Bootstrap3以其简洁、灵活和易于使用而受到广泛欢迎，成为许多开发者首选的前端框架。

3. Bootstrap3的主要特点3.1 响应式设计：Bootstrap3支持响应式设计，能够让全球信息湾在不同设备上（如PC、平板和手机）都能正常显示，并且具有良好的用户体验。

3.2 组件丰富：Bootstrap3包含了大量常用的UI组件和布局组件，开发者可以通过简单的HTML代码实现复杂的布局和交互效果。

3.3 自定义性强：Bootstrap3提供了丰富的定制选项，开发者可以根据项目需求轻松地定制化样式和布局，满足不同项目的个性化需求。

3.4 文档详细：Bootstrap3有非常详细的文档和示例，对于开发者来说非常友好，能够快速上手和解决问题。

4. Bootstrap3常见模板的使用4.1 简介模板：Bootstrap3提供了丰富的模板，包括了各种常见页面的布局和样式，比如首页、博客、产品展示等。

这些模板能够极大地减少开发者的开发时间，提高开发效率，并且具备良好的响应式设计特点。

4.2 使用方法：使用Bootstrap3的模板非常简单，开发者只需要将模板文件下载到本地，然后根据自己的需求修改和定制即可。

模板中提供了丰富的样式和布局选项，开发者可以根据项目需求进行灵活调整。

5. 个人观点与总结Bootstrap3作为一种优秀的前端框架，具有极高的开发效率和优秀的用户体验，能够帮助开发者快速构建响应式全球信息湾和Web应用。

Bootstrap简介（Web前端CSS框架）⽬录1.简介2.特点3.组件4.Javascript插件5.定制⾃⼰的框架代码6.Bootstrap Less1.简介Bootstrap是Twitter推出的⼀个开源的⽤于前端开发的⼯具包。

它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是⼀个CSS/HTML框架。

Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语⾔Less写成。

Bootstrap⼀经推出后颇受欢迎，⼀直是GitHub上的热门开源项⽬，包括NASA的MSNBC（微软全国⼴播公司）的Breaking News都使⽤了该项⽬。

2.特点Bootstrap是基于jQuery框架开发的，它在jQuery框架的基础上进⾏了更为个性化和⼈性化的完善，形成⼀套⾃⼰独有的⽹站风格，并兼容⼤部分jQuery插件。

3.组件Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建⼀个漂亮、功能完备的⽹站。

其中包括以下组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、⾯包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等。

4.Javascript插件Bootstrap⾃带了13个jQuery插件，这些插件为Bootstrap中的组件赋予了“⽣命”。

其中包括：模式对话框、标签页、滚动条、弹出框等。

5.定制⾃⼰的框架代码可以对Bootstrap中所有的CSS变量进⾏修改，依据⾃⼰的需求裁剪代码。

6.Bootstrap LessLess 是⼀个 CSS 预处理器，让 CSS 具有动态性。

另⼀⽅⾯，Bootstrap 是⼀个快速开发 Web App 和站点的⼯具包。

这样，您可以在 CSS 中使⽤ Bootstrap 的 Less 变量、mixins（混合）和 nesting（嵌套）。

排版样式一．页面排版Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。

1.页面主体Bootstrap 将全局font-size 设置为14px，line-height 行高设置为1.428(即20px)；<p>段落元素被设置等于1/2 行高(即10px)；颜色被设置为#333。

2.标题//内联元素使用标题字体<span class="h1">Bootstrap</span>在h1 ~ h6 元素之间，还可以嵌入一个small 元素作为副标题，//在标题元素内插入small 元素<h1>Bootstrap 框架<small>Bootstrap 小标题</small></h1>在h1 ~ h6 下的small 样式也进行了改变，颜色变成淡灰色：#777，行高为1，粗度为400。

3.内联文本元素//添加标记，<mark>元素或.mark 类<p>Bootstrap<mark>框架</mark></p>//各种加线条的文本<del>Bootstrap 框架</del> //删除的文本<s>Bootstrap 框架</s> //无用的文本<ins>Bootstrap 框架</ins> //插入的文本<u>Bootstrap 框架</u> //效果同上，下划线文本//各种强调的文本<small>Bootstrap 框架</small> //标准字号的85%<strong>Bootstrap 框架</strong> //加粗700<em>Bootstrap 框架</em> //倾斜4.对齐//设置文本对齐<p class="text-left">Bootstrap 框架</p> //居左<p class="text-center">Bootstrap 框架</p> //居中<p class="text-right">Bootstrap 框架</p> //居右<p class="text-justify">Bootstrap 框架</p> //两端对齐，支持度不佳<p class="text-nowrap">Bootstrap 框架</p> //不换行5.大小写//设置英文文本大小写<p class="text-lowercase">Bootstrap 框架</p> //小写<p class="text-uppercase">Bootstrap 框架</p> //大写<p class="text-capitalize">Bootstrap 框架</p>//首字母大写6.缩略语//缩略语Bootstrap<abbr title="Bootstrap" class="initialism">框架</abbr>7.地址文本//设置地址，去掉了倾斜，设置了行高，底部20px<address><strong>Twitter, Inc.</strong><br>795 Folsom Ave, Suite 600<br>San Francisco, CA 94107<br><abbr title="Phone">P:</abbr> (123) 456-7890</address>8.引用文本//默认样式引用，增加了做边线，设定了字体大小和内外边距<blockquote>Bootstrap 框架</blockquote>//反向<blockquote class="blockquote-reverse ">Bootstrap 框架</blockquote>9.列表排版//移出默认样式<ul class="list-unstyled"><li>Bootstrap 框架</li><li>Bootstrap 框架</li><li>Bootstrap 框架</li><li>Bootstrap 框架</li><li>Bootstrap 框架</li></ul>//设置成内联<ul class="list-inline"><li>Bootstrap 框架</li><li>Bootstrap 框架</li><li>Bootstrap 框架</li><li>Bootstrap 框架</li><li>Bootstrap 框架</li></ul>//水平排列描述列表<dl class="dl-horizontal"><dt>Bootstrap</dt><dd>Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。

Bootstrap的常用类（CSS和布局组件）的总结Bootstrap通过给标签赋予一个类名(class name),来生成对应类名的效果标签网格选项row :行col-*-*: 列 (第一个*可以为xs[超小]/sm[小型]/md[中型]/lg[大型]第二个*必须为12以内的[列数])col-*-offset-* :列偏移(第一个*和上面一样,第二个*范围是1到11,表示把该列的左外边距(margin)增加*列)col-*-*-*:列排序(第一个*和上面一样,第二个*可以为push[向右]/pull[向左],第三个*范围是1到11[列数])排版small:内联子标题lead:引导主体副本text-*:文本样式(*号可以为left[左对齐]/center[居中对齐]/right[右对齐]/muted[减弱文本]/primary/success/info/warning/danger/justify[自动换行]/nowrap[不换行]/lowercase[小写]/uppercase[大写]/capitalize[首字母大写])list-inline:列表置于同一行表格table:基本样式(只有横向分隔线)table-*:表格样式(*可以为striped[添加条纹]/bordered[添加边框]/hover[启用悬停]/condensed[更加紧凑])tr/th/td 有active/success/info/warning/danger来改变背景颜色将任意的table放在table-responsive内,实现响应式表格bootstrap里active/success/info/warning/danger对应的背景颜色?表单创建基本表单(垂直表单)的步骤1.向父 <form> 元素添加 role="form"。

2. 把标签和控件放在一个带有 class .form-group 的 <div> 中。

Bootstrap框架的简介⼀、Bootstrap介绍Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。

它是为实现快速开发Web应⽤程序⽽设计的⼀套前端⼯具包。

它⽀持响应式布局，并且在V3版本之后坚持移动设备优先。

Bootstrap是⼀个前端开发的框架，其实就是⼀堆HTML代码，有⼀些⾃带的CSS样式类（只需要记忆常⽤的CSS样式类）为什么要使⽤Bootstrap？在Bootstrap出现之前：命名：重复、复杂、⽆意义（想个名字费劲）样式：重复、冗余、不规范、不和谐页⾯：错乱、不规范、不和谐在使⽤Bootstrap之后：各种命名都统⼀并且规范化。

页⾯风格统⼀，画⾯和谐。

Bootstrap下载我们使⽤V3版本的Bootstrap，我们下载的是⽤于⽣产环境的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的某些组件依赖于jQuery，所以请确保下载对应版本的jQuery⽂件，来保证Bootstrap相关组件运⾏正常。

HTML模板：<!DOCTYPE html><html><head><title>Bootstrap 模板</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入 Bootstrap --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 --><!-- 注意：如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 --><!--[if lt IE 9]><script src="https:///libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https:///libs/respond.js/1.3.0/respond.min.js"></scrip t><![endif]--></head><body><h1>Hello, world!</h1><!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --><script src="https:///jquery.js"></script><!-- 包括所有已编译的插件 --><script src="js/bootstrap.min.js"></script></body></html>快速引入文件：bootstrap CDN推荐<!-- 新 Bootstrap 核心 CSS 文件 --><link href="/libs/bootstrap/3.0.3/css/bootstrap.min.cs s" rel="stylesheet"><!-- 可选的Bootstrap主题文件（一般不使用） --><script src="/libs/bootstrap/3.0.3/css/bootstrap-them e.min.css"></script><!-- jQuery文件。

前端框架之bootstrap简介Bootstrap框架
Bootstrap框架
2.X
3.X
4.X # 推荐使⽤3.X版本
使⽤框架调整页⾯样式⼀般都是操作标签的class属性即可
bootstrap需要依赖于jQuery才能正常执⾏(动态效果)
引⼊⽅式
本地引⼊(最完整的)
1.引⼊jQuery
2.引⼊bootstrap的css⽂件
3.引⼊bootstrap的js⽂件
CDN引⼊
1.引⼊jQuery CDN
2.引⼊bootstrap css的 CDN
3.引⼊bootstrap js的 CDN
"""placeholder 属性提供可描述输⼊字段预期值的提⽰信息"""
布局容器
"""
第⼀次使⽤该框架的时候最好采⽤本地导⼊的⽅式
让pycharm记住bootstrap的关键字
"""
container 左右留⽩
container-fluid 左右不留⽩
栅格系统
row ⾏ # ⼀个row就是⼀⾏⼀⾏是固定的12份
col-md-1 占⼏份
col-sm-1 占⼏份
col-xs-1 占⼏份
col-lg-1 占⼏份
图标
bootstrap⾃带的
通过span标签修改class属性值
fontawesome⽹站
专门提供图标库 # 完美兼容bootstrap框架。

Ubuntu根⽬录下各⽂件夹的作⽤Ubuntu上常识和常⽤命令：1、Ubuntu⽂件结构 在ubuntu上硬盘的⽬录和Windows上不同，Windows可以根据⾃⼰的需求分不同的盘符，但ubuntu上只有⼀个盘，从根⽬录开始每个⽬录有针对性的⽤途。

根⽬录⽤“/”表⽰，根⽬录下会有不同的⽬录:部分错误望指正修改！ bin: 系统启动需要的命令和⼤部分普通⽤户平常所需的可执⾏命令。

需要注意的是这个⽂件夹中的⽂件都是⼆进制的，权限很⾼，绝⼤部分⽂件普通⽤户都只有执⾏权限，⽆读写权限。

只有root账户有读写权限。

boot： ⽬录中存放Ubuntu内核⽂件及引导加载器bootstraploade相关的⽂件，如果这个⽬录中的⽂件被破坏，⼀般都会出现启动引导异常，⽆法正常进⼊系统。

root权限才能读写⽂件。

cdrom： 光盘⽬录，如果插⼊光盘会出现光盘内容（这个已经很少⽤了，被时代淘汰的功能） dev： 设备列表⽂件夹，设备包括⿏标、键盘、硬盘等。

关于设备驱动⽂件都存放在这个⽂件夹中，。

etc： 程序的配置⽂件⽬录， ⽐如配置vi编辑器的vimrc就在这个⽂件下内部，系统不同⽤户的密码就存放在这个⽂件夹中。

这个⽂件夹的权限很⾼，root权限才能编辑修改⽂件。

home： 家⽬录，所有普通⽤户都有⼀个以⾃⼰名字命名的⽂件夹存放在这个⽬录中。

普通⽤户登录ubuntu默认进⼊的就是家⽬录中⾃⼰的⽂件夹，可⽤pwd命令查看，也可⽤ cd ~ 命令快速跳转到家⽬录 lib： 各种程序所需的共享动态链接库，是系统程序能正常运⾏的⽀持⽂件。

主要存放的都是系统程序共⽤的代码，提⾼程序的可读性，节省空间。

lib32： 系统32位⽀持库，有的系统是64位，则位lib64位⽀持库 lib64： lib64位⽀持库，我的是32位的，⾥⾯只有⼀个⽂件。

media： 存放所有关于媒体信息的⽂件。

mnt： 所有挂载在系统中的设备。