1. 简介:
  2.    bootstrap是最受欢迎的html,css和js框架,用于开发响应式布局,移动设备优先的web项目
  3.    bootstrap3在bootstrap2的基础之上,重写了框架,boostrap是移动设备优先的
  4. 参考bootstrap中文网站:
  5. http://v3.bootcss.com/getting-started/

  6. 第一个HelloWord:
  7.    bootstrap中文网中起步类别中下载使用于开发生产环境的bootstrap文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>Bootstrap Template</title>
    <%--引入css文件--%>
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <p>this is the first helloworld</p>

    <%--引入js文件--%>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

注意:

   引入文件参照官网上面的例子和要求

   主要可以分为三部分:

(
bootstrap.min.css/bootstrap.css   
jquery.min.js/jquery.js  
bootstrap.min.js/bootstrap.js
 )
一般呢,引入外部文件的顺序也是按照我上面的顺序进行引入的(jquery.js必须在bootstrap.js之前引入)

html5文档类型
 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置
 <!DOCTYPE html>
 <html lang="zh-CN">
 ...
 <html>



使用图标:


bootstrap框架学习(keep update)_响应式


bootstrap框架学习(keep update)_响应式_02


按钮:


bootstrap框架学习(keep update)_bootstrap_03





bootstrap框架学习(keep update)_文件_04


下拉菜单


bootstrap框架学习(keep update)_文件_05


bootstrap框架学习(keep update)_响应式_06


按钮组


bootstrap框架学习(keep update)_文件_07


bootstrap框架学习(keep update)_响应式_08


输入框组


bootstrap框架学习(keep update)_布局_09


bootstrap框架学习(keep update)_bootstrap_10


表单:


bootstrap框架学习(keep update)_框架_11


bootstrap框架学习(keep update)_框架_12




表单(行)


bootstrap框架学习(keep update)_响应式_13


bootstrap框架学习(keep update)_布局_14


表单(并列)


bootstrap框架学习(keep update)_bootstrap_15


bootstrap框架学习(keep update)_框架_16


input输入框校验属性:


bootstrap框架学习(keep update)_布局_17


bootstrap框架学习(keep update)_框架_18




input禁用和只读:


bootstrap框架学习(keep update)_框架_19


bootstrap框架学习(keep update)_bootstrap_20


单选多选(default)


bootstrap框架学习(keep update)_框架_21


bootstrap框架学习(keep update)_响应式_22


单选多选(行)


bootstrap框架学习(keep update)_布局_23


bootstrap框架学习(keep update)_框架_24


单选多选(无文本)


bootstrap框架学习(keep update)_布局_25


bootstrap框架学习(keep update)_响应式_26


下拉列表


bootstrap框架学习(keep update)_文件_27


bootstrap框架学习(keep update)_布局_28




bootstrap框架学习(keep update)_bootstrap_29


close按钮:


bootstrap框架学习(keep update)_文件_30


bootstrap框架学习(keep update)_bootstrap_31


图片显示效果:


bootstrap框架学习(keep update)_文件_32


bootstrap框架学习(keep update)_bootstrap_33


显示和隐藏:


bootstrap框架学习(keep update)_布局_34


bootstrap框架学习(keep update)_布局_35


居中:



bootstrap框架学习(keep update)_文件_36



bootstrap框架学习(keep update)_文件_37


导航:



bootstrap框架学习(keep update)_文件_38



bootstrap框架学习(keep update)_响应式_39


路径导航:



bootstrap框架学习(keep update)_响应式_40



bootstrap框架学习(keep update)_布局_41


徽章:


bootstrap框架学习(keep update)_响应式_42


bootstrap框架学习(keep update)_文件_43


可关闭warning:


bootstrap框架学习(keep update)_框架_44


bootstrap框架学习(keep update)_文件_45


进度条:


bootstrap框架学习(keep update)_响应式_46


bootstrap框架学习(keep update)_布局_47


bootstrap总结(特点):



bootstrap框架学习(keep update)_bootstrap_48



bootstrap框架学习(keep update)_bootstrap_49


自我总结:


①:主要依靠class="内定的类别 样式" role="内定类别"等来控制界面样式/布局问题


②:12栏栅格系统来布局界面


③:界面的自适应以及响应式布局