黑马程序员技术交流社区
标题: 『黑马程序员济南』JavaEE就业笔记串讲--BootStrap [打印本页]
作者: 小鲁哥哥 时间: 2017-8-16 15:54
标题: 『黑马程序员济南』JavaEE就业笔记串讲--BootStrap
『黑马程序员济南』JavaEE就业笔记串讲--BootStrap
BootStrap的概述
Ø 什么是BootStrap
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师MarkOtto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
Ø BootStrap可以在那些地方使用:
BootStrap设计出响应式页面,由它设计页面可以在手机,PAD,PC都可以直接访问.
Ø BootStrap的使用:
下载BootStrap:
引入的文件
[HTML] 纯文本查看 复制代码
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
BootStrap的全局CSS
BootStrap的框架提供了一系列的CSS的样式.这些样式可以直接使用.
Ø 布局容器：
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。
[HTML] 纯文本查看 复制代码
<div class="container">
...
</div>
Ø 栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。 使用.row样式定义栅格的行.
定义列：.col-lg-n.col-md-n .col-sm-n .col-xs-n
Ø 排版：
HTML 中的所有标题标签，<h1> 到<h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。
对齐
通过文本对齐类，可以简单方便的将文字重新对齐。
[HTML] 纯文本查看 复制代码
<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>
Ø 改变大小：
[HTML] 纯文本查看 复制代码
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
Ø 表单：
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的<input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
BootStrap的组件
无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
BootStrap的JS的插件
jQuery 插件为 Bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件，或者逐个引入到你的页面中
avaScript 插件可以单个引入（使用 Bootstrap 提供的单个 *.js 文件），或者一次性全部引入（使用bootstrap.js 或压缩版的bootstrap.min.js）。
作者: jingxian90 时间: 2017-9-12 14:52
BootStrap项目中确实用的不少，挺好的
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |