11.13随笔

一:前端框架（bootstrap）

（1）：快速的开发

（2）：响应式布局

（3）：html5+css3写成的

（4）：页面搭建比较好看

二:下载安装（bootstrap） 3.0版本地址:https://v3.bootcss.com/getting-started/

（1）：安装bootstrap

（2）：引入bootstrap2个css文件
<link href="css/bootstrap.css" rel="stylesheet"/>
<link href="css/bootstrap.min.css" rel="stylesheet"/>

(3)bootstrap如下：

bootstrap 文本

（h1-h6/.h1-.h6） class="h1-h6" 任何一个标签都拥有

<small>字体变小</small>

<mark>标记</mark>

<del>删除标记</del>

<ins>下划线</ins>

<u> 下划线 </u>

段落对齐方式：
.text-left
.text-center
.text-right

.text-lowercase 大写内容转换为小写
.text-uppercase 小写的内容转换为大写
.text-capitalize 所有内容首字母变为大写

列表：
ul：去除小黑点
.list-unstyled
内联列表
.list-inline:放入一排
<ul class="list-inline">
<li><a href="#">首页</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">招聘</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">练习</a></li>
</ul>

bootstrap中的排版-表格 table
.table-bordered 带边框表格
.table-striped 条纹状表格
.table-hover 悬停变色
.table-condensed 紧凑风格

颜色：
.danger 红色
.waring 警告
.info 蓝色
.success 标志成功
.active 鼠标悬停在行或者单元格上面

bootstrap中的排版-表单 form

h5属性：

placeholder="这是一个输入框"
.form-control :控制表单 (是所有form表单里面的属性都拥有这个.form-control属性)
.form-group :组件
.form-inline :把所有的表单控件放到水平排列 .has-success:改变整个组的状态同时使用
.input-lg;使输入框变大(默认的属性)
.input-sm:使输入框变小
.sr-only:使提示信息消失
.control-label :改变边框的颜色 (默认的属性)
.has-success : 改变整个组的状态
<from class="form-inline">
<div class="form-group has-success">
<label for="" calss="sr-only">这是一个输入框:</label> 提示标签
<label for="" calss="has-success">这是一个输入框:</label> 提示标签
<input class="form-control input-lg"> .form-control
</div>

bootstrap 按钮(属性)

.btn 按钮class属性
按钮的风格：
1： .btn-primary :我是原始按钮深蓝
2: .btn-info :我是info按钮   浅蓝
3: .btn-success:我是成功按钮   绿
4: .btn-danger:我是危险按钮红
5: .btn-warning:我是警告按钮   黄
6: .btn-inverse:我是翻转按钮白
7: .btn-link:我是link按钮带a带下划线的按钮
8: .btn btn-info btn-block :我是link按钮 .btn-block:全屏全屏按钮
9: <a href=”” class=”btn btn-danger”>我是a标签按钮</a>

.btn-lg变大 .btn-sm变小 .active 悬浮 .btn-block全屏

bootstrap 图片(属性)

1： .img-responsive 响应式图片
2： .img-rounded 圆角
3: .img-circle 圆形图片
4: .img-thumbnail 缩略图

在meta标签里面加入（响应式布局）写在meta标签里面头部位置
<meta name="viewport" content="width=device-width, initial-scale=1">

bootstrap 网格布局(栅格布局)

//盒子布局

//网格布局

.container :容器（居中）
col-xs- <=768px 超小屏幕的手机
col-sm- >=768 小平板
col-md- 中等屏幕 >=992px
col-lg- >1200屏幕


<!-- <div class="container"> container:居中

.hidden-xs 在小屏幕下隐藏掉
.visible-xs 当尺寸缩小到手机屏幕时候显示
.clearfix:清除浮动
.alert-info :强调
.col-md-offset-6:向右边偏移
.col-md-push-8:向右走 push:推
.col-md-pull-4:拉向左移动 pull：拉

<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<h1>阿斯蒂芬</h1>
<p>嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</p>
<div class="row">
<div class="col-md-4 -col-md-offset-5 -col-md-push-5">
<h1>阿斯蒂芬</h1>
<p>嘻嘻嘻嘻哈哈嘻嘻嘻嘻嘻嘻</p>
</div>

