BootStrap框架学习

1、BootStrap是一套现成的css样式集合

中文文档：www.bootcss.com

响应式布局：pc端，手机端都可适配

特点：集成了html,css,javascript工具集，12列格网，基于jquery，

下载：http://v3.bootcss.com/getting-started下载后复制dist/css中bootstrap.min.css到项目css中

dist/js中bootstrap.min.js到项目的js中

复制代码

<link href="{% static 'blog/bootstrap.min.css' %}" rel="stylesheet" />

下载jquery.js :http://jquery.com

2、布局容器：

固定宽度，两边留白，响应式布局:根据分辨率调整布局

</div>

完整宽度，无留白，和上面的固定宽度冲突，只能用一种

</div>

3、栅格网格系统

页面分为12列，用到css

容器container，数据行row，xs(超小屏），sm(小屏) ,md(中屏)，lg（大屏）

row必须包含在container中，为其赋予合适的对齐方式和内距。

row中可以添加column，列数之和不能超过平分的总列数如12，超12会换下一行

具体内容应放在column中

</div>

列偏移：在列元素上添加类名col-md-offset-*,*为偏移宽度

<div class="col-md-1 col-md-offset-8">偏移整体推</div>

列排序：左右浮动，往前pull，往后push,有冲突就覆盖

列嵌套：列与列之间还可以再嵌套，例：先分6+6，每6还可再分12

</div>

</div>

4、常用样式

标题h1~h6可做类名,可有副标题

<h1>标题1small>副标题</small></h1>

段落

<p class="lead">bootStrap会改进段落</p>

<small>小号字</small> <b><strong>加粗 <i><em>斜体

5、提示与强调颜色

class= text-muted text-danger text-success text-info text-warning text-primary提供样式颜色

6、对齐

class= text-right text-center text-left text-justify(两端对齐)

7、列表

<ul>

</ul>

<ol>

</ol>

自定义列表：去格式类:list-unstyled 水平类：list-inline

</dl>

8、代码

<code>

code style<br>

单行代码只能用br分行

</code>

按键:<kbd>a</kbd>

<pre>

多行代码，原本格式若显示html符号需要显式符号 <h2< <h2>

<ol>多行代码滚动条样式</ol>

</pre>

9、表格

类：table基础表格 table-striped斑马线表格 table-bordered边框表格

table-hover鼠标悬停高亮表格 table-condensed紧凑表格

<th>javase</th>

</tr>

<td>oracle</td>

</tr>

</table>

10、表单

表单：文本输入框、下拉选择框、单选按钮、复选按钮、文本域、按钮

原始：

</select><br>

<input type="checkbox" name="sex" />男方形复选

<input type="checkbox" name="sex" />女

<input type="radio" name="sex" />武装直升机圆形单选

BootStrap:

加上form-control类多选加上 multiple="multiple" 控件大小input-lg input-sm

</div>

<div class="row"> 垂直复选

</div>

</div>

<div class="row"> 水平复选

<input type="checkbox" name="hobby />唱歌

</label>

<input type="checkbox" name="hobby />跳舞

</label>

</div>

单选类 radio

11、按钮

基础：<button class="btn">按钮</button>

附加样式：btn-danger btn-primary btn-info btn-success btn-default btn-warning btn-link

多标签支持：<a href="..." class="btn">a标签</a>

<div class="btn">div标签</div>

改变大小：btn-lg btn-sm btn-xs

按钮禁用：

disable禁用： <button class="btn btn-info" diabled="disabled">按钮</button>

disable样式禁用，实际可用

12、表单布局

创建表单：

父<form>元素添加role="form"
标签和控件放在一个带有class.form-group的<div>中
向所有文本元素<input> <textarea> <select>添加class="form-control"

水平表单：

html 复制代码

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="输入邮箱" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="邮箱" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="输入密码" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="密码" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

13、缩略图

图标bootstrap <span class="搜bootstrap图标 " >

面板：

</div>

内容

</div>

加上

</div>

BootStrap菜鸟教程

14、插件菜单导航

nav nav-tabs标签导航 nav-pills胶囊导航 pagination分页导航 pager分页导航

...

</ul>

15、下拉菜单

依赖<script src="jquery-3.4.1.js></script>

类名dropdown包裹下拉框

下拉菜单<span class="caret"></span> 箭头图标

</ul>

</div>

16、模态框

用插件