『黑马程序员济南』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）。
| 
收藏
淘帖
踩
