Bootstrap(1)

来源：互联网发布：支付宝端口申请编辑：程序博客网时间：2024/06/13 22:37

Bootstrap（页面排版，表单，表格，按钮，图片）

Bootstrap 是一个基于 HTML CSS JavaScript 的开源框架，用于快速构建基于 PC端和移动设备的响应式 web 页面

1、下载：

Bootstrap下载地址：http://v3.bootcss.com/

CDN（内容分发网络）：

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 上述3个meta标签必须放在最前面-->

   <!-- 新 Bootstrap 核心 CSS 文件 -->

<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

2、页面排版： 

1）Bootstrap 中默认的字体大小为 14px，（Native app字体默认为17px）行高为20px。<p>元素行高为10px，颜色为#333

2）标题：h1~h6（36px，30px，24px，18px，14px，12px）

3）h 标签下可以嵌套 < small > 标签，通常作为副标题使用。h1~h3下， small 元素的大小只占父元素的 65%（23.4px，19.5px，15.6px），h4~h6下占父元素的 75%（13.5px，10.5px，9px），small标签的颜色是浅灰色：#777，行高为1，粗度为400

4）内联文本元素：

添加标记：< mark >

删除文本：< del >

无用文本：< s >

插入文本：< ins >

强调文本：< small >,< strong>,< em>（标准字号，加粗70，斜体）

5）对齐：

<p class=’text-left’>我居左对齐</p>

<p class=’text-center’>我居中对齐</p>

<p class=’text-right’>我居右对齐</p>

<p class=’text-justify’>我两端对齐,但是我支持度不高</p>

<p class=’text-nowrap’>我不换行</p>

6）大小写：

<p class=’text-lowercase’>小写</p>

<p class=’text-uppercase’>大写</p>

<p class=’text-capitalize’>首字母大写</p>

7）地址文本：

//地址文本对原来的 css 样式做的复写，去掉了倾斜，设置了行高

<address></address>

8）引用文本：

//左边有一个5px的边框线条

<blockquote>看看我左边</blockquote>

<blockquote class=’blockquote-reverse’>又在右边了</blockquote>

<blockquote class=’pull-right’>同上</blockquote>

8）列表排版：

//默认样式 //移除默认样式 //设置成内联

<ul> <ul class=’list-unstyled’> <ul class=’list-inline’>

<li>测试</li> <li>测试</li> <li>测试</li>

<li>测试</li> <li>测试</li> <li>测试</li>

<li>测试</li> <li>测试</li> <li>测试</li>

</ul> </ul> </ul>

9）表格：

<table class=’table table-striped’> ----条纹状表格

<table class=’table table-bordered’>----带边框的表格

<table class=’table table-hover’>----鼠标悬停选中效果 

<tr class=’success’>----状态类 //单独设置每一行的背景样式

5种不同的样式：active 鼠标悬停在行或者单元格上

success 标识成功或积极的动作

info 标识普通的提示信息或动作

warning 标识警告或者需要用户注意

<tr class=’sr-only’>----隐藏某一行

<body class=’table-responsive’><table class=’table’>----响应式表格

//表格响应式,设置父元素,当父元素小于768px时表格出现边框

10）按钮：

-----常当做按钮使用的元素

//转化成普通按钮

<a href=’xxx’ class=’btn btn-default’>按钮</a>

<button class=’btn btn-default’>按钮</button>

<input type=’button’ class=’btn btn-default’ value=’btn1’>

注：①本来锚点<a>元素是用来链接其他页面或者连接当前页面的其他部分，如果是要跟按钮一样来触发某些功能必须设置属性：role = "button"

-----样式

<button class=’btn btn-default’>按钮</button>

常用样式:

btn-default 默认样式

btn-success 成功样式

btn-info 一般信息样式

btn-warning 警告样式

btn-danger 危险样式

btn-primary 首选项样式

btn-link 链接样式 

----尺寸大小

