前言
- html从入门到精通（全）
- css属性从入门到精通（全）
- JavaScript从入门到精通（全）
通过我的这篇文章可以基本了解Bootstrap的简单使用以及如何套用更加精通
关于Bootstrap的主要作用
- 是⼀套现成的 CSS 样式集合
- ⽤于开发响应式布局、移动设备优先的 WEB 项⽬
特点：
- html、css、javascript ⼯具集
- ⾃定义 JQuery 插件，完整的类库。丰富的组件
- 响应式布局设计,让⼀个⽹站可以兼容不同分辨率的设备
1. 下载安装
具体下载通过官网进行下载
之后对应什么格式引用什么文件
- 拷⻉ dist/css 中的 bootstrap.min.css 到项⽬ css 中
- 拷⻉ dist/js 中的 bootstrap.min.js 到项⽬的 js 中
html模板如下
DOCTYPE html> <html> <head> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bootstrap 模板
title> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
head> <body> <h1>Hello, world!
h1>
<script src="https://code.jquery.com/jquery.js">
script>
<script src="js/bootstrap.min.js">
script>
body>
html> 也可以通过官网的cdn进行在线引入，但是前提每次都要联网
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">
script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">
script> - viewport 标记⽤于指定⽤户是否可以缩放Web⻚⾯
- width 和 height 指令分别指定视区的逻辑宽度和⾼度。他们的值要么是以像素为单位的数字，要么是⼀个特殊的标记符号。
- width 指令使⽤ device-width 标记可以指示视区宽度应为设备的屏幕宽度。
- height 指令使⽤ device-height 标记指示视区⾼度为设备的屏幕⾼度。
- initial-scale 指令⽤于设置Web⻚⾯的初始缩放⽐例。默认的初始缩放⽐例值因智能⼿机浏览器的不同⽽有所差异。通常情况下设备会在浏览器中呈现出整个Web⻚⾯，设为1.0则将显示未经缩放的Web⽂档
2. 布局容器和栅格网格系统
2.1 布局容器
- container 类⽤于固定宽度并⽀持响应式布局的容器
<div class="container"> ...
div> - container-fluid类⽤于100% 宽度，占据全部视⼝（viewport）的容器
<div class="container-fluid"> ...
div> 2.2 栅格网格系统
随着屏幕或视⼝（viewport）尺⼨的增加，系统会⾃动分为最多12列。栅格系统⽤于通过⼀系列的⾏（row）与列（column）的组合来创建⻚⾯布局，你的内容就可以放⼊这些创建好的布局中
具体设备根据如下配置
| 功能 | 超小设备手机（<768px） | 小型设备平板电脑（≥768px） | 中型设备台式电脑（≥992px） | 大型设备台式电脑（≥1200px） |
|---|---|---|---|---|
| 网格行为 | 一直是水平的 | 以折叠开始，断点以上是水平的 | 以折叠开始，断点以上是水平的 | 以折叠开始，断点以上是水平的 |
| 最大容器宽度 | None (auto) | 750px | 970px | 1170px |
| Class 前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列数量和 | 12 | 12 | 12 | 12 |
| 最大列宽 | Auto | 60px | 78px | 95px |
| 间隙宽度 | 30px（一个列的每边分别 15px） | 30px（一个列的每边分别 15px） | 30px（一个列的每边分别 15px） | 30px（一个列的每边分别 15px） |
| 可嵌套 | Yes | Yes | Yes | Yes |
| 偏移量 | Yes | Yes | Yes | Yes |
| 列排序 | Yes | Yes | Yes | Yes |
- 数据⾏(.row)必须包含在容器（.container）中，以便为其赋予合适的对⻬⽅式和内距(padding)。
- 在⾏(.row)中可以添加列(.column), 只有列（column）才可以作为⾏容器(.row)的直接⼦元素，但列数之和不能超过平分的总列数，⽐如12。如果⼤于12,则⾃动换到下⼀⾏
列组合
<div class="container"> <div class="row"> <div class="col-md-4">4列
div> <div class="col-md-8">8列
div>
div>
div> 列偏移
<div class="container"> <div class="row"> <div class="col-md-1">1列
div> <div class="col-md-1">2列
div> <div class="col-md-1 col-md-offset-8">11列
div> <div class="col-md-1">12列
div>
div>
div> 列排序
<div class="container"> <div class="row"> <div class="col-md-1 col-md-push-10">1列
div> <div class="col-md-1 col-md-pull-1">1列
div>
div>
div> 3. 常用样式
标题
- 提供 .h1~.h6的样式名，标签设置对应的样式名则会有对应的标题效果
- 提供 .small的样式名，有副标题的效果。
<h1>h1. Bootstrap heading<small>副标题
small>
h1> <div class="h1">Bootstrap标题1<span class="small" >副标题
span>
div> 段落
- 通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。
<small>:小号字 <b><strong>:加粗 <i><em>:斜体 <p>以后的你会感谢现在努力的你
p> <p class="lead">以后的你会感谢现在努力的你
p> <p class="lead"><small>以后的
small><b>你
b>会<i>感谢
i>现在<em>努力
em>的<strong>你
strong>
p> 强调
对齐
关于列表
列表
- 去点列表
class=“list-unstyled” - 内联列表
class=“list-inline” - 定义列表
使用样式 class=“dl-horizontal” 制作水平定义列表 : 当标题宽度超过160px时，将会显示三个省略号
关于表格
基础样式
1）.table：基础表格
附加样式
- .table-striped：斑马线表格
- .table-bordered：带边框的表格
- .table-hover：鼠标悬停高亮的表格
- table-condensed：紧凑型表格，单元格没内距或者内距较其他表格的内距小
还有一些警告的颜色信息
<table class="table table-bordered table-striped table-hover table-condensed"> <tr class="info"> <th>JavaSE
th> <th>数据库
th> <th>JavaScript
th>
tr> <tr class="active"> <td>面向对象
td> <td>oracle
td> <td>json
td>
tr> <tr class="danger" > <td>数组
td> <td>mysql
td> <td>ajax
td>
tr> <tr class="warning"> <td>面向对象
td> <td>oracle
td> <td>json
td>
tr> <tr class="success"> <td>数组
td> <td>mysql
td> <td>ajax
td>
tr>
table> 4. 表单
4.1 控件
表单控件
- .form-control(适中)
- .input-lg（较大）
- .input-sm（较小）
- 输入框 text
演示代码如下
<div class="container">
<div class="row"> <div class="col-sm-3"> <input type="text" name="" id="" /> <input type="text" name="" id="" class="form-control" /> <input type="text" name="" id="" class="form-control input-lg" /> <input type="text" name="" id="" class="form-control input-sm" />
div>
div>
div> 关于复选框 checkbox
- 垂直显示：
.checkbox - 水平显示：
.checkbox-inline
代码显示
<div class="row"> <input type="checkbox" >游戏 <input type="checkbox" >学习 <br>
<div> <div class="checkbox"> <label><input type="checkbox" >游戏
label>
div> <div class="checkbox"> <label><input type="checkbox" >学习
label>
div>
div>
<div> <label class="checkbox-inline"> <input type="checkbox" >游戏
label> <label class="checkbox-inline"> <input type="checkbox" >学习
label>
div>
div> 代码如同，就不给出演示了
单选框 radio
- 垂直显示：
.radio - 水平显示：
.radio-inline
示意代码如下
<div class="row"> <button>按钮
button> <hr> <button class="btn">按钮
button> <button class="btn btn-primary">按钮
button> <button class="btn btn-info">按钮
button> <button class="btn btn-danger">按钮
button> <button class="btn btn-warning">按钮
button> <button class="btn btn-success">按钮
button> <button class="btn btn-link">按钮
button> <hr> <button class="btn btn-primary btn-xs">按钮
button> <button class="btn btn-info btn-sm">按钮
button> <button class="btn btn-danger btn-lg">按钮
button> <hr> <a href="" class="btn btn-info">a标签按钮
a> <span class="btn btn-success">span标签按钮
span> <div class="btn btn-warning">div标签按钮
div> <br>
<button class="btn btn-warning disabled" onclick="alert(1)">按钮
button>
<button class="btn btn-success" disabled="disabled" onclick="alert(1)">按钮
button>
div> - 文本域
textarea
4.2 布局
水平表单
- 向⽗元素添加 role=“form”
- 把标签和控件放在⼀个带有 class .form-group 的中。这是获取最佳间距所必需的
具体role的作用是
内联表单
- 将表单的控件都在⼀⾏内显示form-inline
- 注意label不会显示，存在的意义：如果没有为输⼊控件设置label标签，屏幕阅读器将⽆法正确识别。
5. 插件
5.1 导航框
class 为
nav nav-tabs标签式的导航菜单nav nav-pills基本的胶囊式导航菜单pagination分页导航pager翻页导航breadcrumb面包屑导航
导航中如果有默认选中的多一个这个属性class="active"
示意代码
<ul class="nav nav-tabs"> <li> <a href="#">Home
a>
li> <li><a href="#">SVN
a>
li> <li><a href="#">iOS
a>
li> <li><a href="#">VB.Net
a>
li> <li class="active"><a href="#">Java
a>
li> <li><a href="#">PHP
a>
li>
ul> 5.2 下拉菜单
1、使用一个类名为dropdown 或btn-group的div 包裹整个下拉框:
<div class="dropdown">
div> 2、默认向下dropdown，向上弹起加入 . dropup 即可
3、使用button作为父菜单，使用类名: dropdown-toggle 和自定义data-toggle属性
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
button> 4、在button中 使用font 制作下拉箭头
5、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu
6、分组分割线:
添加类名“divider”来实现添加下拉分隔线的功能
7、分组标题: li 添加类名 “dropdown-header” 来实现分组的功能
8、对齐方式:
1)、 dropdown-menu-left 左对齐 默认样式
2)、 dropdown-menu-right 右对齐
9、激活状态（.active）和禁用状态（.disabled）
具体测试代码如下
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 喜欢的频道
<span class="caret">
span>
button>
<ul class="dropdown-menu"> <li class="dropdown-header">——综艺——
li> <li><a href="#">乘风破浪的姐姐们
a>
li> <li><a href="#">奇葩说
a>
li> <li><a href="#">中国有嘻哈
a>
li> <li class="divider">
li> <li class="dropdown-header">——电影——
li> <li><a href="#">姜子牙
a>
li> <li><a href="#">肖生克的救赎
a>
li> <li><a href="#">杀手不太冷
a>
li>
ul>
div> 
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/227684.html原文链接：https://javaforall.net
