您的位置：首页 > Web前端 > BootStrap

Bootstrap(1)__Bootstrap基础<页面排版,图片,按钮,表格,表单>

2017-08-11 14:21 761 查看

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

CDN:

页面排版

1.Bootstrap中默认的字体大小为14px,(Nativeapp字体默认为17)行高为20px,<p>元素为1/2行高(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下:small元素只占父元素的75%(13.5px,10.5px,9px),small标签的颜色是浅灰色:#777,行高为1,粗度为400.

4.内联文本元素

添加标记:<mark>//<p>听众朋友大家好,这里是<mark>中央人民广播电视台</mark></p>

删除文本:<del>//<del>我都卖完了你才来</del>

无用文本:<s>//<s>我跟删除长一样但是我真无用</s>

插入文本:<ins>//<ins>我是个插入文本</ins>

强调文本:<small>,<strong>,<em>

//<small>我是标准字号的85%</small>

//<strong>我是加粗的:700</strong>

//<em>我用的很多,因为我是歪的</em>

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>

<strong>华清远见教育集团</strong>

<p>电话:<small>(0817)888-8888</small><p>

</address>

8.引用文本

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

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

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

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

9.列表排版

//默认样式

<ul>

<li>测试</li>

<li>测试</li>

<li>测试</li>

</ul>

//移除默认样式

<ul class=’list-unstyled’>

<li>测试</li>

<li>测试</li>

<li>测试</li>

</ul>

//设置成内联

<ul class=’list-inline’>

<li>测试</li>

<li>测试</li>

<li>测试</li>

</ul>

表格

----基本样式

----条纹状表格

----带边框的表格

----鼠标悬停选中效果

----状态类

//单独设置每一行的背景样式

<tr class=”success”>   绿

<tr class=”info”>   蓝

<tr class=”warning”>   红

5种不同的样式:

active 鼠标悬停在行或者单元格上

success 标识成功或积极的动作

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

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

----隐藏某一行

<tr class=’sr-only’>

----响应式表格

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

<body
class=’table-responsive’><tableclass=’table’>....

按钮

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

//转化成普通按钮

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

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

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

//注:

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

②尽量使用<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>

表单

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

<formmethod=”POST” action=”xxx.com”>
----表单里的每一个输入控件必须对应一个展示标签(说明标签),并且得给它设置for属性,想隐藏就加上属性class="hidden"
<labelfor=’userid’>请输入账号</label>
<inputtype=’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:0px50px’>

<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'>//控件

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

</div>

</form>

-----单复选框

①默认(都在一行)

<div class='checkbox'>

<labelfor=’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了

-----下拉列表

-----校验状态

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

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

状态:

has-error 错误状态

has-success 成功状态

has-warning 警告状态

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

<div id="div1"class="form-group">

<label for="pp1">xxx</label>

<input id="email" type="email"class="form-control">

</div>

</form>

<script>

var email=document.querySelector("#email")

email.onchange=function(){

var val=email.value

if(val==1){

         console.log(val)

         document.querySelector("#div1").className+='has-success'//加类注意空格

         }



}

</script>

-----尺寸

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

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

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

图片

----图片形状

<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’>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 响应式 web 开源框架 bootstrap html

相关文章推荐

新的分享

章节导航