BootStrap:css前端框架

一.what 前端CSS框架,另一个前端框架Foundation 前端框架:使用HTML、CSS、JavaScript编写的组件工具集,拿来可以直接用,不用从造轮子. 二.why 最流行的前端框架、用的多 Twitter公司于2011年8月开源的整体式前端框架,由Twitter的设计师Mark Otto和Jacob Thornton合作开发,短短几个月时间红遍全球,大量的Bootstrap风格的网站出现在互联网的浪潮中,而应用更为广泛的是它的后台管理页面.近两年的所有互联网项目的后台均采用了Bootstrap进行构建. 为什么如此流行 1.功能强大和样式美观 2.简单易用、文档丰富 3.高度可定制性 4.丰富的生态圈 5.布局兼容性好 三.how(第一个程序) 1.下载Bootstrap http://getbootstrap.com 最新版本bootstrap-3.3.7 不同版本的区别: 最新版本已经发展到Bootstrap 3 但是不意味着 Bootstrap2已经淘汰了,Bootstrap3采用了扁平化的风格,Bootstrap2在按钮、工具栏等位置更多采用了立体的效果,它们之间没有谁好谁坏的区别,只是设计风格的不同. 应该根据自己项目的实际需求来决定使用哪一个版本 扁平化概念的核心意义是:去除冗余、厚重和繁杂的装饰效果。而具体表现在去掉了多余的透视、纹理、渐变以及能做出3D效果的元素,这样可以让“信息”本身重新作为核心被凸显出来。同时在设计元素上,则强调了抽象、极简和符号化。 关于扁平化可以参考 http://baike.baidu.com/link?url=8RakX7FRvO0H7FbVWc2mBOMcSpy-humjYXGQEYZTjrbPfcCM1JNZCPjk0Hf60TlY6ma0FYvn5a992RPpfpJVA_ 2.在项目中引入Bootstrap 引入3个文件 bootstrap.css jquery.js Bootstrap.js Bootstrap要求的jquery在1.9.1版本或以上,jQuery3以下 演示代码如下: 第一个Bootstrap程序

Hello,Bootstrap!

需要注意的是因为bootstrap框架依赖于jquery,所以要先导入jquery.js再导入bootstrap.js .另外以前我们导入 js都是在head中导入,现在为什么要把它放到body中导入呢? 因为如果放到head中导入,服务器给客户端浏览器传输该页面的时候从上到下传输,这样会先传输js文件,如果用户的网速比较慢,这样在传输js文件的过程中,body中的内容还没有传输过来,这样用户看到的是一片白,影响用户的体验,所以我们通常把js文件放到后面加载,这样用户可以先看到body中的内容,再下载js来改变页面的行为,提高用户了用户的体验.(否则用户看见一片白直接关闭网页了) 普通纯HTML效果如下 比较全的第一个程序 Bootstrap 101 Template

Hello, world!!!

代码解释1: 页面宽度为设备宽度,初始缩放比例为1.0,调整比例对桌面浏览器并不起作用,只对移动端浏览器生效,比例值越大字越大 该语句是为了解决移动端浏览器显示问题 不加上面这句话,在web端访问没问题,在移动端浏览器中显示效果如下 加上这句话以后效果如下 具体详见: http://davidbcalhoun.com/2010/viewport-metatag/ 代码解释2: 条件注释 IE9以下 引入这两个文件,IE9以上(包括IE9)把它当做注释内容,不引入. 引入这两个文件为了让IE8支持HTML5元素和媒体查询. 四.基本样式 1.普通按钮 (1)按钮基本样式 演示代码: 默认 主要 成功 信息 警告 危险 危险 (2)调节按钮的大小

主要 默认

主要 默认


主要 默认

主要 默认

(3)块级按钮 和 默认都是行内元素(内联元素),而对于移动端来说一个占据一行的大按钮再正常不过了 演示代码: 主要 默认 (4)不可点击的按钮 讲按钮的背景色做50%的褪色处理以呈现出无法点击的效果 主要 默认 2.关闭按钮 对按钮元素应用.close类就可以显示一个关闭按钮,如图所示 × aria-hidden=”true” 对屏幕阅读器来说这个按钮时隐藏的 屏幕阅读器,便于残障人士更方便阅读网页内容的工具 关于屏幕阅读器,可参见 http://www.zhangxinxu.com/wordpress/2012/03/wai-aria-%E6%97%A0%E9%9A%9C%E7%A2%8D%E9%98%85%E8%AF%BB/ 3.下拉按钮 对span元素应用caret类就可以显示一个下拉符号 下拉菜单 4.图片 5.表格 演示代码如下: bootstrap表格 tr.tableHead { background-color:#000000; color:#ffffff; } tr.tableHead>th { text-align: center; }

商品信息

