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

合集下载

Bootstrap文档2

/ / 使用默认值初始化 / / 初始化。不支持键盘导航 / / 初始化并立即展示 < / p >
每个插件还通过 C o n s t r u c t o r属性暴露了其自身的构造器函数： $ . f n . p o p o v e r . C o n s t r u c t o r。如果你想获取某个插件的实例，可以直接从页面元素内获取： $ ( ' [ r e l = p o p o v e r ] ' ) . d a t a ( ' p o p o v e r ' )。
/javascript/
4/40
2014年3月15日
JavaScript插件 · Bootstrap
EXAMPLE
Modal title
One fine body…
×
Close
Save changes
< d i vc l a s s = " m o d a lf a d e " > < d i vc l a s s = " m o d a l d i a l o g " > < d i vc l a s s = " m o d a l c o n t e n t " > < d i vc l a s s = " m o d a l h e a d e r " > < b u t t o nt y p e = " b u t t o n "c l a s s = " c l o s e "d a t a d i s m i s s = " m o d a l "a r i a h i d d e n = " t r u e " > & t i m e s ; < / b u t t o n > < h 4c l a s s = " m o d a l t i t l e " > M o d a lt i t l e < / h 4 > < / d i v > < d i vc l a s s = " m o d a l b o d y " > < p > O n ef i n eb o d y & h e l l i p ; < / p > < / d i v > < d i vc l a s s = " m o d a l f o o t e r " > < b u t t o nt y p e = " b u t t o n "c l a s s = " b t nb t n d e f a u l t "d a t a d i s m i s s = " m o d a l " > C l o s e < / b u t t o n > < b u t t o nt y p e = " b u t t o n "c l a s s = " b t nb t n p r i m a r y " > S a v ec h a n g e s < / b u t t o n > < / d i v > < / d i v > < ! -/ . m o d a l c o n t e n t> < / d i v > < ! -/ . m o d a l d i a l o g> < / d i v > < ! -/ . m o d a l>

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 简介模板

文章题目：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框架）

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讲义

排版样式一．页面排版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的常用类（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介绍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相关组件运⾏正常。

bootstrap学习文档

HTML模板：<!DOCTYPE html><html><head><title>Bootstrap 模板</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="css/bootstrap.min.css" rel="stylesheet"></head><body><h1>Hello, world!</h1><script src="https:///jquery.js"></script><script src="js/bootstrap.min.js"></script></body></html>快速引入文件：bootstrap CDN推荐<link href="/libs/bootstrap/3.0.3/css/bootstrap.min.cs s" rel="stylesheet"><script src="/libs/bootstrap/3.0.3/css/bootstrap-them e.min.css"></script><!-- jQuery文件。

前端框架之bootstrap简介

前端框架之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根⽬录下各⽂件夹的作⽤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：所有挂载在系统中的设备。

SpringBoot整合BootStrap实战

