Hướng dẫn is twitter, bootstrap responsive? - Twitter, bootstrap có đáp ứng không?

Question

Nội dung chính Show

nguyen khanh
Xin chào các bạn!
9 BƯỚC LÂP KẾ HOẠCH KINH DOANH HOÀN HẢO
QUY TRÌNH THIẾT KẾ WEBSITE
THUẬT TOÁN TÌM KIẾM GOOGLE TRÊN DI ĐỘNG
Thiết kế logo Công Ty
WEBSITE CÓ CẦN TƯƠNG THÍCH VỚI MỌI TRÌNH DUYỆT KHÔNG ?
SỰ KHÁC NHAU CỦA FIXED, FLUID, ADAPTIVE VÀ RESPONSIVE
SỰ KHÁC NHAU CỦA FIXED, FLUID, ADAPTIVE VÀ RESPONSIVE
Apr 27, 2015
Apr 26, 2015
Apr 24, 2015
Mar 26, 2015
Khách quan

nguyen khanh

khanh nguyen at websiteviet123

Published Apr 27, 2015

Xin chào các bạn!

Chào mừng các bạn đã đến với webisiteviet123.blogspot.com.Bài trước mình đã chia sẻ với các bạn Hướng dẫn sử dung đưa twitter Bootstrap vào html. Hôm nay mình muốn chia sẻ với các bạn.
Bài trước mình đã chia sẻ với các bạn Hướng dẫn sử dung đưa twitter Bootstrap vào html. Hôm nay mình muốn chia sẻ với các bạn.

Thiết kế giao diện responsive với twitter bootstrap: Trong bài lần này chúng ta sẽ cùng xây dựng giao diện Responsive và sử dụng thử một số class chức năng của Bootstrap như Button, Navigation, Icon, … và cách áp dụng Slideshow của Bootstrap vào giao diện website.
Trong bài lần này chúng ta sẽ cùng xây dựng giao diện Responsive và sử dụng thử một số class chức năng của Bootstrap như Button, Navigation, Icon, … và cách áp dụng Slideshow của Bootstrap vào giao diện website.

Bootstrap là một Framework CSS, giúp bạn phát triển nhanh giao diện trang web của mình, bạn chỉ cần đựa css mà Twitter Bootstrapđã tạo ra với điều kiện bạn phải học thuộc những class, id có sẵn để áp dụng cho website của mình. Đầu tiên ta cần một bản Bootstrap. Tải Bootstrap từ địa chỉ sau: http://getbootstrap.com/

Phát triển với Bootstrap v3.0.0

HTML cơ bản

Sau đây là cấu trúc HTML cơ bản mà chúng tôi sẽ sử dụng cho dự án của mình

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap V3 template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0 ">
    <!-- Bootstrap -->
    <link href="bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="bootstrap-3.0.0/assets/js/html5shiv.js"></script>
      <script src="bootstrap-3.0.0/assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h2>Hello, world!</h2>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
  </body>
</html>

Lưu ý rằng html5shiv.js và trả lời.min.js được thêm vào mẫu này để hỗ trợ IE8. Thêm các tệp này là vào phiên bản Bootstrap 3.

Chúng tôi đã đặt thư mục Bootstrap-3.0.0 trong thư mục Twitter-BootStrap được đặt trong gốc máy chủ web của chúng tôi. Tất cả các tệp HTML mà chúng tôi sẽ tạo sẽ được đặt trong thư mục Twitter-Bootstrap. Mục đích của việc nêu điều này không là gì ngoài việc giảm bớt quá trình triển khai của bạn.

Tùy chỉnh

Chúng tôi sẽ tùy chỉnh các kiểu ngoài của các CSS của Bootstrap. Vì vậy, không làm xáo trộn tệp CSS gốc, nằm trong thư mục dist của bootstrap-3.0.0, chúng tôi sẽ tạo một tệp CSS riêng biệt được gọi là Custom.css trong cùng một thư mục. Sau đó, chúng tôi sẽ bao gồm tệp CSS đó trong các tệp HTML của chúng tôi chỉ cần thổi phồng tệp CSS gốc. Bằng cách này, chúng tôi sẽ có thể ghi đè các kiểu mặc định khi bạn muốn, nhưng, nếu chính Bootstrap tự nâng cấp, tệp CSS ban đầu cũng có thể nâng cấp mà không làm phiền tùy chỉnh của chúng tôi. Chúng tôi khuyên bạn nên làm theo phương pháp này trong quá trình phát triển của bạn.