<button class=’btn btn-lg’>按钮</button>

常用尺寸:

btn-lg //大

不写 //中等

btn-sm //小

btn-xs //x小 

----块级按钮

btn-block//把按钮设置为块级元素

<button class=’btn btn-block’>按钮</button> 

-----激活状态

active// 样式是点击时的样式不是悬停时的

<button class=’btn active ’>按钮</button>

-----禁用状态

disabled//点击的时候不允许点的样式

<button class=’btn disabled’>按钮</button>

11）表单：

----表单元素的标签必须有method和action属性

<form method=”POST” action=”xxx.com”>

----表单里的每一个输入控件必须对应一个展示标签(说明标签),并且得给它设置for属性,想隐藏就加上属性class="hidden"

<label for=’userid’>请输入账号</label>

<input type=’text’id=’userid’name=’id’>

----基本样式

<form method=’post’ action=’xxx’>

<div class=’form-group’ style=’margin:0px 50px’>

//控件放在div里(form-group用作加行间距)

<label for=’email1’ class=’control-label’>邮箱</label>

//control-label自动为控件匹配屏幕,这个少了后面学得样式可能会没有效果

<input id=’email1’ type=’email’ class=’form-control’>

//form-control自动为控件匹配屏幕,这个少了后面学得样式可能会没有效果

</div>

<div class=’form-group’ style=’margin:0px 50px’>

<label for=’password1’>密码</label>

<input id=’password1’ type=’password’ class=’form-control’>

</div>

</form>

----内联

//让表单里面的控件左对齐浮动(横排),当屏幕小于768px时恢复独占样式(竖直)

<form class=’form-inline’>

----合组

//输入控件前后增加片段(前面例子的’邮箱’两个字,跟控件没有合并)

<form method=’post’ action=’xxx’ class="form-inline">

<label for='text1'>价格:</label>

<div class='input-group'>//合并组的盒子

<div class="input-group-addon">¥</div> //前合并

<input id='text1' type='text' class='form-control'> //控件

<div class="input-group-addon">.00</div> //后合并

</div>

</form>

-----单复选框

①默认(都在一行)

<div class='checkbox'>

<label for=’it1’> //不加label文本不能点

<input id="it1" type='checkbox' name='it'>前端

</label>

</div> 

②内联checkbox-inline

<div class='checkbox'>

<label for=’it1’ class=’’checkbox-inline’’> //在label上加

<input id="it1" type='checkbox' name='it'>前端

</label>

</div>

③禁用(不准点)disabled

<div class='checkbox disabled'> //这里加,文本不能点

<label for=’it1’>

<input id="it1" type='checkbox' name='it' disabled>前端

//这里加,框也不能点

</label>

</div> 

④单选框

把上面的'checkbox' 换成radio 就ok了

-----下拉列表

<select class=’form-control’>

<option>北京</option>

<option>成都</option>

<option>阆中</option>

</select>

-----校验状态（注意输入框的颜色变化）

<div class=’form-group has-error’> //错误状态

//如果想文字也出效果,就在label上也加class=’has-error’

状态:

has-error 错误状态

has-success 成功状态

has-warning 警告状态

-----尺寸

<input type=’password’ class=’form-control input-lg’> //大

<input type=’password’ class=’form-control’> //中

<input type=’password’ class=’form-control input-sm’> //小

  12）图片

----图片形状

<img src=’xxx’ alt=’这是个图片’ class=’img-rounded’> //圆角矩形

<img src=’xxx’ alt=’这是个图片’ class=’img-circle’> //圆(正方形圆,长方形椭圆)

<img src=’xxx’ alt=’这是个图片’ class=’img-thumbnail’> //边框,常用作缩略图

 ----响应式

<img src=’xxx’ alt=’这是个图片’ class=’img-responsive’>

//改变屏幕大小图片跟着变

<img src=’xxx’ alt=’这是个图片’ class=’img-circle  img-responsive’>

阅读全文

0 0