SpringBoot整合BootStrap实战⽬录SpringBoot整合BootStarp1.Pom⽂件2.在resource下创建⼀个l⽂件路径：statis/webjars3.将页⾯放在src/main/webapp/WEB-INF/views下4.界⾯添加以下⼏⾏5.application.yml配置⽂件中6. Controller注意因为我显⽰的是jspSpringBoot整合BootStarp⼀开始在将BootStrap整合到项⽬中时，以为SpringBoot项⽬和以前的javaWeb⼀样，直接在页⾯中引⽤css,js即可，但是打开界⾯时，样式效果出不来，后来看了⼏篇⽂章以及⾃⼰摸索，现将代码展⽰如下：1.Pom⽂件<properties><webjars-locator>0.32-1</webjars-locator><bootstrap>3.3.7</bootstrap><jquery>3.3.1</jquery></properties>这是需要导⼊的依赖<dependency><groupId>org.webjars</groupId><artifactId>webjars-locator</artifactId><version>${webjars-locator}</version></dependency><dependency><groupId>org.webjars</groupId><artifactId>bootstrap</artifactId><version>${bootstrap}</version></dependency><dependency><groupId>org.webjars</groupId><artifactId>jquery</artifactId><version>${jquery}</version></dependency>2.在resource下创建⼀个l⽂件路径：statis/webjars3.将页⾯放在src/main/webapp/WEB-INF/views下这是我⾃⼰新建的,如上所⽰4.界⾯添加以下⼏⾏<script src="/webjars/jquery/jquery.min.js"></script><script src="/webjars/bootstrap/js/bootstrap.min.js"></script><link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css" rel="external nofollow" />5.application.yml配置⽂件中spring:mvc:view:prefix: /WEB-INF/views/ #前缀suffix: .jsp #后缀6. Controller@Controller@RequestMapping(value = "/show")public class PageController {@RequestMapping("/getHelloJsp")public String helloJsp(ModelMap map) {// 加⼊⼀个属性，⽤来在模板中读取// map.addAttribute("name", "wade");return "hello";}}此时启动项⽬的启动类，输⼊url:localhost:端⼝号/show/getHelloJsp 即可正确的显⽰页⾯的样式注意因为我显⽰的是jsp所以你还得提前在pom中添加关于jsp的两个依赖<dependency><groupId>org.apache.tomcat.embed</groupId><artifactId>tomcat-embed-jasper</artifactId><scope>provided</scope></dependency><dependency><groupId>javax.servlet.jsp.jstl</groupId><artifactId>jstl-api</artifactId><version>1.2</version></dependency>因为是初学springBoot所以⽂件路径各⽅⾯可能没有按照springBoot的规范来，以后慢慢纠正，如有更好的⽅式，请不吝赐教。

Linux根目录各个文件夹介绍及说明

Linux根⽬录各个⽂件夹介绍及说明/bin ⼆进制可执⾏命令/dev 设备特殊⽂件/etc 系统管理和配置⽂件/etc/rc.d 启动的配置⽂件和脚本/home ⽤户主⽬录的基点，⽐如⽤户user的主⽬录就是/home/user，可以⽤~user表⽰/lib 标准程序设计库，⼜叫动态链接共享库，作⽤类似windows⾥的.dll⽂件/sbin 系统管理命令，这⾥存放的是系统管理员使⽤的管理程序/tmp 公⽤的临时⽂件存储点/root 系统管理员的主⽬录（特权阶级）/mnt 系统提供这个⽬录是让⽤户临时挂载其他的⽂件系统。

/lost+found 这个⽬录平时是空的，系统⾮正常关机⽽留下“⽆家可归”的⽂件（windows下叫什么.chk）就在这⾥ /proc 虚拟的⽬录，是系统内存的映射。

可直接访问这个⽬录来获取系统信息。

/var 某些⼤⽂件的溢出区，⽐⽅说各种服务的⽇志⽂件/run ⾥⾯的东西是系统运⾏时需要的, 不能随便删除. 但是重启的时候应该抛弃. 下次系统运⾏时重新⽣成/usr 最庞⼤的⽬录，要⽤到的应⽤程序和⽂件⼏乎都在这个⽬录。

其中包含： /usr/x11r6 存放x window的⽬录 /usr/bin 众多的应⽤程序 /usr/sbin 超级⽤户的⼀些管理程序 /usr/doc linux⽂档 /usr/include linux下开发和编译应⽤程序所需要的头⽂件 /usr/lib 常⽤的动态链接库和软件包的配置⽂件 /usr/man 帮助⽂档 /usr/src 源代码，linux内核的源代码就放在/usr/src/linux⾥ /usr/local/bin 本地增加的命令 /usr/local/lib 本地增加的库根⽂件系统通常情况下，根⽂件系统所占空间⼀般应该⽐较⼩，因为其中的绝⼤部分⽂件都不需要经常改动，⽽且包括严格的⽂件和⼀个⼩的不经常改变的⽂件系统不容易损坏。