Tạo điều hướng

Để tạo điều hướng sẽ thêm mã sau trong tệp HTML của chúng tôi, ngay sau khi thẻ mở đầu.

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <ul class="nav navbar-nav">
  <li><a href="new.html" class="navbar-brand">
<img src="logo.png"></a></li>
  <li class="active"><a href="#">Home</a></li>
  <li><a href="price.html">Price</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Social<b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li class="socials"><g:plusone annotation="inline" width="150"></g:plusone></li>
          <li class="socials"><div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-colorscheme="light" data-layout="standard" data-action="like" data-show-faces="true" data-send="false"></div></li>
          <li class="socials"><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li>
       </ul>
      </li>
  </ul>
</nav>

Để điều hướng, Bootstrap sử dụng lớp 'Navbar' ở cấp độ container. Vì vậy, nó được gán cho phần tử NAV chứa toàn bộ điều hướng.

Chúng tôi đã sử dụng lớp 'Navbar-Converse' cùng với để thay đổi màu mặc định của thanh điều hướng tối thay vì lớp bật lửa mặc định. Lớp 'Navbar-fixed-top' đảm bảo rằng thanh Nav vẫn được cố định ở vị trí trên cùng khi chúng tôi cuộn xuống trang HTML của chúng tôi.

Sử dụng vai trò = "điều hướng" là mới trong Bootstrap v3.0.0 trong khi tạo điều hướng. Bootstrap khuyên bạn nên sử dụng điều này cho NAVBARS cho mục đích tiếp cận.

Tại thời điểm này, chúng tôi đã thêm 'Padding-Top: 80px;' đến cơ thể trong tệp Custom.css. Số PF pixel bạn thêm dưới dạng đệm trên cùng vào cơ thể có thể thay đổi, nhưng trừ khi bạn làm như vậy, phần trên cùng của nội dung của chúng tôi sau khi Navbar sẽ được ẩn.

Trong container NAV, chúng tôi có một danh sách không được đặt hàng với lớp 'Nav' và 'Navbar-nav'. Trong danh sách không có thứ tự này. Mỗi mục danh sách giữ một liên kết trong điều hướng.

Lớp 'Navbar-Brand' được sử dụng để trình bày tên thương hiệu. Chúng tôi đã sử dụng một hình ảnh cho điều đó. Vì chiều cao của hình ảnh của chúng tôi nhiều hơn chiều cao dòng của thanh Nav, chúng tôi đã thực hiện một số tùy chỉnh ở đây. Chúng tôi đã tăng thuộc tính 'chiều cao dòng' của '.navbar-nav> li> a' lên 50px thay vì mặc định 20px. Chúng tôi cũng đã thực hiện kích thước phông chữ 16px.

Đối với liên kết phù hợp nhất, chúng tôi đã thêm thả xuống. Đối với lớp 'thả xuống' đó được thêm vào Li được liên kết, ngay sau đó, một mỏ neo được thêm vào có hai lớp 'thả xuống' và 'caret'. Neo này thực sự giữ văn bản neo xã hội trong dự án của chúng tôi. LI này sau đó giữ một danh sách không có thứ tự trong đó và một lần nữa mỗi mục danh sách của danh sách lồng nhau đó chứa một liên kết được trình bày trong bản thả xuống.

Chúng tôi đã thêm các plugin xã hội trong thả xuống. LI đầu tiên giữ một đánh dấu cho Google Plus, LI thứ hai giữ một đánh dấu cho Facebook và LI thứ ba giữ đánh dấu và một số tập lệnh JS để hiển thị nút Twitter.

Ngoài ra, bạn phải thêm bản đánh dấu và tập lệnh sau ngay sau khi thẻ mở đầu, để tạo nút Facebook để hoạt động

<div id="fb-root"></div>

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Để làm cho nút Twitter hoạt động, chúng tôi đã thêm tập lệnh sau ngay trước khi thẻ kết thúc