商品编号 商品名称 商品描述 商品种类 操作 操作
1 macbook air 苹果最新超薄笔记本 笔记本 修改 删除
2 ipad pro 苹果最新平板电脑 平板电脑 修改 删除
3 iphone6s plus 苹果最新大屏手机 手机 修改 删除
6.工具类 (1)浮动工具 左浮动、右浮动: 为元素添加.pull-left、.pull-right类就可以设置左浮动和有浮动 演示代码如下:
111
222
内部的源代码如下: .pull-right { float: right !important; } .pull-left { float: left !important; } !important; 设置该属性为最高优先级,即相当于把该属性定义在css文件最下面. (2)显示/隐藏工具 使用.show类显示, .hidden类隐藏,这种隐藏是不占位的,相当于设置了display:none
333
(3)居中 使用.center-block 类将元素设为块级元素并居中
555
注意必须设置元素的宽度居中才有效 5.对除了屏幕阅读器的设备隐藏 使用.sr-only类 Skip to main content 五.组件集 1.导航条 Bootstrap的导航主要分为胶囊式导航、面包屑导航、头部导航3类,可以满足大多数的开发需求. 胶囊式导航 水平胶囊导航 胶囊导航实质是一个无序列表,只需要给ul元素添加.nav和.nav-pills类即可 垂直胶囊导航 如果需要纵向的胶囊导航, 只需要在水平胶囊导航的基础上加一个.nav-stacked 类即可

面包屑导航
面包屑导航一般用于有层次关系的选项,如果想实现面包屑导航,需要给ul加一个.breadcrumb类即可.

头部导航

<nav class="navbar navbar-default">



<!—这里设置网站的链接 -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">链接<span class="sr-only">(current)</span></a></li>
    <li><a href="#">链接</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉菜单<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
  <form class="navbar-form navbar-left" role="search">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">搜索</button>
  </form>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">链接</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉菜单<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </li>
  </ul>
</div><!-- /.navbar-collapse -->


具体分析头部导航主要分为两层结构,第一层是最外面的

,这一层用于设置导航的基本样式

将.navbar-default类替换为 .navbar-inverse类,则显示为反色的导航(黑底白字)

第二层有两个并列的元素:

内部用于设置标题内容.

内部则用于编写具体的导航链接、搜索表单、下拉菜单等具体的导航内容。 Bootstrap提供了在小窗口下导航 收起/展开的功能 同学们可以把上面的窗口拖小的试一下 添加.navbar-fixed-top可以让导航条固定在顶部,不会随页面滚动而消失。为了防止固定在顶部后遮挡正常内容,需要设置:body{padding-top:50px;} 其中具体的值取决于导航条的高度 加了body的补白不会遮挡正常内容,不加会遮挡 2.下拉菜单 演示代码:

按钮和下拉选择都要包裹在


按钮必须添加 data-toggle=”dropdown” 触发器
放置下拉选项的无须列表需要添加 .dropdown-menu 类
添加一个空的
  • 来分割列表项

    3.按钮组

    上面一组是放到按钮组中的效果,下面一组是没有放到按钮组的效果

    按钮组用于把一组按钮放在同一行里,按钮之间没有间隙.用法很简单,只需要将一组按钮
    放在

    ..
    中即可.

    演示代码:

    Left Middle Right

    (1)垂直排列

    (2)两端对齐(按钮组拉伸到100%宽度)

    演示代码:

    注意:两端对齐的用法只适用于元素,因为按钮元素不能应用这些样式并将其所包含的内容两端对齐.

    (3)嵌套,可以在 按钮组 内继续 嵌套 按钮组

    演示代码:

    <div class="btn-group">
            <button type="button" class="btn btn-default">Left</button>
            <button type="button" class="btn btn-default">Middle</button>
            <button type="button" class="btn btn-default">Right</button>
    
            <div class="btn-group">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
            下拉菜单
            <span class="caret"></span>
        </button>
    
                <ul class="dropdown-menu">
                    <li><a href="#">选项一</a></li>
                    <li><a href="#">选项二</a></li>
                    <li><a href="#">选项三</a></li>
                    <li class="divider"></li>
                    <li><a href="#">选项四</a></li>
                </ul>
            </div>
    
     </div> 
    

    4.input控件组
    多个input控件放到一组中配合使用,下面演示了几种常见的组合,最常见的input控件组
    非搜索框莫属.

    (1)搜索框

    实质就是 文本框+按钮

    演示代码:

    <div class="input-group" style="width:500px;margin:0px auto;">
            <input type="text" class="form-control"/>
    




    如果需要带下拉菜单的按钮,只需要将按钮换成下拉菜单即可。

    (2)搜索框+文字

    搜索框后不是按钮,不可点击

    演示代码:

    输入完成后回车

    5.列表组

    上图是未经美化的列表,下图是经过美化的列表

    演示代码如下:

    注意:列表组中使用有序列表时不会显示序号.

    列表组不仅可以应用于列表,还可以将其他需要列表的元素展现为列表的样子.例如,

    左图为不加样式的,右图为加上列表组样式的.

    演示代码:

    英格兰战胜威尔士

    最新欧洲杯战况英格兰2:1战胜威尔士….

    乌克兰对北爱尔兰

    乌克兰对北爱尔兰….

    德国对波兰

    德国队波兰….

    为列表组添加徽章也十分容易,Bootstrap会自动将徽章放置在右边

    演示代码:

    6.分页 几乎所有的列表页面都需要分页, Bootstrap提供了一个较为美观的分页样式,如下图所示: 实现上述效果比较简单,只需给无序列表的ul元素添加pagination类即可 演示代码: 可以通过添加 .pagination-lg类或.pagination-sm类来获得比标准尺寸更大或更小的分页,例如:
    阅读更多
    文章标签: bootstrap foundation css
    上一篇jQuery插件
    下一篇Servlet与JSP以及MVC设计模式
    想对作者说点什么? 我来说一句

    没有更多推荐了,返回首页

    关闭
    关闭
    关闭