除了可能的⼀个叫/ v m l i n u z标准的系统引导映像之外，根⽬录⼀般不含任何⽂件。

bootstrap常用类简介

boots‎trap 常用类名(2014-09-12 15:15:21)转载▼分类：boots‎trap标签：it一、常用类1、conta‎iner居中的内容‎展示2、row 行内容显示‎3、col 列内容显示‎，列必须在r‎ow 中xs 宽度小于7‎68 ，sm宽度小‎于990 大于768‎,md 宽度大于9‎90，小于120‎0，lg宽度大‎于1200‎col-xs-4 代表小屏下显示‎为4列，col-xs-4 col-md-2 代表小屏下‎占4列，大屏下占2‎列<</span>div class‎="conta‎i ner"> <</span>h1>Hello‎, world‎!</</span>h1> <</span>div class‎="row"><</span>div class‎="col-xs-4"> <</span>h2 class‎="page-heade‎r">区域一</</span>h2><</span>p>Boots‎t rap has a few easy ways to quick‎l y get start ‎e d, each one appea‎l ing to a diffe‎r ent skill‎level‎and use case. Read throu ‎g h to see what suits‎your parti‎c ular‎needs‎.</</span>p></</span>div> <</span>div class‎="col-xs-4"> <</span>h2 class‎="page-heade‎r">区域二</</span>h2><</span>p>If you work with Boots‎t rap's uncom‎p iled‎sourc‎e code, you need to compi‎l e the LESS files‎to produ‎c e usabl‎e CSS files‎.For compi‎l ing LESS files‎into CSS, we only offic‎i ally‎suppo‎r t Reces‎s, which ‎i s Twitt‎e r's CSS hinte‎r based‎onless.js.</</span>p> </</span>div> <</span>div class‎="col-xs-4"> <</span>h2 class‎="page-heade‎r">区域三</</span>h2> <</span>p>Withi‎n the downl‎o ad you'll find the follo‎w ing direc‎t orie‎s and files‎,logic‎a lly group‎i ng commo‎n resou‎r ces and provi‎d ingboth compi‎l ed and minif‎i ed varia‎t ions‎.</</span>p> </</span>div> </</span>div> </</span>div>\4、h1-H6 排版5、pageH‎e ader‎6、small‎小一号的深‎灰色，用作副标题‎。

深入理解bootstrap框架之第二章整体架构

深⼊理解bootstrap框架之第⼆章整体架构⼀. 整体架构1. CSS-12栅格系统把⽹页宽度均分为12等分（保留15位精度）——这是bootstrap的核⼼功能。

2.基础布局组件包括排版、按钮、表格、布局、表单等等。

3.jQuerybootstrap插件的基础4.响应式设计兼容多个终端。

这是bootstrap的终极理念。

5.css插件提供丰富的样式。

6.js插件⼆. 栅格系统1.基本实现过程定义容器的⼤⼩——跳转边距——媒询有以下要求：（1）⼀⾏（row）数据必须包含在.container中。

.container默认居中。

宽度分为4种，超⼩屏（100%），⼩屏（750px），中屏（970px），⼤屏（1170px）。

row的边距（左右margin，下同）是-15px。

（2）有了row，才能搭建列（col）。

所有组件必须放在col内，只有col才能作为row的直接⼦元素。

.col的左右内边距（padding-left,right）为15px。

也就是说，最⼩的col有30px。

（3）在以上基础上快速搭建布局（4）col之间是⽊有边距的，应当使⽤padding来产⽣col的视觉距离。

这样做会导致⼀个row容不下12个col，这时应当⽤负的margin来抵消padding的影响。

（5）栅格系统是通过指定1-12的值来设定范围的。

对于col的规格，开发者指定了4个不同的屏幕如图，在<body class="container">内包含若⼲个<div class="col-md-“1-12数字”">col-md-“1-12数字”></div>效果是⼩结： col组合其实就⽤了两个属性：float:left和width%。