(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();

Chúng tôi đã sử dụng kiểu sau để thêm một số thêm vào các nút xã hội với lớp 'xã hội'

.socials {
padding: 10px;
}

Điều này hoàn thành điều hướng của chúng tôi.

Tạo trình chiếu với Carousal

Để tạo một trình chiếu ngay bên dưới Navbar, trên trang chủ của dự án của chúng tôi. Chúng tôi sẽ sử dụng đánh dấu sau

<div id="carousel-example-generic" class="carousel slide">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="computer.jpg" alt="...">
      <div class="carousel-caption">
        <h2>Large Desktops are everywhere</h2>
        <p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
      </div>
    </div>
    <div class="item">
      <img src="mobile.jpg" alt="...">
      <div class="carousel-caption">
        <h2>Mobiles are outnumbering desktops</h2>
        <p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
      </div>
    </div>
<div class="item">
      <img src="cloud1.jpg" alt="...">
      <div class="carousel-caption">
        <h2>Enterprises are adopting Cloud computing fast</h2>
        <p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
      </div>
    </div>
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="icon-next"></span>
  </a>
</div>
</div>

Có bốn phần trong băng chuyền. Container chính được xác định bằng cách sử dụng thẻ div và lớp 'slide carousel' được gán cho nó.

Sau đó, có một danh sách được đặt hàng có lớp 'chỉ số băng chuyền' được liên kết với nó. Mỗi mục danh sách trong OL này đề cập đến một slide. lớp 'hoạt động' được gán cho slide tải theo mặc định khi trang tải. Khi được hiển thị, bạn có thể thấy chúng là những vòng tròn nhỏ ngay dưới chú thích.

Sau đó, mỗi slide (hình ảnh) được đặt trong thẻ div và 'mục' lớp 'được gán cho nó. Mỗi vật phẩm này một lần nữa làm tổ một Div với lớp 'Tùy biến băng chuyền' được gán cho nó. Tùy chỉnh Carousel giữ một số đánh dấu được hiển thị dưới dạng chú thích cùng với hình ảnh. Chúng tôi có một H2 và một nút được bọc trong một đoạn văn ở đây, nhưng bạn có thể có đánh dấu của riêng bạn.

Phần cuối cùng là cho điều khiển tiếp theo trước và slide/slide. Điều này được xác định bằng cách sử dụng 'trái' và 'carousel-control' cho các lớp trước và 'phải' và 'kiểm soát carousel' cho tiếp theo.

Các lớp 'ICON-PREV' và 'ICON-NEXT' được sử dụng cho các biểu tượng tiếp theo và trước đó.

Chúng tôi đã thực hiện một số tùy chỉnh trong Carousal mặc định. Chúng tôi muốn các chú thích, chỉ báo và các biểu tượng tiếp theo/trước đó được hiển thị một số pixel trên vị trí mặc định của nó.

Vì vậy, chúng tôi đã thêm các kiểu sau trong tệp Custom.css của chúng tôi

git clone git://github.com/twbs/bootstrap.git

0

Chúng tôi cũng đã tùy chỉnh H2 bằng cách thêm một biên dưới cùng là 30 pixel vào nó.

git clone git://github.com/twbs/bootstrap.git

1

Hình ảnh đáp ứng

Bạn có thể đã nhận thấy rằng đối với mỗi hình ảnh trong trình chiếu, chúng tôi đã sử dụng lớp 'phản hồi'. Đây là một tính năng mới trong Bootstrap v3.0.0. Sử dụng lớp 'phản hồi' IMG 'cùng với thẻ IMG, Bootstrap làm cho hình ảnh phản hồi lại.

Tạo lưới

Bên dưới trình chiếu, chúng tôi đã đặt nội dung của chúng tôi bằng lưới. Chúng tôi đã mở lưới bằng một div với lớp 'container'. Lưu ý rằng chúng tôi sẽ phát triển một trang web đáp ứng và không giống như các phiên bản Bootstrap trước đây, ở đây, chúng tôi có một lớp duy nhất cho container và mặc định là phản hồi theo mặc định.

Container Div Nests Số lượng DIV (ba ở hàng đầu tiên và sáu ở hàng thứ hai) với lớp 'hàng' được liên kết với chúng để tạo các hàng của lưới bootstrap.

Mỗi hàng sau đó giữ các div với lớp 'col-x-y' để tạo các cột. Giá trị của X có thể là XS cho các thiết bị di động, SM cho máy tính bảng, MD cho máy tính xách tay và màn hình máy tính để bàn nhỏ hơn và LG cho màn hình máy tính để bàn lớn. Nó có một cách tiếp cận đầu tiên di động. Giá trị của y có thể là bất kỳ số nguyên dương nào nhưng tổng số cột trong lưới không được vượt quá 12. Trong dự án của chúng tôi, chúng tôi đã sử dụng LG vì sự đơn giản nhưng vì chúng tôi đã làm như vậy, bạn có thể có trải nghiệm xếp chồng lên nhau trong khi Xem trang web dự án trong thiết bị di động hoặc máy tính bảng.

Trong một vài ngày, chúng tôi sẽ có một hướng dẫn đầy đủ về hệ thống lưới của Twitter Bootstrap v3.0.0 và ở đó chúng tôi sẽ khám phá sự tuyệt vời của nó về các khả năng đáp ứng.

Trong ví dụ này, chúng tôi đã muốn có ba cột có chiều rộng bằng nhau trong hàng đầu tiên của chúng tôi, vì vậy chúng tôi đã sử dụng 'col-lg-4' cho tất cả các cột. Ở hàng thứ hai, chúng tôi đã làm cho nó 'col-lg-2' vì chúng tôi muốn có sáu cột.

Sau đây là đánh dấu cho lưới chứa hai hàng, hàng đầu tiên có ba cột và hàng thứ hai có sáu cột.

git clone git://github.com/twbs/bootstrap.git

2

Chúng tôi đã kết thúc lưới với một nhân sự và một chân trang với đánh dấu sau

git clone git://github.com/twbs/bootstrap.git

3

Sử dụng bảng

Trong trang giá.html của dự án của chúng tôi, chúng tôi đang sử dụng một bảng để hiển thị bảng giá. Chúng tôi đã sử dụng đánh dấu sau

git clone git://github.com/twbs/bootstrap.git

4

Hai lớp 'Bảng' và 'Bàn biên giới' được sử dụng là tệp CSS ban đầu của Bootstrap. Nhưng chúng tôi đã thực hiện một số tùy chỉnh để làm cho các đầu bảng trông khác nhau bằng cách thêm CSS sau trong tệp tùy chỉnh của chúng tôi.

git clone git://github.com/twbs/bootstrap.git

5

Sử dụng huy hiệu

Chúng tôi đã sử dụng lớp 'huy hiệu' để hiển thị một số văn bản trong bảng của chúng tôi. Chúng tôi cũng có lớp Huy hiệu tùy chỉnh với CSS sau đây

git clone git://github.com/twbs/bootstrap.git

6

Đối với trang này và liên hệ.html, chúng tôi đã thêm một quy tắc CSS khác trong Customize.css

git clone git://github.com/twbs/bootstrap.git

7

Điều này làm cho trung tâm căn chỉnh H2.

Sử dụng hình thức

Trong tệp contact.html, chúng tôi đã tạo ba cột và trong cột đầu tiên, chúng tôi đã nhúng một từ. Chúng tôi đã sử dụng các kiểu mặc định cho việc này.

git clone git://github.com/twbs/bootstrap.git

8

Lớp 'hình thức nội địa' đặt biểu mẫu điều khiển theo chiều ngang. Lưu ý rằng có vai trò = "Mẫu" được thêm vào để tiếp cận. Đây là tính năng của phiên bản 3.0.0.

Để đặt từng điều khiển biểu mẫu BootStrap 3.0.0 sử dụng lớp 'nhóm hình thức' mới.

Trong cột thứ hai của lưới trong trang này, chúng tôi đã đặt một số văn bản một cách đơn giản.

Thêm bản đồ Google

Trong cột thứ ba của lưới trong trang Contact.html, chúng tôi đã thêm Google Map. Vì điều đó, chúng tôi đã sử dụng đánh dấu sau

git clone git://github.com/twbs/bootstrap.git

9

Và JS sau, đã được thêm vào ở trên cùng tệp HTML trong đầu

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

0

Và bạn phải thêm thẻ tập lệnh sau trước khi JS nói

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

1

Bạn phải thêm kiểu sau trong Custom.css cho bản đồ được hiển thị đúng

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

2

Đây là cách chúng tôi đã tạo ra dự án đơn giản đầu tiên của chúng tôi dựa trên Twitter Bootstrap v3.0.0. Nhưng chúng tôi vừa mới trầy xước bề mặt. Sê -ri này sẽ cập nhật tất cả các hướng dẫn Bootstrap Twitter mà chúng tôi phải phiên bản 3.0.0 khám phá các kỹ thuật và tùy chỉnh mới.

Câu hỏi? Đề xuất? Khoe khoang? Tham gia các cuộc thảo luận dưới đây. Đối với các hướng dẫn sắp tới, vui lòng đăng ký nguồn cấp dữ liệu của chúng tôi.

Tiếp theo: TỔNG QUAN CSS BOOTSTRAP 3 CSS Twitter Bootstrap 3 CSS Overview