<div class="col-md-4">
<h1>阿斯蒂芬</h1>
<p>嘻嘻嘻嘻哈哈嘻嘻嘻嘻嘻嘻嘻嘻</p>
</div>

</div>

</div>
<div class="col-md-8 col-sm-8 col-xs-8">
<h1>阿斯蒂芬</h1>
<p>sdfgdsf</p>
<div class="row">
<div class="col-md-4 -col-md-push-4 col-md-pull-8">
<h1>阿斯蒂芬</h1>
<p>嘻嘻嘻嘻哈哈嘻嘻嘻嘻嘻嘻嘻嘻</p>
</div>

<div class="col-md-4">
<h1>阿斯蒂芬</h1>
<p>嘻嘻哈哈嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</p>
</div>
</div>
</div>
</div>
</div>

bootstrap 按钮菜单 btn

//组件（js）
导入bootstrap核心js文件
导入jquery包(要10.0以上的版本)
1：.btn-group ：组
.dropdown-toggle:下拉效果
2: .btn btn-default dropdown-toggle
3: data-toggle="dropdown" //js组件使用
4: <span class="caret"></span> .caret：s三角形
5: .dropdown-menu :下拉按钮
<ul class="dropdown-menu">

bootstrap 胶囊型（导航） nav

设置的状态不一样，选中的状态不同
1: .nav nav-pills 选中蓝
2: .active :选中转态激活的
3： .disabled:不能选禁用的
4: .nav nav-tabs 选中类似长城

二级导航
<ul class="nav nav-pills">
<li><a href="#">首页</a></li>
<li><a href="#">详情页</a></li>
<li><a href="#">咨询页</a></li>
<li><a href="#">联系我们</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#">php</a>
</li>
<li>
<a href="#">java</a>
</li>
<li>
<a href="#">js</a>
</li>
</ul>
</li>
<li></li>
</ul>

面包屑导航 : .breadcrumb 导航列表间价格竖杠

基础导航:

.navbar 基础导航
.navbar-default 默认导航样式灰
.navbar-inverse 导航黑色
组合使用：
.navbar navbar-default navbar-inverse

加入导航的标题
.navbar-header
.navbar-brand
.navbar-inverse 翻转(黑色)

组合表单使用

.navbar-fixed-bottom 底部
.navbar-form navbar-right :form 表单居右
.form-group：组
.form-control :文本内容
placeholder="请输入“

</div>

boostrap 分页：
.pagination
.active:选中
.disabled：禁用
&laquo <<
&raquo >>
<ul class="pagination">
<li><a href="">«</a></li>
<li class="active"><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li class="disabled"><a href="">7</a></li>
<li><a href="">»</a></li>
</ul>

bootstrap 缩略图

.thumbnail 给a标签一些样式 加个蓝框
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="./images/11.jpg" alt="" style="height:180px;width:100%;display:block;"/>
</a>
</div>

bootstrap 警告框

.alert :警告框
.alert alert-success :恭喜您操作成功
.alert alert-info :请确认密码
.alert alert-warning :您还有一次机会输入密码
.alert alert-danger :您的密码输入有误
带关闭按钮的alert
class="close" data-dismiss="alert"
× 按钮
.alert-dismissable : 带关闭按钮的alert
<div class="alert alert-danger alert-dismissable ">
<button type="button" class="close" data-dismiss="alert">×</button>
</div>

列表项:
.list-group 列表组
.list-group-item 列表项
<div class="list-group">
<a class="list-group-item" href="">1</a>
<a class="list-group-item" href="">1</a>
<a class="list-group-item" href="">1</a>
<a class="list-group-item" href="">1</a>
<a class="list-group-item" href="">1</a>
<a class="list-group-item" href="">1</a>
<a class="list-group-item" href="">1</a>

</div>

bootstrap panel 面板

.panel-body 设置中部的样式
.panel-heading 设置头部的样式
.panel-footer 设置尾部的样式
.panel-default 默认的样式灰
.panel-primary 原始的样式蓝
.panel-success 成功的
.panel-danger 危险的

bootstrap 巨幕
.jumbotron :巨幕
<div class="jumbotron">
<div class="container">
<h1>web基础阶段告一段落！</h1>
<h1>这段时间认识大家很高兴</h1>
<p>但是，下一阶段还是我</p>
<p>
<a href="" class="btn btn-success btn-lg">更多</a>
</p>
</div>
</div>

猜你喜欢