2. 实现⽅案（1）偏移（.col-尺⼨⼤⼩-offset-*）把整个col向右边偏移，在源码实现上，.col-尺⼨⼤⼩-offset-x 就是margin-left:8.33333333333 (x)情景⼀：页⾯主体只占据container的66%，⽽且居中。

Bootstrap前端框架【范本模板】

Bootstrap标题（一）Bootstrap和普通的HTML页面一样,定义标题都是使用标签〈h1〉到<h6>,只不过Bootstrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样,具体定义的规则可以如下表所示：通过比较可以发现，Bootstrap标题样式进行了以下显著的优化重置：1、重新设置了margin-top和margin—bottom的值, h1~h3重置后的值都是20px；h4～h6重置后的值都是10px.2、所有标题的行高都是1.1（也就是font—size的1。

1倍),而且文本颜色和字体都继承父元素的颜色和字体。

3、固定不同级别标题字体大小,h1=36px，h2=30px，h3=24px,h4=18px,h5=14px和h6= 12px.标题（二）除此之外，我们在Web的制作中，常常会碰到在一个标题后面紧跟着一行小的副标题。

在Bootstrap中他也考虑了这种排版效果,使用了<small〉标签来制作副标题。

这个副标题具有其自己的一些独特样式:1、行高都是1，而且font—weight设置了normal变成了常规效果(不加粗），同时颜色被设置为灰色（#999）。

2、由于<small〉内的文本字体在h1～h3内，其大小都设置为当前字号的65%；而在h4～h6内的字号都设置为当前字号的75％；详细代码请参阅bootstrap。

css文件中第407行~第443行。

h1 small，.h1 small，h2 small，.h2 small，h3 small,段落(正文文本）段落是排版中另一个重要元素之一。

在Bootstrap中为文本设置了一个全局的文本样式（这里所说的文本是指正文文本）:1、全局文本字号为14px（font-size）。

2、行高为1。

42857143（line—height),大约是20px（大家看到一串的小数或许会有疑惑，其实他是通过LESS编译器计算出来的，当然Sass也有这样的功能)。

【Bootstrap】（一）——文件结构介绍

【Bootstrap】（⼀）——⽂件结构介绍⽂件结构、内容下载⽂件后你会发现如下所⽰的⽂件结构，分为编译版和源码版。

：正常情况下，编写页⾯常⽤到的样式集（不含响应式）以及插件集。

：bootstrap下整站的源码。

包含很多模板页和less⽂件，并采⽤node.js搭建。

1.1编译版bootstrap/├── css/│├── bootstrap.css─────────全部样式集合（不含响应样式）(123KB)│└── bootstrap.min.css────────────（压缩版）(104KB)├── js/│├── bootstrap.js────────────全部13款插件集合 (61KB)│└── bootstrap.min.js────────────（压缩版）(28KB)└── img/├── glyphicons-halflings.png──────────常⽤到的sprite图标（深⾊版）└── glyphicons-halflings-white.png────────────（浅⾊版）1.2源码版twitter-bootstrap-37d0a30/├── docs/│├── assets/【项⽬包】││├── css/││├── ico/────────────苹果设备下的图标集合以及站点的favicon.ico││├── img/││├── js/│├── build/ Twitter下利⽤node.js和mustache建⽴的test项⽬,测试浏览器下⼀些功能否⽀持│├── examples/【demo包】││└── n.html──────────提供9款练习和模仿的demo页│├── templates/【模板包】││├── page/│││└── n.mustache────⾸页7部分的JS模板││└── layout.mustache───⾸页7部分布局的JS模板│├── base-css.html ──────⾸页_基础css页│├── components.html────⾸页_组件页│├── customize.html ─────⾸页_定制页│├── extend.html ───────⾸页_less介绍页│├── getting-started.html───⾸页起步介绍页│├── index.html ────────⾸页│├── javascript.html ─────⾸页_插件页│└── scaffolding.html─────⾸页_⼿脚架页├── img/【sprite包】│├── glyphicons-halflings.png──────────常⽤到的sprite图标（深⾊版）│└── glyphicons-halflings-white.png────────────（浅⾊版）├── js/ 【插件包】│├── bootstrap-affix.js────────────附加导航│├── bootstrap-alert.js───────────警告消息│├── bootstrap-button.js──────────按钮│├── bootstrap-carousel.js─────────轮播│├── bootstrap-collapse.js─────────折叠效果│├── bootstrap-dropdown.js────────下拉菜单│├── bootstrap-modal.js──────────模态对话框│├── bootstrap-popover.js─────────提⽰│├── bootstrap-scrollspy.js─────────滚动监听│├── bootstrap-tab.js────────────标签页│├── bootstrap-tooltip.js───────────⼯具提⽰│├── bootstrap-transition.js────────过渡效果│└── bootstrap-typeahead.js────────输⼊提⽰├── less/【未编译的css包】│└── n.less ──────所有样式的未编译版├── .gitignore ────├── .travis.yml │├── CHANGELOG.md │├── component.json │├── composer.json │├── CONTRIBUTING.md ├── node.js以及JS模板所需的⼀些配置⽂件├── LICENSE.md │├── Makefile │├── package.json │└── README.md ────。

BootStrap实现树形目录组件代码详解

BootStrap实现树形⽬录组件代码详解需求描述产品添加页⾯，需要选择车型。

在bootStrap的modal上弹出⼦modal来使⽤。

车型⼀共有4级⽬录。

要使⽤⽬录树。

然后分活动和商品两种，需要能够通过不通参数来调⽤该组件。

车型品牌要使⽤字母导航。

技术实现数据都是后端传json过来，我们ajax获取然后操作。

由于车型总数据有⼏万条以上，不可能⼀次性请求过来。

这⾥我们使⽤异步的⽅式，每点击⼀次⽬录节点，加载它的下⼀级。

这⾥我们⽤两个参数来控制活动和商品的不同加载。

_showPrice和opened后端传过来的第⼀级数据是车型品牌，其中有⾸字母的字段。

字母导航的初始化，就是把这个数据⽤firstWord属性来排序，然后忽略掉其他⾸字母相同的元素。

对于活动类型，需要返回所勾选的最低⼀级的数据。

（勾选奥迪和奥迪A6，则只返回A6的意思），这⾥⽤了整整4层循环。

不过它是根据是否有checked来遍历的，速度不慢。

/*** Created by nuenfeng on 2016/5/23.* 车型选择组件* 参数：* showPrice 是否要输⼊价格（不输⼊价格的从品牌开始就有选项框，没有全选功能）* params 外部传⼊的对象* callback 回调函数*/(function () {var uriCarBrand = global.url.carBrandList;//var uri = uriCarBrand.url;var opened = false; //当前页⾯是否打开过本组件var _callback; //回调函数var requestParams; //请求时要使⽤的参数var _showPrice; //是否要输⼊价格var lastShowPrice; //前⼀次打开状态var charNavArr; //字母导航数组function CarTree(showPrice, params, callback) {// 没打开过，初始化；打开过，直接显⽰modalrequestParams = params;_showPrice = showPrice;_callback = callback;if (!opened || lastShowPrice != showPrice) {this.init();opened = true;lastShowPrice = showPrice;} else {$('#zc-sub-modal').modal('show');}}CarTree.prototype.init = function () {msjcTools.addSubModal();//设置⼤模态框$('#zc-sub-modal').addClass("bs-example-modal-lg");$('#zc-sub-modal .modal-dialog').addClass("modal-lg");var str = '<form id="info-form" data-parsley-validate class="form-horizontal form-label-left">';str += '<ul id="resourceId" class="treeview-gray">'str += '<li id="cb_"><span>汽车品牌选择</span>';str += "</li>"str += '</ul>'str += '</form>';var objId = 'cb_0';var carBrandId = 0;loadSubMenu(objId, carBrandId, 1); //1 表⽰第⼀次加载，⽤于加载成功后判断时候要初始化字母导航$('#zc-sub-modal-body').html(str);$('#zc-sub-modal').modal({keyboard: false,show: true});// 点击保存事件$('#zc-sub-modal .modal-footer .btn.btn-primary').unbind().bind("click", function () {save();});//$("#resourceId").find("input[type=checkbox]").unbind().bind("click",function(){// if($(this).is(':checked')==true){//选中则其上层节点全部展开并选中// //上级选中// $(this).parents("li").each(function(){// $(this).find("input[type=checkbox]:first").attr("checked",true)// });// } else {// //下级取消选中// $(this).siblings("ul").find("input[type=checkbox]").each(function(){// $(this).removeAttr("checked");// });// }//});//隐藏⼦窗⼝后保持⽗窗⼝的滚动$("#zc-sub-modal").on("hidden.bs.modal", function () {$('body').addClass('modal-open')});}CarTree.prototype.empty = function () {opened = false;console.log('empty me');}//加载⼦菜单var loadSubMenu = function (objId, carBrandId, times) {requestParams.brandId = carBrandId;executeAjax(global.url.carBrandList, requestParams, function (data) {// 给data风骚地排个序data.sort(keysrt("firstWord"));var menuHtml = "<ul>";for (var index in data) {var menu = data[index];menuHtml += '<li id="cb_' + menu.carBrandId + '" value="' + menu.carBrandId + '" brand="' + menu.brand + '">'; // 带价格的树if (_showPrice) {// 最后⼀级，添加选项框if (menu.level > 3) {menuHtml += '<input type="checkbox" name="resourceIds" value="' + menu.carBrandId + '" />'; }menuHtml += '<span>' + + '</span>';// 最后⼀级，添加输⼊框if (menu.level == 4) {menuHtml += '<input type="text" maxlength="">';}} else { // 不带价格的树menuHtml += '<input type="checkbox" name="resourceIds" value="' + menu.carBrandId + '" />'; menuHtml += '<span>' + + '</span>';}menuHtml += "</li>";}menuHtml += "</ul>";$('#' + objId).append(menuHtml);$('#' + objId).attr('data-load', 'loaded');//汽车类型第⼀级加载完成后，初始化字符导航charNavArr = [];var fwdLast = ''; //上⼀次的⾸字母for (var i in data) {var cobjTemp = {};if (fwdLast != data[i].firstWord) {fwdLast = data[i].firstWord;cobjTemp.firstWord = fwdLast;cobjTemp.targetId = 'cb_'+data[i].carBrandId;charNavArr.push(cobjTemp);}}if (times == 1) {initCharNav();// 点击保存事件$('.charNavSaveBtn').unbind().bind("click", function () {save();});}});}// 此处是风骚的数组对象排序var keysrt = function (propertyName) {return function (object1, object2) {var value1 = object1[propertyName];var value2 = object2[propertyName];if (value2 < value1) {return 1;}else if (value2 > value1) {return -;}else {return ;}}}// 保存事件var save = function(){// 确认后，执⾏回调函数if (_showPrice) {var res = getPriceResult();if (res.status) {_callback(res.data);} else {alert(res.error);return;}} else {_callback(getNopriceResult());}//返回数据，然后隐藏$('#zc-sub-modal').modal('hide');}// 设置字符导航初始化var initCharNav = function () {var charNavHtml = '<ul id="charNavBar" class="charNavBar pagination">';for (var i in charNavArr) {charNavHtml += '<li><a href="#'+charNavArr[i].targetId+'">'+charNavArr[i].firstWord+'</a></li>'; }charNavHtml += '<li><a class="modalGoTop">↑</a></li>';charNavHtml += '<button type="button" class="btn btn-primary charNavSaveBtn">保存</button>'; charNavHtml += '</ul>';$('#zc-sub-modal').append(charNavHtml);$('.modalGoTop').on('click', function(e){$('#zc-sub-modal').animate({scrollTop: }, );});}// 统计带价格的返回数据var getPriceResult = function () {var result = {status : true,data : [],error : ''};var liTemp;var objTemp;$('.treeview-gray input:checkbox:checked').each(function (i) {liTemp = $(this).parent('li');objTemp = {};objTemp.carBrandId = liTemp.attr('value');objTemp.brand = liTemp.attr('brand');objTemp.carBrandName = liTemp.find('span').text();objTemp.unitPrice = liTemp.find('input:text').val();// 如果价格没有输⼊，返回保存失败，并返回没有输⼊的carBrandNameif(objTemp.unitPrice == '') {result.status = false;result.error = '请输⼊ ' + objTemp.carBrandName + ' 的价格！';return result;}result.data.push(objTemp);});return result;}// 统计不带价格的返回数据var getNopriceResult = function () {var result = [];var liTemp;var objTemp;var flag1;var flag2;var flag3;var flag4;var levelName;// 遍历4层$('#cb_').children().children('li').children('input:checkbox').each(function (i) {if ($(this).is(':checked')) {flag = true;} else {flag = false;}$(this).parent().children().children('li').children('input:checkbox').each(function (i) { if ($(this).is(':checked')) {flag = false;flag = true;} else {flag = false;}// 获取第⼆级的名字，给第三级使⽤liTemp = $(this).parent('li');level2Name = liTemp.children('span').text();$(this).parent().children().children('li').children('input:checkbox').each(function (i3) { if ($(this).is(':checked')) {flag1 = false;flag2 = false;flag3 = true;} else {flag3 = false;}$(this).parent().children().children('li').children('input:checkbox').each(function (i4) { if ($(this).is(':checked')) {flag1 = false;flag2 = false;flag3 = false;flag4 = true;} else {flag4 = false;}if (flag4) {liTemp = $(this).parent('li');objTemp = {};objTemp.carBrandId = liTemp.attr('value');objTemp.brand = liTemp.attr('brand');//objTemp.carBrandName = liTemp.children('span').text();objTemp.carBrandName = objTemp.brand + ' ' + liTemp.children('span').text();result.push(objTemp);}});if (flag) {liTemp = $(this).parent('li');objTemp = {};objTemp.carBrandId = liTemp.attr('value');objTemp.brand = liTemp.attr('brand');//objTemp.carBrandName = liTemp.children('span').text();objTemp.carBrandName = objTemp.brand + ' ' + levelName + ' ' + liTemp.children('span').text();result.push(objTemp);}});if (flag2) {//liTemp = $(this).parent('li');objTemp = {};objTemp.carBrandId = liTemp.attr('value');objTemp.brand = liTemp.attr('brand');//objTemp.carBrandName = objTemp.brand + liTemp.children('span').text();objTemp.carBrandName = objTemp.brand + ' ' + liTemp.children('span').text();result.push(objTemp);}});if (flag1) {liTemp = $(this).parent('li');objTemp = {};objTemp.carBrandId = liTemp.attr('value');objTemp.brand = liTemp.attr('brand');objTemp.carBrandName = liTemp.children('span').text();result.push(objTemp);}});return result;}// 给⽬录树绑定点击事件$(document).on('click', '#resourceId li', function (e) {e.stopPropagation();if ($(this).attr('open')) {$(this).removeAttr('open');$(this).children('ul').hide();} else {$(this).attr('open', 'opened');$(this).children('ul').show();}var objId = $(this).attr('id');var carBrandId = $(this).attr('value');//加载过的不执⾏if ($(this).attr('data-load')) {return;}loadSubMenu(objId, carBrandId);});// 点击多选框时候不下拉$(document).on('click', 'input[type="checkbox"]', function (e) {e.stopPropagation();});window.CarTree = CarTree;}());调⽤⽅法：carTree = new CarTree(false, {}, function (data) {console.log(data);});以上所述是⼩编给⼤家介绍的BootStrap实现树形⽬录组件代码详解的相关知识，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。

flask-bootstrap模版中所需的CSSJS文件实现本地引入

粘贴到项目的templates目录下然后修改这个文件引用的cssjs地址为本地路径前提是要把引用的cssjs文件放在本地项目得有关目录下
flask-bootstrap模版中所需的 CSSJS文件实现本地引入
Flask-Bootstrap默认是加载CDN的css与js文件,每次刷新页面都要访问到外网的cdn来获取css与js文件; 模版扩展来自于bootstrap/base.html,就以bootstrap/base.html的用法为例. 查看包文件路径位置
python >>> from flask.ext.bootstrap import Bootstrap >>> import inspect >>> print inspect.getsource(Bootstrap)
下面配置Flask-Bootstrap启用加载本地的css与js文件:
复制这个bootstrap/base.html文件到项目的templates目录下，然后修改如下：
பைடு நூலகம்
总结一下：复制项目引用的Flask-Bootstrap的bootstrap/base.html文件，在模块安装目录下找到的。粘贴到项目的templates目录下，然后修改这个文件引用的css,js 地址为本地路径，前提是要把引用的css，js文件放在本地项目得有关目录下。

bootstrap.yml list的几种写法 -回复

bootstrap.yml list的几种写法-回复Bootstrap是一个流行的前端框架，它可以简化我们在构建网站时所需的大部分CSS和JavaScript工作。

bootstrap.yml文件是Bootstrap框架中一个常用的配置文件，它包含了我们项目的各种配置选项。

在这篇文章中，我们将探讨bootstrap.yml文件中list的几种写法，了解每种写法的用途和优势。

首先，让我们回顾一下bootstrap.yml文件的一般结构。

bootstrap.yml 文件是一个文本文件，用于存储配置信息，它通常包含一系列的键值对（key-value pairs）。

键（key）是配置选项的名称，而值（value）则是对应的设置。

在bootstrap.yml文件中，list则是一种特殊类型的值，它可以容纳多个项（items）。

一种常见的bootstrap.yml文件的结构如下所示：key1: value1key2: value2key3:- item1- item2- item3在这个例子中，key1和key2是普通的键值对，而key3是一个list。

key3下的每个item都用短横线（-）开头，并独占一行。

这种写法使我们可以在一个配置选项中定义多个值，这些值通常用于设置一些选项的多个可选值。

对于一个配置选项，可以有不同的写法来表示一个list。

这取决于我们的具体需求和个人偏好。

第一种写法是使用短横线（-）和缩进来表示list的项，比如：key3:- item1- item2- item3在这种写法中，每个项都有自己的缩进，使得list更易于阅读和理解。

这种写法适合于list中的项较少，且希望每个项都保持清晰结构的情况。

第二种写法是使用短横线（-）和空格来表示list的项，比如：key3:- item1 - item2 - item3在这种写法中，每个项之间没有缩进，而是直接通过空格分隔。

这种写法适合于list中的项较多，或者项之间没有太多结构性的要求的情况。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

优秀的Bootstrap框架文件目录介绍
下面我们给大家下Bootstrap框架文件目录介绍
吧!bootstrap.css,bootstrap.min.css,bootstrap- responsive.css,bootstrap-responsive.min.css四个核心文件!所有的样式都封装在里边了!从名称可以看出Bootstrap.min.css和bootstrap-responsive.min.css都是源码的缩小版，项目正式上线的时候引用缩小版!
Bootstrap的强大之处，漂亮统一的外观样式，这个大家都能看到，另一个强大之处就在于一次编码能很好的兼容PC，平板，手机等多设备查看!
Bootstrap.css里边封装了布局、表格、表单、按纽等效果。

Bootstrap-responsive.css里边则预设了不同屏幕的分辨率，为适应多设备而准备的。

(慎用Bootstrap-responsive.css，因国内环境，当你对Bootstrap应用不熟悉的时候，不推荐使用!)
在使用中必须注意引用顺序，如下为正确引用方式：。